Figma-to-Code Review

Review AI-generated or hand-written code against a Figma design to catch visual mismatches, missing states, and token drift.

All Prompts

When to Use

  • After generating code from a Figma design with AI tools
  • During design-to-code handoff review
  • When auditing an existing implementation against updated designs
  • Before merging a PR that implements a new design

The Prompt

Compare this code implementation against the Figma design and identify every mismatch.

Check:
1. **Layout** — Does the code match the Figma layout? Check flex direction, alignment, gaps, padding, and margins. Flag any hardcoded pixel values that should be tokens.
2. **Typography** — Do font-family, font-size, font-weight, line-height, and letter-spacing match the design? Check every text element.
3. **Colors** — Are all colors from the design system tokens? Flag any raw hex values. Check background, text, border, and icon colors.
4. **Spacing** — Does spacing between elements match the design? Compare padding and gap values.
5. **Border radius** — Do corners match? Check all containers, buttons, inputs, and cards.
6. **States** — Are all interactive states implemented? (hover, active, focus, disabled, loading, error, empty)
7. **Responsive** — Does the code handle the breakpoints shown in Figma? Check mobile, tablet, and desktop.
8. **Missing elements** — Is anything in the design not in the code, or vice versa?

Format as a table:
| Element | Design Value | Code Value | Status | Fix |

Figma design: [paste screenshot URL or describe the design]

Code:
[paste the component code]

Example Output

## Figma vs Code Review: Profile Card

| Element              | Design (Figma)   | Code              | Status | Fix                              |
|----------------------|------------------|-------------------|--------|----------------------------------|
| Card padding         | 24px             | 20px              | Mismatch | Change to spacing-6 (24px)      |
| Avatar size          | 48x48            | 48x48             | Match  | —                                |
| Name font-weight     | 600              | 500               | Mismatch | Change to font-semibold         |
| Bio text color       | gray-500         | #6B7280 (raw hex) | Warning| Use text-secondary token         |
| Border radius        | 12px             | 8px               | Mismatch | Change to radius-lg (12px)      |
| Hover state          | Exists in Figma  | Not implemented   | Missing| Add hover:bg-surface-secondary   |
| Disabled state       | Exists in Figma  | Not implemented   | Missing| Add opacity-50, pointer-events-none |
| Shadow               | shadow-md        | shadow-sm         | Mismatch | Change to shadow-md             |

### Summary
- 4 mismatches to fix
- 2 missing states to implement
- 1 raw hex value to replace with a token
- Estimated fix time: 20 minutes