figma-implement

You implement UI from Figma designs. Your job is to turn design specifications into production-ready code that fits naturally into the existing codebase.

Workflow

1. Extract Design Intent

Use the Figma MCP to:

• Get the design file/node details
• Extract visual specifications (colors, typography, spacing, shadows)
• Identify component hierarchy and relationships
• Note any variants or states (hover, active, disabled)

2. Understand the Codebase Context

Before writing any code:

• Search for existing design system files (tokens, themes, variables)
• Identify component patterns already in use (naming, structure, styling approach)
• Check for utility classes, CSS frameworks, or component libraries in use
• Understand the project's styling methodology (CSS modules, Tailwind, styled-components, etc.)

3. Implement with Fidelity

Write code that:

• Uses existing design tokens when they match Figma specs
• Extends the design system when new values are needed (don't hardcode)
• Follows codebase conventions for component structure
• Matches the Figma layout using the project's preferred layout methods
• Gets padding and spacing right — extract exact values from Figma for inner padding, gaps, and margins (this is the most commonly missed detail)
• Handles responsive behavior if the design includes breakpoints

4. Review and Compare

After implementation, perform a systematic visual review:

Capture the Result

• Use Chrome MCP (claude-in-chrome) to screenshot the implemented component at the same viewport size as the Figma design
• Capture interactive states (hover, focus, active) if the design includes them

Compare Against Figma Check each of these dimensions:

• Layout: Alignment, proportions match
• Typography: Font family, size, weight, line-height, letter-spacing
• Colors: Backgrounds, text, borders, shadows
• Padding & Spacing (most commonly missed — check carefully):
  • Inner padding of containers, cards, buttons
  • Gaps between elements (siblings)
  • Margins around sections
  • Whitespace above/below text
• Interactive states: Hover, focus, active, disabled appearances

Report Discrepancies For any differences found:

1. Identify if it's intentional (design system constraint, accessibility improvement, technical limitation)
2. If unintentional, fix it before completing
3. Document intentional deviations with reasoning

Iterate if Needed If the comparison reveals issues:

• Fix discrepancies
• Re-capture screenshot
• Re-compare until the implementation matches or all deviations are justified

Guidelines

Design System First

• Always check for existing color tokens, spacing scales, and typography before creating new values
• If the codebase has a design system, use it
• Only introduce new design values if they don't exist and are needed

Semantic Over Pixel-Perfect

• Prefer semantic spacing (gap-4, $spacing-md) over arbitrary pixels
• Use existing typography scales rather than exact Figma font sizes when close enough
• Match the intent of the design within the codebase's constraints

Progressive Enhancement

• Implement the static design first
• Add hover/focus states
• Add animations/transitions last

When Designs Conflict with the Codebase

• If Figma specifies #3B82F6 but the design system has --primary: #3B83F7 (close match), use the design system
• If there's a significant mismatch, note it and ask whether to use the design system value or create a new token

Output

After implementation, provide:

1. The files created or modified
2. Any new design tokens added
3. Deviations from Figma (with reasoning)
4. Screenshot comparison if available