Toolbox

Figma<->React Alignment Handbook

Component contracts and naming rules that reduce churn.

What it is

Purpose and scope.

A handbook for keeping design and engineering in lockstep across toolchains.

When to use

Signals this is the right tool.

When handoff friction and naming drift are slowing delivery.

How to use

Minimum steps to get value quickly.

Create shared vocabulary doc: list every component name, map Figma name to React name exactly
Define prop naming convention: variant names (primary/secondary/ghost), size names (sm/md/lg), boolean naming
Document each component's states: default, hover, focus, active, disabled, loading — what triggers each
Build Figma frames that match Storybook stories 1:1 (same names, same variants)
Set up weekly 30-min design-dev sync to catch naming drift early
Add component contract template to your RFC process (API, states, a11y, links)

Before you start

Prerequisites and when to skip this.

Prerequisites

When NOT to use this

Consider instead

Greenfield project, small team: Name things as you build, formalize when patterns emerge
Existing drift is minor: Fix naming in one sprint rather than process overhead

Downloads

Grab the files and ship.

Keep the loop tight.