What happens to handoff when the canvas is codeWhat happens to handoff when the canvas is code

Every color on this site is defined once, in src/styles/tokens/colors.ts, and nothing else in the app reads that file directly. A build script expands each color family into a twelve-step scale, solves the text steps for contrast, and writes the CSS custom properties and the TypeScript constants from it. A test then fails if either generated file is stale, if the color front matter in docs/design.md disagrees with the tokens, or if any declared foreground and background pairing misses its WCAG 2 minimum in light or dark. The spec, the code and the design doc all read from one place, and a failing test is how any of them finds out it has stopped doing so.

A source of truth that can't drift

Handoff exists because intent has to cross from one place to another, and every crossing loses some of it. A spec says a button is 40px tall and says nothing about whether the number is a token that must be exact or a visual call that can flex. When the value lives in one file and everything downstream is generated from it, the crossing disappears for that kind of thing, and the test makes sure it stays gone.

The same repo shows what happens without a test. A comment in the Playwright suite records that the manual dark theme block drifted out of sync with the media-query one unnoticed, because the existing test only exercised the OS setting. A second test now picks a theme manually and checks that it beats the OS setting in both directions.

What was reported at Config 2026

According to Analytics India Magazine's coverage of Config 2026, Figma introduced code layers that let teams work directly with code on the canvas: clone repositories, generate design directions with AI, convert flows into editable design layers and sync changes back to code. The same article cites Figma's AI and Design Report as finding that 65% of developers now see design as increasingly important, up from 44% in 2025.

What code on the canvas changes

A canvas that holds code puts designers and engineers on the same object, and that retires most of what handoff used to carry. Redlines lose their purpose when the layer is the implementation. The drift between a Figma component and its code twin, which I covered in what the Figma and code libraries should share, has a better chance of closing when both are literally the same thing. Figma's post on design systems, AI and MCP adds that annotations on a design (accessibility, interaction behavior, content) carry through into generated code, which tells you where the effort goes: the why gets written down in the place the tooling reads.

What stays where it was

A two-way sync lets two people change one thing for two different reasons, so two decisions have to exist before the first sync, and this repo made each of them for itself.

The first is which side wins. Here the tokens file wins and the generated files are regenerated and never edited by hand. If a canvas can write to code, someone has to say which direction is authoritative for each kind of thing, with different answers likely for tokens, layout and copy.

The second is which check fires when a change arrives from either side. A color changed in a design tool and a color changed in a terminal both meet the same pairing test, and the failure names the theme, the foreground, the background and the ratio it measured against the minimum it needed. A change from any source lands on that message, which a human reviewer would have to reconstruct by eye.

Intent still has to travel with the work. An engineer who opens a layer wired to real code still needs to know why the loading state behaves the way it does, and that explanation lives in a spec, a comment or a person. My earlier piece on why the design-to-engineering handoff breaks argued that the failures start well before anyone communicates badly, and a canvas made of code removes the redlines while leaving that cause in place.

Try it on one token family

Pick one family, such as spacing or color, and give it a single source file. Generate every other representation from that file, write the test that fails when any of them disagrees with it, and then change the value from the design-tool side to see which check fires. The result tells you which of the two decisions above you have already made and which one you have been leaving to whoever happens to be in the room. The token architecture decisions worth settling first are the ones that make a single source possible.