In-System Design: Bridging Figma and Code with AI
Synchronize your design system across code and canvas using AI-driven prototyping workflows.
1The In-System Design Concept
In-System Design allows designers to move prototypes between code and Figma without losing fidelity. By using identical component names and properties in both environments, the system acts as a single source of truth. This approach eliminates the need to choose between canvas flexibility and the technical accuracy of production code.
2Why Canvas Still Matters
Despite the rise of AI-generated code, the canvas remains essential for quick exploration and visual hierarchy. Stanford research indicates that designers who iterate on multiple versions simultaneously produce higher-quality work. The canvas provides a low-cost environment to compare layouts, argue about flows, and visualize the entire product structure at once.
3The Power of Matching Names
A prototype only travels successfully if every element points to a real component. Figma components must carry the code’s exact naming convention and property variants, such as primary or ghost buttons. When names match, moving a screen between environments becomes a simple lookup rather than a complex, error-prone translation process.
4AI as the Hub
An AI agent acts as a central hub, connected to both the codebase and Figma. Whether you start building in code or on the canvas, the AI ensures the design remains synchronized. By using tools like Figma Console MCP, the agent can place library components accurately without requiring manual visual decisions.
5Round Trip Workflow
To perform a full round trip, you need a published Figma library, an empty prototype file, and an AI agent like Claude Code. You can instruct the agent to rebuild a Storybook prototype in Figma. It places real library components and leaves notes regarding any gaps or missing elements for review.
6Verifying Real Components
Figma’s wireframe view, accessed via Cmd+Y, is a critical tool for verification. Library components appear in purple, while hand-drawn elements do not. This allows designers to instantly distinguish between system-compliant components and temporary sketches, ensuring that the final prototype remains grounded in the actual design system library at all times.
7Detecting Hidden System Bugs
The round-trip process often reveals bugs that automated checks miss. For instance, a 21-pixel discrepancy between Figma and Storybook exposed a CSS margin issue in the code. By forcing the design through different surfaces, you gain a second pair of eyes on your system, catching spacing errors and bad habits.
8Prototyping Without Full Setup
Even without a full code playground, you can use AI to prototype in Figma while pointing at your code. By connecting your library to an AI agent, you can generate layouts that developers can easily interpret. This creates a bridge to future code integration while maintaining high standards for design system consistency.
9Preventing Accidental Drift
The prototype file acts as a sandbox, ensuring the main design library remains untouched. The biggest source of errors is often outdated library versions rather than AI mistakes. By publishing updates and accepting them before prompting the AI, teams can effectively block design drift and maintain a reliable, up-to-date system.
10Automating with Skills
Repetitive instructions can be packaged into an AI skill, which the agent loads automatically. This ensures consistent execution of complex tasks like moving prototypes between Storybook and Figma. You can customize these skills to summarize gaps or specific component requirements, significantly speeding up the design-to-code iteration cycle for your team.
11Optimizing with Manifests
A Figma manifest is a small JSON file that lists every library component and its internal keys. This prevents the AI from crawling through thousands of lines of code, enabling faster lookups. It also serves as a validation check, ensuring that the Figma library and the codebase remain perfectly aligned.
12Future of Design Systems
In-System Design transforms how teams approach product development by treating code and canvas as equal surfaces. This workflow reduces manual labor, catches technical debt early, and keeps the design system at the center of the process. It represents a shift toward more integrated, efficient, and high-quality digital product creation cycles.
Original article: UX Collective - Medium — In-System Design: Bridging Figma and Code with AI