Figma
Official@figma · San Francisco, CA
Collaborative interface design tool
Agent Skills by Figma
Showing 17 vetted skills indexed across 1 GitHub repositories.
figmavideo-interaction-mapper
Extract key moments from video screen recordings and build annotated Figma storyboards.
figmagenerate-project-plan
Create FigJam project plan boards from a PRD and codebase context.
figmafigma-use-motion
Animate Figma nodes with keyframing, styles, and timeline durations via the Plugin API.
figmafigma-use-slides
Design slides in Figma using the Plugin API with custom layouts and typography.
figmafigma-generate-design
Build full-page Figma UIs by importing design system components, variables, and styles.
figmafigma-implement-motion
Convert Figma animation data into executable code for web and mobile apps.
figmafigma-generate-diagram
Generate diagrams in FigJam from Mermaid syntax.
figmafigma-create-new-file
Create new Figma design, FigJam, or slides files via the Figma MCP tool.
figmafigma-swiftui
Convert Figma designs to SwiftUI code and SwiftUI views to Figma files.
figmafigma-generate-library
Automate Figma design system creation with variables and component libraries.
figmafigma-use
Execute JavaScript code within Figma files via the Plugin API.
figmafigma-use-figjam
Automate FigJam design operations using Figma's MCP tooling.
figmafigma-code-connect
Generate .figma.ts code templates from Figma components via MCP server APIs.
figmafigma-design-to-code
Convert Figma design files into code with implementation instructions.
figmaimplement-design
Translate Figma designs into UI code using design tokens and existing components.
figmacode-connect-components
Map Figma components to code implementations using Code Connect.
figmacreate-design-system-rules
Generate project-specific design system rules for Figma-to-code implementations.
Frequently Asked Questions About Figma
FAQPage SchemaWhat specific tasks can be performed using these design capabilities?▼
These capabilities enable the translation of visual designs into production code, the generation of design system rules, the creation of project planning boards from requirements, and the conversion of animation data into executable web or mobile code. Users can also generate diagrams from syntax and manage component libraries.
Which personas benefit most from these technical design capabilities?▼
Product designers, frontend engineers, and design system architects benefit most. These features bridge the gap between visual interface creation and technical implementation, allowing teams to maintain consistency between design files and production codebases while reducing manual handoff efforts during the development lifecycle.
What are the prerequisites for implementing design-to-code synchronization?▼
Implementation requires an existing design system with defined variables, styles, and components. Users must utilize the provided mapping interfaces to link visual elements to code implementations. Access to the environment requires a valid account and the configuration of project-specific rules to ensure accurate translation of design tokens.