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
"Integration is coming: research teams will drop labels and collaborate across disciplines to deliver richer insights."
Nicole Aleong Michaela Mora Prayag Narula Brianna SylverWhat UX research can learn from other research practices [Advancing Research Community Workshop Series]
September 14, 2023
"Nobody loves it when someone from another department shows up to tell people how to do their jobs better."
Laura KleinUnique challenges of innovation in enterprises
April 23, 2020
"Sometimes laziness can be a virtue if it leads to big impact with little work."
Erin WeigelReal-world lessons to improve your conversion rates
June 26, 2024
"We humanize metrics by adding the people element, measuring success not just by numbers but by happiness."
Changying (Z) ZhengNavigating Innovation with Integrity
September 25, 2024
"We could either become an internal service desk that's always at capacity or find a lever that multiplies our impact."
Dagmara KukawkaTiny team, moonshot impact: Democratizing research across continents
March 10, 2026
"Wizard of Oz testing involves someone pretending to be a screen reader by reading content and roles out loud."
Elana Chapman Li Wen Huang Divyen Sanganee Annabel WeinerGetting started with accessibility research
February 20, 2025
"More frequent, open communication and direct conversations helped us avoid assumptions and deliver something usable quickly."
Iain McMaster IHan ChengDesign and Product: from Frenemy to Harmony
November 29, 2023
"Why don’t we do what we do for users but apply it to our own careers? Absolutely nutty, right? So we did."
Ian SwinsonDesigning and Driving UX Careers
June 8, 2016
"In the small enterprise user base scenario, you can get down and dirty to know exactly how people use the software and how habit changes will affect them."
Paula BachImproving Legacy Software: How Much Better Does it Have to Be?
March 11, 2022
