Figma Implement Design

Figma Implement Design

Use this skill when a user wants a Figma design translated into production-ready code.

When to use

• The request provides a Figma file or a screen to implement
• The task is about matching layout, spacing, typography, and component structure
• The goal is code fidelity, not just a loose visual similarity

Workflow

1. Confirm the Figma file, node, or scope.
2. Inspect the layout hierarchy, spacing, text styles, and component usage.
3. Identify reusable code components before writing new ones.
4. Implement incrementally and validate each major section.
5. Compare the result against the design and correct obvious mismatches.

Boundaries

• If the request is only about mapping Figma components to code components, use the code-connect workflow instead.
• If the task is only to edit canvas elements in Figma, use the Figma canvas workflow instead.
• If the task needs a full-page or multi-section screen, keep the implementation cohesive and avoid partial stylistic drift.

Output expectations

• Produce a concrete implementation plan or code changes.
• Call out any missing Figma context early.
• Keep the result faithful to the design system and interaction intent.