product · uxdesign.cc

In-system design: from code to Figma and back. Prototyping in your real design system

In-system design: from code to Figma and back. Prototyping in your real design system
Image via uxdesign.cc
What happened

The author announced that they have stopped choosing between Figma canvas and production code by adopting an "In-System Design" workflow where a prototype created in code automatically becomes real library components in Figma and can be edited on the canvas without any redrawing. This approach was demonstrated in the AI&Design System Jam Session hosted by TJ Pitre, Ian and Brad Frost, with the key condition that component names and properties match on both sides, allowing a seamless round‑trip between code and design.

Why it matters

By eliminating the need to recreate components across tools, teams can cut design‑to‑development handoff time and reduce inconsistencies, leading to faster product iterations. The workflow also encourages more comparative design work, which research shows yields higher‑performing outcomes, thereby strengthening competitive advantage in fast‑moving markets.

Your next move — for a otherAudit your current design system for naming consistency between code components and Figma assets, and establish a governance process to keep them aligned. Implement a lightweight script or plugin that flags mismatches, thereby reducing manual rework for the whole organization.
Read full article ↗