Toolbox

Figma<->React Alignment Handbook

Component contracts and naming rules that reduce churn.

What it is

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

When to use

When handoff friction and naming drift are slowing delivery.

How to use

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

Figma library exists with at least 10 published components
React component library exists in a shared repo
Designer and developer both available to align on naming

When NOT to use this

Single person doing both design and code (alignment is automatic)
No Figma library yet (build components first, name later)
Outsourced development with no ongoing relationship (handoff doc is enough)

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

Alignment Handbook (PDF)Alignment Handbook (accessible HTML)

SAP Build Apps DSDesign systems in the AI era

The share link includes source tracking so LinkedIn traffic stays measurable in analytics.

Share on LinkedIn

Toolbox

Figma<->React Alignment Handbook

Component contracts and naming rules that reduce churn.

What it is

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

When to use

When handoff friction and naming drift are slowing delivery.

How to use

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

Figma library exists with at least 10 published components
React component library exists in a shared repo
Designer and developer both available to align on naming

When NOT to use this

Single person doing both design and code (alignment is automatic)
No Figma library yet (build components first, name later)
Outsourced development with no ongoing relationship (handoff doc is enough)

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

Alignment Handbook (PDF)Alignment Handbook (accessible HTML)

SAP Build Apps DSDesign systems in the AI era

The share link includes source tracking so LinkedIn traffic stays measurable in analytics.

Share on LinkedIn

Figma<->React Alignment Handbook

What it is

When to use

How to use

Before you start

Downloads

Related

Figma<->React Alignment Handbook

What it is

When to use

How to use

Before you start

Downloads

Related

What it is

When to use

How to use

Before you start

Downloads

Related

Share this resource

What it is

When to use

How to use

Before you start

Downloads

Related

Share this resource