figma-to-code

When this skill is activated, always start your first response with the 🧢 emoji.

Figma to Code

A practical translation guide for turning Figma designs into production-quality code. This skill encodes the exact mental model needed to read a Figma file and produce HTML, CSS, and React that matches the design without guesswork. It covers the full workflow: reading auto layout, extracting tokens, mapping component variants to props, handling responsive constraints, and knowing when pixel-perfection is the wrong goal.

The gap between "looks like the design" and "is the design" is not artistic - it is systematic. Figma has a direct mapping for nearly every visual property. Learn the mappings once, apply them always.

When to use this skill

Trigger this skill when the user:

• Is implementing a UI from a Figma mockup, screenshot, or design spec
• Asks how to translate a specific Figma property (auto layout, constraints, effects) to CSS
• Needs help matching spacing, typography, or color values from Figma inspect panel
• Is converting Figma component variants into React (or Vue/Svelte) component props
• Asks about design tokens, Figma variables, or how to sync design and code
• Needs to implement responsive behavior based on Figma frame constraints
• Asks about pixel-perfect implementation, visual QA, or design review feedback
• Is working on designer-developer handoff process or tooling

Do NOT trigger this skill for:

• Pure CSS architecture questions with no Figma design source - use frontend-developer instead
• Brand identity, logo creation, or original UI design work - this skill is for implementation, not invention

Key principles

1. Auto layout = flexbox/grid, not magic - Every Figma auto layout frame maps to a CSS

flexbox or grid container. Direction, gap, padding, alignment - all have direct CSS equivalents. Read the auto layout panel, not the computed dimensions.

1. Design tokens are the contract - Colors, spacing, typography, and radii should come from

Figma variables/styles, not from eyeballing hex values. Tokens are the handoff interface. If the design has no tokens, create them as CSS custom properties before writing components.

1. Inspect, don't eyeball - Use the Figma inspect panel (Dev Mode or right-click > Inspect)

for every value. Never estimate. Figma gives exact px, rem, hex, font-weight, and line-height. Eyeballing causes 1-3px drift that accumulates to obviously-wrong layouts.

1. Components map to components - A Figma component with variants maps to a React/Vue/Svelte

component with props. Variant properties (Size, State, Type) become prop names. Use the component name from the Figma layers panel as the component name in code.

1. Responsive intent over pixel perfection - A Figma frame is designed at a fixed viewport.

The designer's intent is what scales - not the exact pixel values. Use Figma constraints (left/right = percentage widths, center = auto margins, scale = percentage sizing) to infer responsive CSS. Ask the designer if constraints are ambiguous.

Core concepts

Figma auto layout -> CSS flexbox

| Figma | CSS | |---|---| | Direction: Horizontal | flex-direction: row | | Direction: Vertical | flex-direction: column | | Gap | gap: <value>px | | Padding | padding: <top> <right> <bottom> <left> | | Align items: Start/Center/End | align-items: flex-start/center/flex-end | | Justify: Start/Center/End/Space between | justify-content: flex-start/center/flex-end/space-between | | Hug contents (width) | width: fit-content | | Fill container (width) | width: 100% or flex: 1 | | Wrap: Wrap | flex-wrap: wrap | | Min/Max width | min-width / max-width |

Frames without auto layout use absolute X/Y coordinates. Map them to position: absolute children inside a position: relative parent.

Variant properties -> component props

Figma variant property names become prop names directly:

| Figma variant property | React prop | |---|---| | Size = sm/md/lg | size?: 'sm' \| 'md' \| 'lg' | | State = default/disabled | disabled?: boolean | | Type = primary/secondary/ghost | variant?: 'primary' \| 'secondary' \| 'ghost' | | HasIcon = true/false | icon?: ReactNode |

// Figma "Button": Size (sm, md, lg), Variant (primary, secondary, ghost), State (default, disabled)
interface ButtonProps {
  size?: 'sm' | 'md' | 'lg';
  variant?: 'primary' | 'secondary' | 'ghost';
  disabled?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export function Button({ size = 'md', variant = 'primary', disabled = false, children, onClick }: ButtonProps) {
  return (
    <button className={cn(styles.button, styles[size], styles[variant])} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

Design tokens -> CSS variables

Figma variables (formerly styles) map to CSS custom properties. Use the same name hierarchy:

/* Figma local variable collection: "Colors" */
/* Group: brand/primary */
:root {
  --color-brand-primary-50: #eef2ff;
  --color-brand-primary-500: #6366f1;
  --color-brand-primary-600: #4f46e5;

  /* Figma semantic aliases */
  --color-action-bg: var(--color-brand-primary-600);
  --color-action-bg-hover: var(--color-brand-primary-700);
  --color-action-text: #ffffff;
}

/* Figma text style "Body/Regular" */
/* font-family: Inter, font-size: 16, font-weight: 400, line-height: 24 */
:root {
  --font-body-family: 'Inter', sans-serif;
  --font-body-size: 1rem;      /* 16px */
  --font-body-weight: 400;
  --font-body-line-height: 1.5; /* 24/16 */
}

Constraints -> responsive behavior

| Figma constraint | CSS interpretation | |---|---| | Left | left: <value>px | | Right | right: <value>px | | Left + Right | left: <Xpx>; right: <Xpx> (stretches) | | Center (horizontal) | margin: 0 auto | | Scale | width: <percent>% | | Top + Bottom | top: <Ypx>; bottom: <Ypx> (stretches vertically) | | Center (vertical) | top: 50%; transform: translateY(-50%) |

Common tasks

1. Map auto layout to CSS flexbox/grid

Read the Figma auto layout panel setting-by-setting. Each has a direct CSS counterpart.

/* Figma: Horizontal, Gap 16, Padding 12px 24px, Align center, Fill container */
.card-actions { display: flex; flex-direction: row; gap: 16px; padding: 12px 24px; align-items: center; width: 100%; }

/* Figma: Vertical, Gap 8, Padding 24, Hug contents */
.form-field { display: flex; flex-direction: column; gap: 8px; padding: 24px; width: fit-content; }

/* Figma layout grid: 3 columns, col-gap 24, row-gap 32 */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 32px; }

2. Extract and implement typography scale

Inspect each Figma text style: font-family, size (px), weight, line-height (px), letter-spacing (%). Convert all values when writing CSS - line-height: lh_px / font_px (e.g., 24/16 = 1.5 unitless); letter-spacing: value / 100 em (e.g., 2% = 0.02em).

:root {
  /* Figma "Typography" text styles - converted to CSS custom properties */
  --type-h1:    2.25rem;   /* 36px, w700, lh 1.2  */
  --type-h2:    1.875rem;  /* 30px, w600, lh 1.25 */
  --type-h3:    1.5rem;    /* 24px, w600, lh 1.3  */
  --type-body:  1rem;      /* 16px, w400, lh 1.5  */
  --type-sm:    0.875rem;  /* 14px, w400, lh 1.5  */
  --type-label: 0.875rem;  /* 14px, w500, lh 1.4  */
  --type-xs:    0.75rem;   /* 12px, w400, lh 1.6  */
}

3. Translate Figma components to React components

Match the Figma layer structure directly. Each Figma layer becomes a DOM element; each auto layout frame becomes a flex/grid container; optional layers become optional props.

// Figma component "ProductCard"
// Layers: thumbnail (image frame), badge? (absolute overlay),
//   content (vertical auto layout): title, meta, actions (horizontal auto layout)

interface ProductCardProps {
  thumbnail: string;
  title: string;