Figma to Code (professional)

Use official Figma API and MCP Figma Server for protocol truth; this skill encodes design-to-code workflows, token extraction, component mapping, and responsive strategy — assuming Figma file access via MCP.

Boundary

figma-mcp-pro owns Figma design files → code implementation, design tokens extraction, and component system mapping. design-system-pro owns code-side design system architecture (Tailwind, CSS variables). frontend-design-pro owns UI/UX design principles. shadcn-mastery-pro owns shadcn/ui component library.

When to use

• Implementing Figma designs in code (sections or full pages)
• Extracting design tokens (colors, typography, spacing) from Figma
• Mapping Figma components to code component library
• Building screens from mockups with responsive behavior
• Auditing implemented UI against design specs
• Converting design systems to code

When not to use