From Figma to Production

A token is just a key and a value. That's it. Brand red is #E21833. Base spacing is 8px. Body font is Source Sans. The simplicity is the point: there's nothing to misunderstand, nothing to configure wrong.

The package exports in every format anyone could need:

• JavaScript objects for importing into components
• CSS custom properties for stylesheets
• JSON for tooling and Figma plugins
• TypeScript types so your editor catches typos

When the brand team updates Maryland Red from #E21833 to something else (it happens), they change one file. That change cascades through every component, every site, every Storybook story. Nobody hunts through codebases replacing hex codes.

Here's a question: how many card variants does a university need? Block cards, list cards, overlay cards, video cards, person cards, event cards... We counted dozens. Building each one from scratch would mean duplicating accessibility logic, responsive behavior, and animation patterns. Maintaining them would be a nightmare.

Instead, we built atomic pieces that compose:

• Layout primitives: stack, inline, overlay (the bones of any card)
• Typography presets: headlines, body, captions (scaled responsively)
• Asset handlers: images with aspect ratios, lazy loading, backgrounds
• A fluent Element Builder that chains these together

Every card variant is just a different composition of the same primitives. Add a new variant? Compose existing pieces. Fix a bug in the layout primitive? Every card that uses it gets the fix. The atomic approach turned a maintenance headache into a multiplication of capability.

The loop starts in Figma. A brand decision — a color, a type scale, a spacing step — gets authored as a token, a named value rather than a line of CSS. From there it exports as JavaScript objects, CSS custom properties, JSON, and TypeScript types.

Code consumes one side of the loop; design consumes the other. Components import the JavaScript objects, stylesheets read the custom properties, and Figma plugins pull the same JSON back into the design libraries — so the files designers work from and the components engineers ship trace to one source. When a design decision changes, it flows back through the tokens instead of through a redline. Fully automated Figma-to-code sync is the direction, not the shipped state; the token package lays the groundwork with stable names, zero runtime dependencies, and formats a plugin can read.

We built tokens for websites. Then they started showing up in places we didn't plan:

• Campus kiosks needed the brand colors, and tokens were already there
• Digital signage for events used the same typography scale
• Email templates got the palette via a JSON import

Each platform consumes tokens in its native format. React imports JavaScript objects. PHP reads CSS variables. The email builder pulls from JSON. Same decisions, different implementations — exactly as Brad Frost described.

Treating design decisions as data makes them portable. Version them. Diff them. Roll them back. The tokens package became the source of truth for the university's visual identity.