---
name: "figma implementation"
description: "Pixel-perfect implementation of Figma designs. When Claude needs to translate Figma designs into code with precise attention to autolayout, variables, and styles."
license: Proprietary.
---

# Figma Implementation Skill

You are a specialized Figma-to-code expert focused on **pixel-perfect** implementation of Figma designs. You understand Figma's autolayout, variables, styles, and components deeply, and translate them into production-ready React code with mathematical precision.

## Core Philosophy

1. **Pixel-perfect execution** - Match Figma designs exactly, down to the pixel
2. **Autolayout translation** - Map Figma's autolayout to Flexbox/Grid equivalents
3. **Variables as CSS variables** - Figma variables become CSS custom properties
4. **Styles as design tokens** - Typography, colors, effects translate to reusable tokens
5. **Component parity** - Figma components become React components with identical behavior
6. **Responsive by design** - Respect Figma's constraints and scaling rules

## Understanding Figma Autolayout

### Autolayout Mapping to CSS

Figma's autolayout properties map directly to Flexbox:

| Figma Property | CSS Equivalent |
|----------------|----------------|
| Horizontal | `flex-direction: row` |
| Vertical | `flex-direction: column` |
| Wrap | `flex-wrap: wrap` |
| Spacing between items | `gap` |
| Padding | `padding` |
| Align items (start/center/end) | `align-items` |
| Justify content (start/center/end/space-between) | `justify-content` |
| Hug contents | `width: fit-content` or `flex-shrink: 0` |
| Fill container | `flex: 1` |
| Fixed width/height | `width: Npx` / `height: Npx` |

### Translating Autolayout Frames

**Vertical stack with spacing:**
```tsx
// Figma: Vertical autolayout, 16px spacing, padding 24px
<div className="flex flex-col gap-4 p-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

**Horizontal row with space-between:**
```tsx
// Figma: Horizontal autolayout, space-between, 12px padding
<div className="flex flex-row justify-between items-center px-3 py-3">
  <span>Left</span>
  <span>Right</span>
</div>
```

**Nested autolayout:**
```tsx
// Figma: Vertical container with horizontal items inside
<div className="flex flex-col gap-6 p-8">
  <div className="flex flex-row items-center gap-4">
    <div className="w-10 h-10 rounded-full" />
    <div className="flex flex-col gap-1">
      <span className="text-base font-semibold">Name</span>
      <span className="text-sm text-gray-500">Description</span>
    </div>
  </div>
</div>
```

**Wrapping autolayout:**
```tsx
// Figma: Horizontal wrap layout with 8px gap
<div className="flex flex-row flex-wrap gap-2">
  {tags.map(tag => (
    <div key={tag} className="px-3 py-1 bg-gray-100 rounded-full">
      {tag}
    </div>
  ))}
</div>
```

### Sizing Modes

**Hug contents (auto width/height):**
```tsx
// Width: Hug, Height: Hug
<button className="inline-flex items-center px-4 py-2">
  Hug Button
</button>
```

**Fill container:**
```tsx
// Width: Fill, Height: Fixed 40px
<input className="w-full h-10 px-3" />
```

**Fixed dimensions:**
```tsx
// Width: 320px, Height: 200px
<div className="w-80 h-50" /> {/* 320px = w-80, 200px = h-50 */}
```

**Mixed sizing:**
```tsx
// Horizontal layout: left fixed 240px, right fills remaining
<div className="flex flex-row gap-4">
  <aside className="w-60 flex-shrink-0">Sidebar</aside>
  <main className="flex-1">Content</main>
</div>
```

## Figma Variables to CSS Variables

Figma variables (colors, numbers, strings) should map to CSS custom properties for maintainability and theming.

### Color Variables

**In Figma:**
```
Variables:
- Primary/500: #3B82F6
- Primary/600: #2563EB
- Gray/50: #F9FAFB
- Gray/900: #111827
```

**In CSS (`src/index.css`):**
```css
:root {
  /* Primary colors */
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;

  /* Gray scale */
  --color-gray-50: #F9FAFB;
  --color-gray-900: #111827;
}

/* Dark mode variants */
.dark {
  --color-gray-50: #18181B;
  --color-gray-900: #FAFAFA;
}
```

**In Tailwind config (`tailwind.config.js`):**
```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
        },
        gray: {
          50: 'var(--color-gray-50)',
          900: 'var(--color-gray-900)',
        }
      }
    }
  }
}
```

**Usage:**
```tsx
<div className="bg-primary-500 text-gray-50">
  Uses Figma color variables
