The Figma-to-code gap is a solved problem. Here’s the stack

Main point: The Figma-to-code gap isn't visual any more, it's about meaning. Code Connect, the Figma MCP server and CSS-based tokens together give a traceable link from design to code.

The real problem

Dev mode solved measurements. What's missing is the answer to "which Card in the codebase is this, and how do I use it?" Without that, someone bridges the gap by hand and things get lost. Designers see work ship that's close, but subtly off.

Code Connect

It maps a Figma component to its real code: the import, the props, a usage example. An engineer inspecting Unplanned's Button sees:

import { Button } from "@/components/ui/button"<Button variant="default" size="default">Label</Button>

Each component needs a small one-off mapping file. (Related: Code Connect)

The Figma MCP server

This brings design context into your AI assistant. It can fetch structure, tokens, Code Connect mappings and a screenshot of the frame, so it builds from the real design rather than your description. That's the core of the Unplanned Studio workflow.

Tokens

In Unplanned, tokens are CSS custom properties used through Tailwind (bg-primary, --background), with a structured set in src/os/design-system/tokens/ (base.css, theme.css) and dark mode as .dark overrides. Name Figma variables to match the CSS ones, and keep the CSS as the source of truth. Designbook lets you browse them.

Closing the loop (not yet)

There's no UI that writes token changes back yet. If I add one, it should edit the CSS files directly. The pipeline still runs one way, Figma to code, and drift won't show up on its own. A practical workaround is asking the assistant to update the matching Figma variable when you change a value.

The investment

A Code Connect file per component, a clear token setup, and MCP connected. It's not free, but it pays back fast, and you're not inventing anything. The tools exist. The question is whether you assemble them.

Series context: The Design Organisation as a Codebase, and A first-principles approach to design in the age of AI.