Building a Design System That AI Agents Can Actually Use

14 Apr 2026 · 1 min

Watch on YouTube

0:47

In this segment, the speaker explains the effort to align a Figma design system with the coded implementation so that every component, property name, and design token has a direct counterpart in the development environment. By building a consistent, templated structure, the goal is to enable agentic tools—AI systems that read Figma files and generate screens—to accurately identify components, understand which properties are active, and map them to the correct code components for composition. The speaker notes that while this strict parity is essential for reliable AI generation, it can be challenging because Figma sometimes lacks the flexibility available in the codebase, requiring careful compromises and workarounds.

Chapters

We've been doing a lot with some of the design system work we're doing now to really ensure that everything that's in Figma is one-to-one with what's in the coded environment for obviously property names, things like that, and trying to build a good templated structure all the way through so that when we do have agentic tools running through maybe a Figma file and creating out a screen, it knows exactly what the component is, what the properties are turned on. And it can correlate those all with the developed component that it needs to compose in that correct form. And so there's a lot of making sure everything is exactly as close as possible to the exact same things in both environments, which sometimes can be a little tricky cuz sometimes you can't do things in Figma that you have the freedom to do in development side.