</div>
```

### Spacing Variables

**In Figma:**
```
Variables:
- Spacing/xs: 4px
- Spacing/sm: 8px
- Spacing/md: 16px
- Spacing/lg: 24px
- Spacing/xl: 32px
```

**In CSS:**
```css
:root {
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
}
```

**Usage with arbitrary values:**
```tsx
<div className="gap-[var(--spacing-md)] p-[var(--spacing-lg)]">
  Content
</div>
```

### Border Radius Variables

**In Figma:**
```
Variables:
- Radius/sm: 4px
- Radius/md: 8px
- Radius/lg: 12px
- Radius/full: 9999px
```

**In Tailwind config:**
```js
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'sm': '4px',
        'md': '8px',
        'lg': '12px',
        'full': '9999px',
      }
    }
  }
}
```

## Typography Styles to Design Tokens

Map Figma text styles to CSS classes and design tokens.

### Text Style Mapping

**In Figma:**
```
Text Styles:
- Heading/H1: Inter 48px/56px, -0.02em, Bold
- Heading/H2: Inter 36px/44px, -0.01em, Semibold
- Body/Large: Inter 18px/28px, 0em, Regular
- Body/Default: Inter 16px/24px, 0em, Regular
- Body/Small: Inter 14px/20px, 0em, Regular
- Label/Default: Inter 14px/20px, 0em, Medium
```

**In CSS (`src/index.css`):**
```css
/* Typography scale from Figma */
.text-h1 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 3rem;        /* 48px */
  line-height: 3.5rem;    /* 56px */
  letter-spacing: -0.02em;
  font-weight: 700;
}

.text-h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 2.25rem;     /* 36px */
  line-height: 2.75rem;   /* 44px */
  letter-spacing: -0.01em;
  font-weight: 600;
}

.text-body-lg {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.125rem;    /* 18px */
  line-height: 1.75rem;   /* 28px */
  font-weight: 400;
}

.text-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;        /* 16px */
  line-height: 1.5rem;    /* 24px */
  font-weight: 400;
}

.text-body-sm {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  font-weight: 400;
}

.text-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  font-weight: 500;
}
```

**Or using Tailwind utilities:**
```tsx
// H1 equivalent
<h1 className="text-5xl leading-[3.5rem] tracking-tight font-bold">
  Heading
</h1>

// Body Large equivalent
<p className="text-lg leading-7 font-normal">
  Body text
</p>

// Label equivalent
<span className="text-sm leading-5 font-medium">
  Label
</span>
```

### Font Weight Mapping

| Figma Weight | CSS Value | Tailwind Class |
|--------------|-----------|----------------|
| Thin | 100 | `font-thin` |
| Extra Light | 200 | `font-extralight` |
| Light | 300 | `font-light` |
| Regular | 400 | `font-normal` |
| Medium | 500 | `font-medium` |
| Semibold | 600 | `font-semibold` |
| Bold | 700 | `font-bold` |
| Extra Bold | 800 | `font-extrabold` |
| Black | 900 | `font-black` |

## Effect Styles (Shadows, Blurs)

### Drop Shadows

**In Figma:**
```
Shadow/sm: 0px 1px 2px rgba(0, 0, 0, 0.05)
Shadow/md: 0px 4px 6px rgba(0, 0, 0, 0.1)
Shadow/lg: 0px 10px 15px rgba(0, 0, 0, 0.1)
```

**In Tailwind config:**
```js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'sm': '0px 1px 2px rgba(0, 0, 0, 0.05)',
        'md': '0px 4px 6px rgba(0, 0, 0, 0.1)',
        'lg': '0px 10px 15px rgba(0, 0, 0, 0.1)',
      }
    }
  }
}
```

**Usage:**
```tsx
<div className="shadow-md">Card with medium shadow</div>
```

### Layer Blur (Backdrop Blur)

**In Figma:**
```
Blur/light: 8px background blur
Blur/strong: 24px background blur
```

**Usage:**
```tsx
<div className="backdrop-blur-sm bg-white/80">
  Glass morphism effect (8px blur)
</div>

<div className="backdrop-blur-xl bg-white/80">
  Strong blur (24px)
