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.

2. 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.

3. 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.

4. 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.

5. 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;
  meta: string;
  badge?: string;           // optional layer in Figma
  onAddToCart: () => void;
  onViewDetails: () => void;
}

export function ProductCard({ thumbnail, title, meta, badge, onAddToCart, onViewDetails }: ProductCardProps) {
  return (
    <div className="product-card">                       {/* vertical flex */}
      <div className="product-card__thumbnail">          {/* position: relative, aspect-ratio: 16/9 */}
        <img src={thumbnail} alt={title} />
        {badge && <span className="product-card__badge">{badge}</span>} {/* absolute */}
      </div>
      <div className="product-card__content">            {/* vertical flex, gap 8, padding 16 */}
        <h3 className="product-card__title">{title}</h3>
        <p className="product-card__meta">{meta}</p>
        <div className="product-card__actions">          {/* horizontal flex, gap 8 */}
          <Button variant="primary" onClick={onAddToCart}>Add to cart</Button>
          <Button variant="ghost" onClick={onViewDetails}>Details</Button>
        </div>
      </div>
    </div>
  );
}

4. Implement spacing and sizing from design

Map Figma's spacing variable collection directly to CSS custom properties:

:root {
  /* Figma "Spacing" variable collection */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --space-16: 64px;
}

If the design shows off-scale values (13px, 27px), flag it with the designer - it's likely a mistake. Never hard-code arbitrary values without confirming intent.

5. Handle responsive behavior from Figma constraints

Figma designs are fixed-width frames. Read constraints to infer responsive intent, then check any separate mobile frames the designer provided for the small-viewport layout.

/* Left+Right constraint -> stretches full width */
.hero-section { width: 100%; padding: 80px 24px; }

/* Centered inner content with designer's max-width */
.hero-content { max-width: 1200px; margin: 0 auto; }

/* Desktop 2-col layout -> collapse on mobile (from Figma mobile frame) */
.hero-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 768px) {
  .hero-columns { grid-template-columns: 1fr; gap: 32px; }
}

6. Extract colors and implement theme

Use Figma's local styles/variables panel. Maintain two layers - primitives (raw hex values) and semantic tokens (purpose-mapped aliases). This mirrors how Figma variables work.

:root {
  /* Primitive tokens - Figma "Color/Primitives" */
  --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8;
  --gray-50: #f9fafb;  --gray-100: #f3f4f6; --gray-700: #374151; --gray-900: #111827;

  /* Semantic tokens - Figma "Color/Semantic" - reference primitives */
  --color-bg-default: var(--gray-50);
  --color-bg-surface: #ffffff;
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-action-primary: var(--blue-600);
  --color-action-primary-hover: var(--blue-700);
  --color-border-default: var(--gray-100);
}

/* Dark theme - from Figma dark mode frame */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-default: #0f172a;
    --color-bg-surface: #1e293b;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border-default: #334155;
  }
}

7. Implement icons and assets from Figma

Icons in Figma are SVG frames or icon library components. Export and convert them:

# In Figma: select icon frame > Export > SVG
# Convert to React with SVGR:
npx @svgr/cli --out-dir src/icons -- ./figma-exports/

// Result: typed, tree-shakeable icon component
// Always match Figma's icon sizes: 16, 20, 24, 32px
interface IconProps { size?: 16 | 20 | 24 | 32; className?: string; }

export function ArrowRightIcon({ size = 20, className }: IconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" className={className}>
      <path d="M4 10h12M10 4l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

For raster images: export at 1x, 2x, 3x from Figma. Use <img srcset> or Next.js <Image>.

Never substitute emojis for icons in code. Figma designs use vector icons - implement them as SVG components using Lucide React, Heroicons, Phosphor, React Icons, or Font Awesome. Emojis render inconsistently across platforms and cannot be styled.

---

Anti-patterns

Anti-pattern	Why it's wrong	Correct approach
Hard-coding hex values from screenshots	Colors drift with screenshot compression; misses semantic meaning	Use Figma inspect panel or copy from Figma color styles
Using position: absolute for everything	Figma absolute positions don't translate to responsive layouts	Check if the layer uses auto layout first; use flexbox/grid
Ignoring auto layout and using margin/padding guesses	Results in spacing drift and non-responsive components	Read the auto layout gap and padding from Figma inspect
Treating variant properties as CSS classes	class="state-hover" doesn't map to real states	Use disabled, aria-*, :hover, :focus real state selectors
Implementing one fixed-width breakpoint	Figma mobile frames are hints, not the only breakpoints	Use fluid layouts and test between Figma breakpoints too
Converting px directly to rem without a base check	Assumes 16px base - breaks if the design uses a different base size	Verify Figma uses 16px base. Divide: value / 16 = rem

---

Gotchas

1. Figma's "Fixed" width/height is not the same as a CSS fixed value - A frame with a fixed 400px width in Figma is an absolute constraint for that design viewport. In a responsive implementation it may need to be max-width: 400px or width: 100% with a cap. Don't convert Figma fixed dimensions to hardcoded CSS pixels without understanding the responsive intent.

2. position: absolute child coordinates in Figma are relative to their direct parent frame, not the page - When a Figma frame uses absolute positioning, the X/Y values shown in Inspect are relative to the parent frame's top-left corner. If you wrap the element in an extra div in code, the offset coordinates will be wrong.

3. Figma letter-spacing is in percent, CSS is in em - Figma displays letter-spacing as a percentage (e.g., 2%). CSS letter-spacing uses em. Divide the Figma value by 100 to get the em value: 2% -> 0.02em. Using the raw percentage number as a CSS value (e.g., letter-spacing: 2%) is invalid CSS and silently does nothing.

4. Auto layout "Fixed size" vs "Hug contents" is not always visible without switching modes - A frame that appears to be fixed-width in Figma might actually be set to "Hug contents" for one axis, which would make it width: fit-content in CSS. Always open the auto layout panel to verify both width and height sizing modes before writing dimensions in code.

5. Figma effects like box shadows use X/Y offsets, spread, and blur - CSS box-shadow order differs - Figma: x offset, y offset, blur, spread, color. CSS: offset-x, offset-y, blur-radius, spread-radius, color. The order is the same, but Figma's "Spread" can be negative (inset-like behavior). A Figma shadow with negative spread requires box-shadow: X Y B -S color in CSS, not an inset keyword.

---

References

For detailed mapping tables and property-by-property reference:

• references/figma-css-mapping.md - Complete Figma properties to CSS equivalents, including effects, typography, constraints, and blend modes

Only load the references file when implementing complex layouts or needing the full property reference - it is comprehensive and will consume context.