← Back

Why design system designers should understand development

design systems development

Design systems live at the intersection of design and code. A component in Figma and a component in React are different objects with different architectures. A designer who understands both sides creates systems that actually work, not just in mockups.

The gap that costs you

A designer creates a component in Figma: variants, props, styles. A developer receives it and translates it into code. Between these two versions is a gap. And the wider it is, the more expensive every iteration becomes.

A designer who doesn't understand code risks building components that can't be implemented without workarounds, require dozens of variants instead of composition, and don't scale when new use cases appear. The developer adapts, the designer doesn't recognize the result, and trust in the system erodes.

Components: props and composition

In code, a component is a function that accepts parameters and returns an interface. A button with an icon isn't a separate variant. It's a button that accepts an icon as a parameter:

<Button icon={<IconPlus />}>
  Add
</Button>

One button, infinite combinations. In Figma, for a long time each combination required a separate variant or instance swap. The library grew, maintenance got harder.

Understanding this principle changes how you design: instead of “what variants to create,” you think “what parameters does the component accept.”

Slots: design catches up with code

In 2025, Figma released slots, a fundamental change. Slots let you insert any content inside a component without detaching. A modal accepts any content. A card accepts any set of elements. A list accepts any number of items.

This is exactly how components work in code. A React <Modal> component accepts children, any content inside. Slots in Figma are children in design.

Nathan Curtis describes migrating to slots as an architectural decision, not just replacing one element with another. For each component you need to decide: where to keep props and where to use a slot. What content to show by default. How to constrain what can be inserted. These are decisions that require understanding both design and code.

Tokens: more than just colors

CSS variables like --color-primary and --space-200 aren't synonyms for HEX codes. They're an abstraction layer that lets you switch themes with a single toggle, support dark mode without touching components, and ensure consistency automatically.

:root {
  --color-text: #171717;
  --color-bg: #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ededed;
    --color-bg: #0a0a0a;
  }
}

Components reference variables, not specific values. The theme changes, components pick it up automatically.

A designer who understands how this works creates tokens that map to code without translation. Not “Primary Blue 500,” but --color-interactive, with a clear purpose and the right level of abstraction.

Code Connect: the bridge gets shorter

Figma Code Connect links a Figma component directly to its code implementation. A developer opens Dev Mode and sees not abstract Figma props, but the real component code.

Slots are supported in Code Connect, and engineers immediately see how a slotted component maps to production. Handoff becomes predictable.

A designer who understands code can verify that their component maps correctly to the implementation, describe the component in terms developers understand, and participate in review, not as a syntax reviewer, but as an interface expert.

AI as a bridge

A separate topic is AI tools. Cursor and Claude let designers prototype in code without deep framework knowledge. You describe a component, and AI writes the code. But to evaluate the result, steer AI, and fix details, you need to understand the basics.

This isn't about “learning to write production code.” It's about enough understanding to test ideas before handing off to development and speak the same language as engineers.

Practical benefits

Where to start

You don't need to learn React or write production code. Four steps are enough:

Design systems are moving toward a full merger of design and code. Slots, Code Connect, AI agents: everything is closing the gap. A designer who understands both sides isn't just more useful. They build systems that outlast any tool change.