Summary
What if your design system could move from Figma to production-ready code—without heavy technical lift? In this session, we’ll share how AI can interpret design system content in Figma, transform it into coded components, and export it to Storybook for developers to use. Explore an evolving approach to streamlining workflows, closing the design–dev gap, and unlocking new ways for teams to collaborate at scale.
Key Insights
-
•
Structured, token-first Figma design systems are critical for successful AI-driven code generation.
-
•
Using Figma REST API with MCP server enables two-way sync between design files and code repositories.
-
•
Generative AI can create fully documented, accessible React components integrated with Storybook directly from Figma.
-
•
Designers with minimal coding experience can leverage AI tools to produce production-ready UI components.
-
•
AI reduces manual developer work and accelerates design system delivery from weeks to minutes.
-
•
Maintaining a single source of truth in design and code prevents UI inconsistencies across multiple developer teams.
-
•
MCP server acts as a universal adapter allowing AI models to interpret Figma design intent and properties.
-
•
Accessibility features are best annotated in Figma and automatically incorporated by AI in generated components.
-
•
The approach is platform and code agnostic; AI can generate components for various frameworks beyond React.
-
•
Governance and version control via GitHub ensure transparency and maintainability of AI-generated design system code.
Notable Quotes
"Figma files are no longer just a collection of visual elements; designers actively shape product features now."
"If the designer or developer can see the intent of the visual element, AI can see it also."
"Maintaining large-scale design systems is a real challenge that AI tools are starting to solve."
"It took me just a little bit amount of time to get into that and actually make a proper component from Figma."
"We are creating the repository of a design system that is highly customizable and ready for developers to start product development."
"AI-generated components maintain end-to-end system quality while developers focus on functionality."
"The style component was developed in two minutes rather than taking a few days to create and document."
"Annotate in Figma dev mode lets you provide accessibility details that AI models will implement automatically."
"This is not just a shift of different tools; it’s the way we build products now."
"Using AI to tighten the gap between design and engineering is essential to know how to use in our work right now."
Dig deeper—ask the Rosenbot:
More Videos
"I found the problem solver in the UI developer and identified the project’s sponsor who really felt the pain."
Carl TurnerYou Can Do This: Understand and Solve Organizational Problems to Jumpstart a Dead Project
March 28, 2023
"Superfluidity means zero viscosity—flowing without loss of kinetic energy, no friction."
Jacqui FreyFlow and Superfluidity for Design Orgs
November 7, 2018
"Designers are the most insecure function in many companies because their role—to represent people's needs—is both critical and ambiguous."
Tricia WangThe most popular design thinking strategy is BS
January 27, 2022
"It’s way more cost effective to catch accessibility issues during the design phase than after shipping a product."
Amber KnablEmpowering innovation: The critical role of inclusive product development in the AI era
June 4, 2024
"Many stakeholders don’t inherently understand the difference in quality outcomes from workshops, so we must be explicit."
Anne MamaghaniHow Your Organization's Generative Workshops Are Probably Going Wrong and How to Get Them Right
March 28, 2023
"Education is the foundation upon which we build a more sustainable future."
Ash BrownSilver Linings: What DesignOps Learned in the Shift to WFH
October 23, 2020
"Working with Mark Templeton was like Dancing with the CEO to translate fuzzy executive ideas into tangible designs."
Uday GajendarThe Wicked Craft of Enterprise UX
May 13, 2015
"Future-facing regulatory structures can avoid post-traumatic innovation by anticipating technology’s social impacts."
Bria Alexander Ariel Kennan Charlotte Lee Sarah Brooks Emily Lessard Gordon Ross Joanne DongReflect and Chart Forward
December 10, 2021
"Use sticky notes with different colors and shapes to make the session more accessible and fun."
Emilia Åström Jim KalbachUnlock Your Team’s Intelligence with Collaboration Design
June 9, 2022
Latest Books All books
Dig deeper with the Rosenbot
What is design ops and how does it differ from other ops functions like product ops or DevOps?
What challenges and opportunities arise when implementing new workflow processes in large legacy companies like Microsoft?
What role do AI hackathons play in overcoming fear and encouraging AI experimentation?