In-System Design

Building an AI-ready design system library: Code → Figma with MCP.

A practical guide for designers: why my design system starts in code, and how I build, check and maintain the Figma library.

In-System Design: a three-part series.

Part 1: Building an AI-ready design system: Code → Figma (you are here)

Part 2: AI prototyping inside your design system (3 November 2026)

Part 3: From code to Figma and back (10 November 2026)

For designers who know Figma well and have never written production code, and for the design system teams around them. Every technical word is explained in the box at the end.

For most of my career, the work went one way. I designed in Figma, a developer turned it into code, and when something did not survive the trip, we sorted it out between us.

Then I handed that same route to an AI, and what came back was unsettling, mainly because it looked fine.…