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
Ross Smith
Breaking Barriers with Empathy
2017 • Enterprise Experience 2017
Gold
Samuel Proulx
From Standards to Innovation: Why Inclusive Design Wins
2025 • Advancing Service Design 2025
Gold
Billy Carlson
Pro-level UI Tips for Beginners
2022 • DesignOps Summit 2022
Gold
Jen Briselli
Learning Is The Engine: Designing & Adapting in a World We Can’t Predict
2025 • Rosenfeld Community
Daniel J. Rosenberg
Designing with and for Artificial Intelligence
2022 • Enterprise Community
Sara Asche Anderson
Not Your Ordinary Re-Brand: Design's Path to Driving Customer Obsession at Best Buy
2024 • Enterprise Experience 2020
Gold
Theresa Slate
Why Changing Hearts & Minds Doesn’t Work When Promoting DE&I Efforts, but Checklists Do
2023 • DesignOps Summit 2023
Gold
Kara Kane
Communities of Practice for Civic Design
2022 • Civic Design Community
Jeff Gothelf
The Intersection of Lean and Design
2019 • Enterprise Community
Uday Gajendar
Day 1 Welcome
2024 • Designing with AI 2024
Gold
Tom Armitage
Day 2 Panel: Looking ahead: Designing with AI in 2026
2025 • Designing with AI 2025
Gold
Catherine Dubut
Bridging Physical and Digital Spaces: Approaches to Retail Service Design
2021 • Enterprise Community
Rebecca Gimenez
Work in Progress: Service Design at Airbnb
2024 • Advancing Service Design 2024
Gold
George Abraham
Design Systems To-Go: Indigo.Design Overview and Exploring the Developer Workflow (Part 3)
2021 • DesignOps Summit 2021
Gold
Alëna Iouguina
Designing Systems at Scale
2018 • DesignOps Summit 2018
Gold
Liam Thurston
Why Your Design Team Is Quitting, And How To Fix It
2022 • Design at Scale 2022
Gold

More Videos

John Cutler

"What would it look like if we could ask, how do I make this the absolute best environment for complex problem solving, instead of how do I take away all the annoying hard problems?"

John Cutler

The Alignment Trap

November 29, 2023

Samuel Proulx

"If accessibility is buried three levels deep in a checklist, it’s going to get missed."

Samuel Proulx

From Standards to Innovation: Why Inclusive Design Wins

November 19, 2025

Alastair Simpson

"Teams constantly bicker over turf blaming the various disciplines for their inability to meet deadlines."

Alastair Simpson

Debunking the Myths of Cross-Disciplinary Collaboration

October 24, 2019

Kit Unger

"Our aspirations and anxieties are our users and messages, our passions and pet peeves."

Kit Unger Lada Gorlenko

Theme 3 Intro

June 10, 2022

JD Buckley

"People tend to be less critical of something they have ownership of."

JD Buckley Margot Dear Jim Kalbach Janaki Kumar

COMMUNICATE: Discussion

June 14, 2018

Husani Oakley

"We discovered shared ideals and differences of opinion — debating and working hard together is part of the process."

Husani Oakley

Theme Two Intro

June 6, 2023

Llewyn Paine

"Today’s speakers come from real world companies facing real consequences for their choices about AI."

Llewyn Paine

Day 1 Using AI in UX with Impact

June 10, 2025

Scott Plewes

"The story of the Indian king and grains of rice perfectly illustrates exponential growth."

Scott Plewes

Why Isn't Your UX Approach Going Viral?: A Mathematical Model

March 28, 2023

Mark Interrante

"Many organizations silo data inputs and prioritize within categories before combining results."

Mark Interrante Harry Max

AI for Prioritization (3rd of 3 seminars)

July 11, 2024