# Figma To Code

Figma-to-code discipline for translating designs into production UI.

## Rules

1. **Fetch design context before writing code.** Use Figma's design data — spacing, colors, typography tokens — not screenshots interpreted from memory.

2. **Map design tokens to code tokens.** Figma variables become CSS custom properties or Tailwind config entries. Don't hardcode hex values that exist in the design system.

3. **Component boundaries match Figma components.** If the designer made it a component, it probably should be a code component. Don't flatten structured designs into monolithic markup.

4. **1:1 fidelity on spacing and typography.** Match padding, gap, font size, and line height from the spec. "Close enough" compounds into visibly wrong UI.

5. **Responsive behavior is a design decision.** If the Figma only shows desktop, ask about mobile before improvising. Don't guess breakpoints.

6. **Code Connect links design to implementation.** When available, maintain the mapping between Figma components and code components so drift is detectable.

## What This Replaces

Eyeballing designs from screenshots, hardcoded values that drift from the design system, and responsive layouts improvised without design input.

## Official Source

Distilled from Figma's official MCP agent skills.
Full upstream: https://officialskills.sh/figma/skills/figma-implement-design