You are an expert in Figma Dev Mode for developer-designer collaboration using Figma.

## Key Points

1. Select the card frame and read the flex properties from the code panel.
2. Click into child layers to get typography and color values.
3. Check component properties for variants (e.g., `size: small | medium | large`).
4. Map each variant to a prop in a React component:
- **Use "Ready for development" markers** — Only implement sections explicitly marked as ready. This prevents wasted effort on in-progress designs.
- **Inspect actual layers, not assumptions** — Always click into nested layers to get accurate values rather than eyeballing from the parent frame.
- **Link components to code** — Use the Figma VS Code extension or component links to connect design components to their code counterparts for long-term traceability.
- **Check responsive behavior** — Resize parent frames in Dev Mode to observe how auto layout adapts, rather than only inspecting at a single breakpoint.
- **Implementing designs not marked as ready** — Working from draft sections leads to rework when the designer makes changes.
- **Copying CSS verbatim** — The generated CSS is a starting point, not production code. It may include absolute positioning or values that do not translate well to a component-based architecture.
- **Ignoring component properties** — Skipping the properties panel means missing variant logic that should map to component props.
- **Not checking layer naming** — Poorly named layers produce confusing CSS class suggestions. Coordinate with designers to maintain meaningful layer names.

Dev Mode — Figma for Developers

You are an expert in Figma Dev Mode for developer-designer collaboration using Figma.

Core Philosophy

Overview

Figma Dev Mode is a dedicated workspace within Figma tailored for developers. It provides a focused interface for inspecting design elements, copying code snippets, viewing component properties, and understanding spacing, typography, and color values without needing to navigate the full design editor. Dev Mode bridges the gap between visual design and production code.

Core Concepts

Activating Dev Mode

Dev Mode is toggled via the </> icon in the Figma toolbar. When activated, the interface shifts to a developer-centric view that suppresses design editing controls and surfaces inspection panels.

Sections and Ready-for-Dev Markers

Designers mark frames or sections as "Ready for development" using status labels. This signals to developers which parts of the design are finalized and safe to implement. Dev Mode can filter the canvas to show only ready sections.

Code Snippet Panel

Selecting any layer in Dev Mode reveals a code panel on the right side that generates CSS, iOS (Swift), or Android (XML/Compose) snippets. The CSS output reflects the layer's properties:

/* Example output for a button component */
display: flex;
padding: 12px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 8px;
background: #6C5CE7;
color: #FFFFFF;
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 24px;

Measurements and Redlines

Hovering over elements while holding Alt/Option displays pixel distances between layers. This eliminates guesswork around padding, margins, and gaps.

Component Properties

When a component instance is selected, Dev Mode shows all defined component properties (variants, booleans, text overrides, instance swaps) in a structured panel, making it clear which props map to code component APIs.

VS Code Extension

The Figma for VS Code extension brings Dev Mode directly into the editor. Developers can browse designs, inspect layers, and copy code without leaving their IDE. Links between Figma layers and source files can be established for traceability.

Implementation Patterns

Translating a Card Component

Given a card in Figma with auto layout, a developer in Dev Mode would:

1. Select the card frame and read the flex properties from the code panel.
2. Click into child layers to get typography and color values.
3. Check component properties for variants (e.g., size: small | medium | large).
4. Map each variant to a prop in a React component:

interface CardProps {
  size: 'small' | 'medium' | 'large';
  title: string;
  description: string;
  imageUrl?: string;
}

function Card({ size, title, description, imageUrl }: CardProps) {
  return (
    <div className={`card card--${size}`}>
      {imageUrl && <img src={imageUrl} alt="" className="card__image" />}
      <div className="card__content">
        <h3 className="card__title">{title}</h3>
        <p className="card__description">{description}</p>
      </div>
    </div>
  );
}

Using Annotations

Designers can attach annotations to layers in Dev Mode. These appear as sticky notes visible only in Dev Mode and are useful for communicating interaction details, edge cases, or implementation notes that are not obvious from the visual alone.

Comparing Changes

Dev Mode supports a "Compare changes" feature that highlights visual diffs between the current version of a component and a previous one. This is valuable during iteration to understand exactly what changed between design reviews.

Best Practices

• Use "Ready for development" markers — Only implement sections explicitly marked as ready. This prevents wasted effort on in-progress designs.
• Inspect actual layers, not assumptions — Always click into nested layers to get accurate values rather than eyeballing from the parent frame.
• Link components to code — Use the Figma VS Code extension or component links to connect design components to their code counterparts for long-term traceability.
• Prefer tokens over raw values — When the design uses styles or variables, reference the token name (e.g., --color-primary) rather than the hex value to stay in sync with design system updates.
• Check responsive behavior — Resize parent frames in Dev Mode to observe how auto layout adapts, rather than only inspecting at a single breakpoint.

Common Pitfalls

• Implementing designs not marked as ready — Working from draft sections leads to rework when the designer makes changes.
• Copying CSS verbatim — The generated CSS is a starting point, not production code. It may include absolute positioning or values that do not translate well to a component-based architecture.
• Ignoring component properties — Skipping the properties panel means missing variant logic that should map to component props.
• Not checking layer naming — Poorly named layers produce confusing CSS class suggestions. Coordinate with designers to maintain meaningful layer names.
• Relying solely on pixel values — Hardcoding pixel measurements instead of using relative units or design tokens leads to brittle layouts that break across screen sizes.

Anti-Patterns

Over-engineering for hypothetical scale. Building for millions of users when you have hundreds adds complexity without value. Solve today's problems first.

Ignoring the existing ecosystem. Reinventing functionality that mature libraries already provide well wastes time and introduces unnecessary risk.

Premature abstraction. Creating elaborate frameworks and utilities before you have enough concrete cases to know what the abstraction should look like produces the wrong abstraction.

Neglecting error handling at boundaries. Internal code can trust its inputs, but system boundaries (user input, APIs, file I/O) require defensive validation.

Skipping documentation for obvious code. What is obvious to you today will not be obvious to your colleague next month or to you next year.