figma - Bidirectional Figma Design Skill
Read Figma designs and write components, screens, and tokens back to Figma
Tags
Updated: 2026-05-28Capabilities
Typical Inputs
Typical Outputs
What this skill does
- get design context
- get variable definitions
- search design system
- get screenshot
- create frames
- create text nodes
- create components
- set node properties
- create new files
- generate diagrams
- push components
- push screens
- push tokens
- translate Auto Layout
- map UI components
- extract design tokens
Inputs
- Figma node ID
- Figma file URL
- JavaScript code
- Design system query
- Design token data
- Component properties
Outputs
- Design context data
- Variable definitions
- Design system components
- Screenshots
- Figma frames
- Figma components
- Figma files
- Figma diagrams
- Design tokens
- Component mappings
- Design spec files
Requirements
- /figma:figma-use skill
- Figma API connection
- MCP server access