Designers and Figma

Design with what actually ships. This is in progress: nothing on this page is available yet.

Code-first shouldn't make designers second-class. The goal is a Figma library that matches production because it is compiled from production, not redrawn by hand next to it.

How it will work

react to figma

┌───────────────────┐
│ React             │   production source of truth
└─────────┬─────────┘
          ▼
┌───────────────────┐
│ Storybook         │   the supported states
└─────────┬─────────┘
          ▼
┌───────────────────┐
│ Shelf Capture     │   reads the rendered output
└─────────┬─────────┘
          ▼
┌───────────────────┐
│ Shelf Design IR   │   frames, text, vectors, instances
└─────────┬─────────┘
          ▼
┌───────────────────┐
│ Figma plugin      │   builds native components
└─────────┬─────────┘
          ▼
┌───────────────────┐
│ Native Figma      │   Auto Layout, variants, variables
└───────────────────┘

React, then Storybook, then Shelf Capture, then Shelf Design IR, then the Figma plugin, then native Figma components.

The React component is the source of truth. Storybook defines its supported states. Shelf captures the rendered output, turns it into a small internal description, and a Figma plugin builds native components from it. The conversion is deterministic: no screenshots, and no AI redrawing a design.

The quality bar

Looking right isn't enough. A designer should be able to use the component and forget it was generated.

Auto Layout: With correct resizing, not fixed frames.
Variants: The states that exist in code, and only those.
Properties: Labels, icons, and toggles a designer actually edits.
Variables: Semantic colors and sizes, not raw values.
Instances: A nested Icon stays an Icon instance, not loose vectors.
Layers: A clean hierarchy with meaningful names.

Exploration stays in Figma

Production components follow code. Everything else is normal Figma work: designers compose with the production components, detach and copy them, explore new concepts, and redesign existing ones. When a direction is approved, it is built in React, and the production Figma component follows.

Because products own their source, a new interaction doesn't have to wait for the shared system to support it. Design beyond the system without leaving it behind.