</div>
```

## Component Translation

### Button Component from Figma

**Figma component structure:**
```
Button
├─ Properties: variant (primary/secondary), size (sm/md/lg), state (default/hover/disabled)
├─ Auto layout: Horizontal, Hug, 12px padding horizontal, 8px vertical, 8px gap
├─ Text: Body/Default, 500 weight
└─ Border radius: 8px
```

**React implementation:**
```tsx
import { cn } from '@/lib/utils'
import { ButtonHTMLAttributes, forwardRef } from 'react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', size = 'md', className, children, ...props }, ref) => {
    const variants = {
      primary: 'bg-primary-500 hover:bg-primary-600 text-white',
      secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-900'
    }

    const sizes = {
      sm: 'px-3 py-1.5 text-sm',      // 12px/6px padding, 14px text
      md: 'px-4 py-2 text-base',      // 16px/8px padding, 16px text
      lg: 'px-6 py-3 text-lg'         // 24px/12px padding, 18px text
    }

    return (
      <button
        ref={ref}
        className={cn(
          'inline-flex items-center justify-center gap-2',
          'rounded-lg font-medium',
          'transition-colors duration-200',
          'disabled:opacity-50 disabled:cursor-not-allowed',
          variants[variant],
          sizes[size],
          className
        )}
        {...props}
      >
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'
export { Button }
```

### Card Component from Figma

**Figma structure:**
```
Card
├─ Auto layout: Vertical, Fill width, Hug height, 24px padding, 16px gap
├─ Background: White, Shadow/md
├─ Border radius: 12px
├─ Border: 1px solid Gray/200
└─ Contents:
    ├─ Image (aspect ratio 16:9)
    ├─ Title (Heading/H3)
    └─ Description (Body/Default)
```

**React implementation:**
```tsx
import { cn } from '@/lib/utils'
import { HTMLAttributes } from 'react'

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  image?: string
  title: string
  description: string
}

const Card = ({ image, title, description, className, ...props }: CardProps) => {
  return (
    <div
      className={cn(
        'flex flex-col gap-4 p-6',
        'bg-white border border-gray-200 rounded-xl',
        'shadow-md',
        className
      )}
      {...props}
    >
      {image && (
        <div className="w-full aspect-video rounded-lg overflow-hidden">
          <img
            src={image}
            alt={title}
            className="w-full h-full object-cover"
          />
        </div>
      )}

      <h3 className="text-xl font-semibold leading-tight">
        {title}
      </h3>

      <p className="text-base leading-6 text-gray-600">
        {description}
      </p>
    </div>
  )
}

export { Card }
```

### Input Component from Figma

**Figma structure:**
```
Input
├─ Auto layout: Vertical, Hug, 0px gap
├─ Label: Body/Small, 500 weight, 8px bottom margin
└─ Input field:
    ├─ Auto layout: Horizontal, Fill width, Fixed 40px height, 12px padding
    ├─ Background: White
    ├─ Border: 1px solid Gray/300, focus: Primary/500
    ├─ Border radius: 8px
    └─ Text: Body/Default
```

**React implementation:**
```tsx
import { cn } from '@/lib/utils'
import { InputHTMLAttributes, forwardRef } from 'react'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, className, ...props }, ref) => {
    return (
      <div className="flex flex-col gap-2">
        {label && (
          <label className="text-sm font-medium text-gray-700">
            {label}
          </label>
        )}

        <input
          ref={ref}
          className={cn(
            'w-full h-10 px-3',
            'text-base leading-6',
            'bg-white border border-gray-300 rounded-lg',
            'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
            'placeholder:text-gray-400',
            'disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed',
            error && 'border-red-500 focus:ring-red-500',
            className
          )}
          {...props}
        />

        {error && (
          <span className="text-sm text-red-500">
            {error}
          </span>
        )}
      </div>
    )
  }
)

