Design system is the new API

Designers plan to invest more in design systems and tokens than in canvas tools. This article is about why that's the right call.

AI-generated code at 64.0%. Agents at 46.3%. Design systems and tokens at 40.2%. And only then, in fourth, canvas tools, at 21.3%. Hand-written code: 9.5%, a ratio of almost 7 to 1 against generated code.

Figma is used by 82.6% every week and it will stay that way. But only a fifth of designers plan to invest more in canvas tools. That isn't decline; it's saturation. The canvas is solved. Nobody needs one more tool for drawing rectangles.

The new money goes to what isn't solved yet: getting AI to generate code that looks, works and behaves like the product. And that depends on something many teams treat as second-class documentation.

Five of the ten weekly tools are AI. Claude Code (38.4%) sits ahead of Figma Make (34.8%) and FigJam (34.0%). Figma's own AI prototyping tool loses to a terminal. And Slack and Notion land below three AI assistants.

Among workflow blockers, 52.2% cite the quality of AI output. When I ask an AI for a screen with no context, it hands back a generic screen: mid-gray, 8-pixel corners, the same old blue button. Not because the AI is bad, but because nobody told it what this product is.

A design system with tokens in code tells it. Colors, spacing, typography, radii, shadows, states: named, versioned, machine-consumable. The AI reads the token and generates the right screen. The design system stops being documentation for humans and becomes the API the AI consumes.

• Tokens in code, not just in Figma: JSON, CSS custom properties, a Tailwind theme. If the AI can't import it, it doesn't exist.
• Semantic names, not literal ones: color-surface-raised, not gray-100. The AI gets the intent right when the name carries the intent.
• Components with live examples, in Storybook or similar. One working example is worth more than ten pages of guidelines.
• Usage rules written for machines: when to use each variant, what never to combine. That becomes agent instructions.
• One entry point: a file or MCP server the agent consults before generating. Without it, every prompt reinvents the product.

Is your design system ready to be consumed by an AI? If you asked for a new screen right now, would it come out looking like the product?

What to do on Monday: run the test. Ask an AI for the same screen twice: once with no context, once with your tokens and an example component. Compare. Then audit: which tokens exist only in Figma? Which names are literal? What's the entry point an agent would use? Start with what shows up on every screen: color, spacing and typography.

53% of designers say there are too many tools. Over the last six months, 3.8% consolidated their stack. Over the next twelve, 64% plan to add more AI. The last article is about that contradiction, and about what the survey can't tell us about Brazil.