Figma Dev Mode made components easier to inspect

Figma Dev Mode made component drift harder to ignore.

That is the part I like. A design system can look healthy from a distance while the code and the file quietly move apart. The button in Figma has six variants. The production button has nine. The design file uses one spacing token. The app uses another. Dev Mode made that mismatch visible inside the artifact instead of around it.

a component is a contract

A component is not a pretty reusable layer. It is a contract between design, code, behavior, and accessibility.

For a button, that means size, spacing, label behavior, disabled state, loading state, focus style, icon placement, density, and what happens when the text runs long. For a card, it means content hierarchy, truncation, interactive regions, empty media, keyboard behavior, and responsive layout.

If the Figma component only captures the visual happy path, the contract is incomplete. If the code component only captures implementation convenience, the contract is also incomplete.

variants only matter when they map to behavior

It is easy to create a grid of variants that looks complete and still misses the actual product behavior.

If code exposes this shape:

type ButtonProps = {
  variant: "primary" | "secondary" | "danger"
  size: "sm" | "md"
  loading?: boolean
  disabled?: boolean
  iconBefore?: ReactNode
}

Then the design file should not quietly invent a state the component cannot render. If the production button supports loading and the design component does not, engineers will fill in the gap on their own and the system gets inconsistent.

Dev Mode helps because inspection catches that mismatch before it becomes routine.

tokens make intent readable

Raw values are tolerable during exploration. They are much less useful in a component library.

#2563eb forces a guess. A token says what the value means:

button.primary.background = color.action.primary
button.primary.text = color.text.inverse
button.height.md = size.control.md
button.radius = radius.control
button.gap = space.2

When Dev Mode shows variables and code syntax, the design artifact can speak in the same nouns as the codebase. That is better than pasting snippets blindly.

ownership has to cross the file boundary

Design-system ownership cannot stop at the Figma library.

The library component, production component, docs page, tests, and examples all describe the same thing. If they drift, users feel it as inconsistency and engineers feel it as translation work.

I like a boring ownership record:

component: Alert
design owner: product design systems
code owner: web platform
docs: /docs/components/alert
production package: @site/ui/alert
figma library: Web Components / Alert
last reviewed: 2024-02-07
known gaps: no inline action variant in native app

That record does not need to live in Figma, but Figma should point to it.

inspection is not alignment

It is possible to inspect a component perfectly and still build the wrong thing.

The file might encode an outdated pattern. The codebase might have a newer primitive. The design might show a desktop layout while the product mostly fails on mobile. Inspection helps with translation. It does not replace product judgment.

So the handoff has to include behavior:

• keyboard focus
• disabled and loading states
• validation and error copy
• responsive layout
• dark mode or theme modes
• localization and long labels
• accessibility names and roles
• data-dependent empty states

Figma can represent some of this. Code has to prove the rest.

drift should be treated like a bug

Design-system drift rarely breaks everything at once, which is why it survives.

One component gets a custom margin. One variant is missing. One color value is hardcoded. One prop name differs from the design label. Each exception feels reasonable. Together they make the system harder to trust.

I would watch for boring signals:

• detached instances in ready-for-dev frames
• raw color or spacing values in component usage
• variants present in Figma but absent in code
• props present in code but absent in Figma
• screenshots that diverge from component examples
• accessibility states documented in code but absent from design guidance

That is not about blame. It is about keeping the shared contract current.

Dev Mode made components easier to inspect. The accountability comes from deciding that the inspection should matter.