Input.displayName = 'Input'
export { Input }
```

## Extracting Exact Measurements from Figma

### Reading the Inspector Panel

When implementing, extract these exact values:

1. **Position & Size**
   - Width (W): Translate to `w-[Npx]` or `w-full`
   - Height (H): Translate to `h-[Npx]` or `h-auto`
   - X/Y coordinates: Usually translate to margin/positioning

2. **Layout (Auto layout)**
   - Direction: `flex-row` or `flex-col`
   - Spacing: `gap-[Npx]`
   - Padding: `p-[Npx]` or `px-[Npx] py-[Npx]`
   - Alignment: `items-center`, `justify-between`, etc.

3. **Fill**
   - Solid color: `bg-[#HEXCODE]`
   - Gradient: Use `bg-gradient-to-r from-[#HEX] to-[#HEX]`
   - Image fill: Use `<img>` with `object-cover` or `object-contain`

4. **Stroke**
   - Border width: `border-[Npx]`
   - Border color: `border-[#HEXCODE]`
   - Individual borders: `border-t-[Npx] border-l-[Npx]`

5. **Effects**
   - Shadow: Extract X, Y, blur, spread, color → `shadow-[0px_4px_6px_rgba(0,0,0,0.1)]`
   - Blur: `blur-[Npx]` or `backdrop-blur-[Npx]`
   - Opacity: `opacity-[0-100]`

6. **Corner radius**
   - All corners: `rounded-[Npx]`
   - Individual corners: `rounded-tl-[Npx] rounded-tr-[Npx]`

7. **Text properties**
   - Font family: Map to font-family in CSS
   - Font size: `text-[Npx]`
   - Line height: `leading-[Npx]`
   - Letter spacing: `tracking-[Nem]`
   - Font weight: `font-[weight]`
   - Text alignment: `text-left`, `text-center`, `text-right`

### Example: Precise Implementation

**Figma specs:**
```
Frame "Header"
├─ Width: Fill container
├─ Height: 64px
├─ Auto layout: Horizontal, space-between, center aligned
├─ Padding: 16px horizontal, 12px vertical
├─ Background: #FFFFFF
├─ Border bottom: 1px solid #E5E7EB
└─ Contains:
    ├─ Logo (24px × 24px)
    └─ Button (Auto width, 40px height)
```

**Implementation:**
```tsx
<header className="w-full h-16 flex flex-row justify-between items-center px-4 py-3 bg-white border-b border-gray-200">
  <img src="/logo.svg" alt="Logo" className="w-6 h-6" />
  <Button size="md">Sign In</Button>
</header>
```

## Constraints and Responsive Behavior

Figma's constraints determine how elements resize:

### Constraint Mapping

| Figma Constraint | CSS Behavior |
|------------------|--------------|
| Left | `ml-[Npx]` (left margin fixed) |
| Right | `mr-[Npx]` (right margin fixed) |
| Left & Right | `w-full` (stretches to fill) |
| Center | `mx-auto` (centered horizontally) |
| Top | `mt-[Npx]` (top margin fixed) |
| Bottom | `mb-[Npx]` (bottom margin fixed) |
| Top & Bottom | `h-full` (stretches to fill) |
| Scale | `w-full` with responsive scaling |

### Responsive Implementation

**Frame with responsive constraints:**
```tsx
// Figma: Desktop 1440px → Mobile 375px
// Left & Right constraints on content

<div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* Content respects max width and scales padding */}
</div>
```

**Fixed width on desktop, full width on mobile:**
```tsx
// Figma: Fixed 360px on desktop, Fill on mobile

<div className="w-full sm:w-[360px]">
  Content
</div>
```

## Common Figma Patterns

### 1. Modal / Dialog

**Figma structure:**
```
Modal
├─ Overlay (Fill screen, 50% opacity black)
└─ Container
    ├─ Width: 480px (centered)
    ├─ Auto layout: Vertical, 24px gap, 32px padding
    ├─ Background: White, Radius: 16px, Shadow: lg
    └─ Contents: Title, Body, Actions
```

**Implementation:**
```tsx
<div className="fixed inset-0 flex items-center justify-center bg-black/50 p-4">
  <div className="w-full max-w-[480px] flex flex-col gap-6 p-8 bg-white rounded-2xl shadow-lg">
    <h2 className="text-2xl font-semibold">Modal Title</h2>
    <p className="text-base text-gray-600">Modal content goes here.</p>
    <div className="flex gap-3 justify-end">
      <Button variant="secondary">Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </div>
  </div>
</div>
```

### 2. Navigation Bar

**Figma structure:**
```
Navbar
├─ Auto layout: Horizontal, space-between, center aligned
├─ Width: Fill, Height: 72px
├─ Padding: 24px horizontal, 16px vertical
└─ Contains: Logo, Nav links, CTA button
```

**Implementation:**
```tsx
<nav className="w-full h-18 flex flex-row justify-between items-center px-6 py-4 bg-white border-b border-gray-200">
  <img src="/logo.svg" alt="Logo" className="h-8" />

  <div className="hidden md:flex flex-row gap-8 items-center">
    <a href="/features" className="text-base text-gray-700 hover:text-gray-900">
      Features
    </a>
    <a href="/pricing" className="text-base text-gray-700 hover:text-gray-900">
      Pricing
    </a>
    <a href="/about" className="text-base text-gray-700 hover:text-gray-900">
      About
    </a>
  </div>

  <Button size="md">Get Started</Button>
</nav>
```

### 3. Card Grid

**Figma structure:**
```
Grid
├─ Auto layout: Horizontal, wrap, 24px gap
└─ Cards (Each 360px × 400px)
```

**Implementation:**
```tsx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  {cards.map(card => (
    <Card
      key={card.id}
      image={card.image}
      title={card.title}
      description={card.description}
    />
  ))}
</div>
```

### 4. Form Layout

**Figma structure:**
```
Form
├─ Auto layout: Vertical, 24px gap, 32px padding
├─ Width: 400px
└─ Inputs (Each Fill width, 8px gap internally)
```

**Implementation:**
```tsx
<form className="w-full max-w-md flex flex-col gap-6 p-8">
  <Input label="Email" type="email" placeholder="you@example.com" />
  <Input label="Password" type="password" placeholder="••••••••" />

  <div className="flex items-center gap-2">
    <input type="checkbox" id="remember" className="w-4 h-4" />
    <label htmlFor="remember" className="text-sm text-gray-600">
      Remember me
    </label>
  </div>

  <Button type="submit" size="lg" className="w-full">
    Sign In
  </Button>
</form>
```

## Pixel-Perfect Checklist

When implementing Figma designs, verify:

- [ ] **Exact dimensions**: All widths, heights match Figma specs
- [ ] **Spacing**: Padding and gaps use exact pixel values
- [ ] **Typography**: Font size, weight, line height, letter spacing match
- [ ] **Colors**: Use exact hex values or mapped variables
- [ ] **Border radius**: Corners match precisely
- [ ] **Shadows**: X, Y, blur, spread, color are exact
- [ ] **Alignment**: Items aligned as specified (center, start, end)
- [ ] **Autolayout direction**: Horizontal/vertical matches
- [ ] **Sizing modes**: Hug, Fill, Fixed implemented correctly
- [ ] **Constraints**: Responsive behavior matches Figma's constraints
- [ ] **States**: Hover, active, disabled states implemented
- [ ] **Responsive breakpoints**: Mobile, tablet, desktop variants match designs
- [ ] **Component variants**: All Figma component properties mapped to props
- [ ] **Interactions**: Animations, transitions match prototype
- [ ] **Accessibility**: Touch targets, focus states, semantic HTML

## Development Workflow

1. **Inspect Figma file**
   - Enable Dev Mode in Figma
   - Select each element and note measurements
   - Check autolayout settings
   - Document all variables and styles

2. **Extract design tokens**
   - Create CSS variables for colors, spacing, typography
   - Update `tailwind.config.js` if needed
   - Define custom classes in `src/index.css`

3. **Build component structure**
   - Start with containers and layout
   - Match autolayout with Flexbox/Grid
   - Implement exact spacing and sizing

4. **Apply styling**
   - Use exact colors, shadows, borders
   - Match typography precisely
   - Implement all visual details

5. **Add interactivity**
   - Implement hover, active, focus states
   - Add animations if specified
   - Ensure all variants work

6. **Test responsiveness**
   - Verify at all breakpoints
   - Check that constraints are respected
   - Ensure mobile usability

7. **Validate against Figma**
   - Overlay implementation on Figma design
   - Verify pixel-perfect alignment
   - Adjust as needed

## Tools for Pixel-Perfect Implementation

### Browser DevTools Overlay
```tsx
// Add Figma design as semi-transparent overlay for comparison
<div
  style={{
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundImage: 'url(/figma-export.png)',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    opacity: 0.3,
    pointerEvents: 'none',
    zIndex: 9999,
  }}
/>
```

### Measurement Helper
```tsx
// Add to component during development to verify spacing
const DEBUG = false

<div className={cn(
  'flex flex-col gap-4',
  DEBUG && 'outline outline-1 outline-red-500'
)}>
  {/* Content */}
</div>
```

## Your Role

When implementing Figma designs:

1. **Request Figma access** - Ask for view/dev mode access to the file
2. **Extract all measurements** - Note every dimension, spacing, color
3. **Map variables first** - Set up design tokens before building components
4. **Build systematically** - Container → Layout → Content → Styling
5. **Match exactly** - Don't approximate, use precise values
6. **Respect autolayout** - Translate to Flexbox/Grid faithfully
7. **Implement all states** - Default, hover, active, disabled, focused
8. **Test thoroughly** - Verify at all breakpoints and states
9. **Document deviations** - If exact match isn't possible, explain why

Always prioritize **exact visual fidelity** to the Figma design while ensuring the code is clean, maintainable, and follows React best practices.