Figma Dev Mode and Design-to-Code Handoff

Dev Mode (View > Dev Mode, or toggle in top-right) shows developers exactly what they need

• CSS for layers: Copy CSS directly (padding, margin, color, font-size).
• Asset exports: Download icons, images at correct scale.
• Measurements: Spacing between elements, dimensions, alignment.
• Component mapping: Link Figma components to code components (via Code Connect or manual docs).

For designers: Before handoff, enable Dev Mode and verify measurements are correct. Use auto-layout for consistent spacing.

For developers: Inspect any layer. Copy CSS. Export assets. No guessing.

Design tokens are design decisions stored as data: colors, spacing, typography, shadows, radii. Export them as JSON, then consume in CSS, SCSS, or JavaScript.

### What Gets Tokenized

• Colors: `--color-primary: #3B6DFF;`
• Spacing: `--space-xs: 4px; --space-sm: 8px; --space-md: 16px;`
• Typography: `--font-size-body: 16px; --font-family-sans: 'Inter', sans-serif;`
• Shadows: `--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);`
• Radii: `--radius-sm: 4px; --radius-md: 8px; --radius-full: 9999px;`

### Why Tokens Matter

Without tokens, developers hardcode values

```css

/* Bad: values are hardcoded */

.button {

background: #3B6DFF;

padding: 12px 20px;

border-radius: 8px;

} ```

With tokens

```css

/* Good: values reference tokens */

.button {

background: var(--color-primary);

padding: var(--space-sm) var(--space-md);

border-radius: var(--radius-md);

} ```

Change the token once, update everywhere. This keeps design and code in sync.

### Method 1: Tokens Studio Plugin (Recommended)

1. Install Tokens Studio (Figma plugin).
2. Define tokens in Figma: Create color styles, text styles, effect styles.
3. Export as JSON: Tokens Studio reads Figma styles and exports as `tokens.json`.
4. Transform with Style Dictionary: Convert JSON to CSS, SCSS, JavaScript.

```bash # Install Style Dictionary npm install -g style-dictionary

# Create config cat > config.json << JSON {

"source": ["tokens.json"],

"platforms": {

"css": {

"transformGroup": "css",

"buildPath": "dist/",

"files": [{

"destination": "tokens.css",

"format": "css/variables"

}] } } } JSON

# Build tokens style-dictionary build ```

Output: `dist/tokens.css` with CSS variables.

### Method 2: Figma Variables API

Figma's Variables API exports variables directly

```javascript // Requires Figma API token const response = await fetch('https://api.figma.com/v1/files/:fileKey/variables/local', {

headers: { 'X-Figma-Token': 'YOUR_TOKEN' }

});

const variables = await response.json(); console.log(variables); ```

Transform the response into CSS

```javascript const css = variables.variableCollections.map(v => `--${v.name}: ${v.value};` ).join('\n'); ```

### Method 3: Manual Export (Small Projects)

For small projects, manually copy Figma styles

1. Open Figma file.
2. Go to Design Panel > Local Styles.
3. Copy color hex, spacing values, font specs.
4. Paste into `tokens.css`:

```css :root {

--color-primary: #3B6DFF;

--color-background: #0A0D12;

--space-xs: 4px;

--space-sm: 8px;

--font-size-body: 16px;

} ```

Developers need to know which Figma component maps to which code component.

### Figma Code Connect (Official)

Code Connect links Figma components to GitHub code

1. Set up Code Connect in Figma (requires GitHub integration).
2. Annotate components: Map `Button/Primary` to `<Button variant="primary">`.
3. Developers see code examples directly in Dev Mode.

### Manual Documentation

If Code Connect isn't set up, document mappings in a README or Notion

| Figma Component | Code Component | Props | |----------------|----------------|-------| | Button/Primary | `<Button variant="primary">` | `variant`, `size`, `disabled` | | Icon/Home | `<Icon name="home">` | `name`, `size` | | Card/Default | `<Card>` | `title`, `description`, `image` |

When Dev Mode isn't enough, extract CSS directly from Figma

### Using Figma Inspect

1. Select a layer in Figma.
2. Enable Dev Mode.
3. Copy CSS from the right panel.
4. Paste into your stylesheet.

### Automating with Figma API

For batch export

```javascript // Fetch styles from Figma const response = await fetch('https://api.figma.com/v1/files/:fileKey/styles', {

headers: { 'X-Figma-Token': 'YOUR_TOKEN' }

});

const styles = await response.json(); // Process styles into CSS variables ```

When consuming Figma handoffs

1. Use Dev Mode: Don't eyeball spacing. Copy exact values.
2. Reference tokens: Use CSS variables, not hardcoded values.
3. Ask questions early: If a spec is unclear, ask the designer before building.
4. Test at multiple sizes: Figma shows desktop; test mobile, tablet, and edge cases.
5. Sync regularly: Designs change. Re-export tokens and assets when designs update.

Before handing off

1. Use auto-layout: Ensures spacing is consistent and measurable.
2. Name layers clearly: Developers see layer names in Dev Mode. Use descriptive names.
3. Annotate edge cases: Add notes for hover states, loading states, error states.
4. Export assets at correct scale: @1x for web, @2x and @3x for mobile.
5. Publish design tokens: Keep tokens.json or tokens.css up-to-date.

Figma Dev Mode, design tokens, and clear documentation turn design handoffs from guesswork into precision.