Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design",…
Translates Figma designs into production-ready code with pixel-perfect visual fidelity. Requires Figma MCP server connection and a Figma URL with file key and node ID to extract design context, screenshots, and assets Seven-step structured workflow: parse URL, fetch design context, capture visual reference, download assets, translate to project conventions, achieve 1:1 parity, and validate against Figma Prioritizes design system reuse over duplication; maps Figma tokens to project design tokens and extends existing components rather than creating new ones Handles complex designs by fetching metadata first, then individual child nodes incrementally when responses are truncated Implement Design Overview This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs. Prerequisites Figma MCP server must be connected and accessible Before proceeding, verify the Figma MCP server is connected by checking if Figma MCP tools (e.g., get_design_context) are available. If the tools are not available, the Figma MCP server may not be enabled. Guide the user to enable the Figma MCP server that is included with the plugin. They may need to restart their MCP client afterward. User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2 :fileKey is the file key 1-2 is the node ID (the specific component or frame to implement) Project should have an established design system or component library (preferred) Required Workflow Follow these steps in order. Do not skip steps.
don't have the plugin yet? install it then click "run inline in claude" again.