Rosenverse

Bridging Design and Code: AI-Powered Design System Integration

Gold
Thursday, September 11, 2025 • DesignOps Summit 2025
Share the love for this talk
Bridging Design and Code: AI-Powered Design System Integration
Speakers: Ryan Matthew and Alex Kurchev
Link:

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."

Ask the Rosenbot
Marc Rettig
The Urge to Migrate
2026 • Rosenfeld Community
Samuel Proulx
From Standards to Innovation: Why Inclusive Design Wins
2025 • Advancing Service Design 2025
Gold
Ashley Sewall
Exit Interview #5: Designing My Life After Tech
2026 • Rosenfeld Community
Jorge Arango
AI as Thought Partner: How to Use LLMs to Transform Your Notes (3rd of 3 seminars)
2024 • Rosenfeld Community
Ebru Namaldi
Designing the Designer’s Journey: Scaling Teams, Culture, and Growth Through DesignOps
2025 • DesignOps Summit 2025
Gold
Victor M. Gonzalez
Practicing Learners and Learning Practitioners
2021 • Advancing Research 2021
Gold
Beth Chappell
Leading through ambiguity: Supporting a design team relearning their craft
2026 • Designing with AI 2026
Conference
Sam Proulx
Online Shopping: Designing an Accessible Experience
2023 • Advancing Research 2023
Gold
Taylor Jennings
Repository Retrospective: Learnings from Introducing a Central Place for UX Research
2022 • Advancing Research 2022
Gold
Lija Hogan
Practical Principles of Inclusive Research
2023 • Advancing Research 2023
Gold
Bud Caddell
DesignOps Community Sensing Session
2021 • DesignOps Community
Indi Young
Thinking styles: Mend hidden cracks in your market
2025 • Rosenfeld Community
John Mortimer
Panel Discussion
2024 • Advancing Service Design 2024
Gold
Cennydd Bowles
Day 1 Panel
2024 • Designing with AI 2024
Gold
Neil Barrie
Widening the Aperture: The Case for Taking a Broader Lens to the Dialogue between Products and Culture
2024 • Advancing Research 2024
Gold
Isaac Heyveld
Expand DesignOps Leadership as a Chief of Staff
2022 • DesignOps Summit 2022
Gold

More Videos

Bria Alexander

"This is our third and final day of the design operation Summit 2021."

Bria Alexander

Opening Remarks

October 1, 2021

Indra Klavins

"Multiple teams were supporting the same goals in different ways, and that led to meaningful cross-team conversations."

Indra Klavins

A Design Ops Girl in a Dev Ops World

October 23, 2019

Joi Freeman

"Diverse teams help you ask better questions about who might be missing from the table or the project."

Joi Freeman

A New Vantage Point: Building a Pipeline for Multifaceted Research(ers)

March 30, 2020

Amy Parness

"There’s a big problem with energy measurement — data isn’t standardized yet, but trends can still be spotted."

Amy Parness

Scaling Sustainability: Complementary strategies that drive long-term success

May 29, 2025

Anna Avrekh

"If you don’t invest in retention, you get the leaky bucket syndrome where diverse talent keeps leaving."

Anna Avrekh Amy Jiménez Márquez Morgan C. Ramsey Catarina Tsang

Diversity In and For Design: Building Conscious Diversity in Design and Research

June 9, 2021

Billy Carlson

"Throw away the rule book in early ideation phases to get as many ideas out as fast as possible."

Billy Carlson

Ideation tips for Product Managers

December 6, 2022

Dave Malouf

"Our mantra is tools, not rules. Make it easier for people to do their jobs and they’ll use the design system."

Dave Malouf Amy Thibodeau

Panel: Design Systems and Documentation

November 7, 2017

Frances Yllana

"We need more storytelling and positive use cases to help people see how AI affects their specific roles."

Frances Yllana Jorge Arango Maria Taylor Briana Thomas

The Big Question about Impact: A Panel Discussion

September 24, 2024

Steve Portigal

"Mixed methodologies illustrate the richness of our profession, showing the value of different types of research."

Steve Portigal Susan Simon-Daniels Tamara Hale Randolph Duke II

War Stories LIVE! Q&A-Discussion

March 30, 2020