Bridging Design and Code: AI-Powered Design System Integration
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."
Or choose a question:
More Videos
"Design shares are more about presenting finished work and practice defending it, not about peer-to-peer feedback."
Joseph MeersmanSweating the Pixel: Scaling Quality through Critique
June 10, 2021
"Having one centralized repository aligned with our culture and values made the most sense for us."
Michelle Bejian Lotia Anne-Marie MorellRolling Out a Repository: How Zapier Centralizes Insights from Across their Organization
March 28, 2023
"If we can’t provide research as a service at scale, we need to make sure the teams are equipped to do it on their own."
Erin May Roberta Dombrowski Laura Oxenfeld Brooke HintonDistributed, Democratized, Decentralized: Finding a Research Model to Support Your Org
March 10, 2022
"Ethnio allowed us to track participants' total compensation and set annual caps, reducing fraud risk and improving compliance."
Sarah Sgarlato Pierini Kevin NewtonFrom Passion to Execution: A Story of Evolving Research Maturity at LinkedIn
September 9, 2022
"Democratization models sound great but often people have to squeeze research on top of already full-time jobs."
Sarah Alvarado Nalini P. Kotamraju Anne Mamaghani Peter MerholzHow to make UX research leadership more effective [Advancing Research Community Workshop Series]
October 26, 2023
"Research is a group project and learning is a group project—you don’t have to be an expert but find those who are."
Liza Pemstein Jane DavisScaling Research Via an Ops First Model at Clever
March 27, 2023
"Write grammatically simple sentences with fewer commas and use the active voice to improve clarity."
Bruce GillespieLearning from journalism: Balancing impactful communication with compassionate storytelling
March 13, 2025
"The first organization to solve accessibility for new modalities like AR/VR will gain a massive, lasting advantage."
Sam ProulxTo Boldly Go: The New Frontiers of Accessibility
November 18, 2022
"Super strength is the resilience and endurance to partner and drive strategic impact backed by customer obsession."
Kate Koch Prateek KalliFlex Your Super Powers: When a Design Ops Team Scales to Power CX
September 30, 2021
