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
Nathan Shedroff
Redefining Value: Bridging the Innovation Culture Divide
2015 • Enterprise UX 2015
Gold
Ted Booth
Discussion
2016 • Enterprise UX 2016
Gold
Sara Asche Anderson
Not Your Ordinary Re-Brand: Design's Path to Driving Customer Obsession at Best Buy
2024 • Enterprise Experience 2020
Gold
Irina Tikhonova
Small Wins, Big Impact: Leveraging and Elevating User Engagement
2021 • Civic Design 2021
Gold
Sheryl Cababa
Thinking in systems to address climate with Sheryl Cababa
2024 • Climate UX Interest Group
Malini Rao
Lessons Learned from a 4-year Product Re-platforming Journey
2021 • Design at Scale 2021
Gold
Milan Guenther
The $212 billion ‘so what?’: unlocking impact in development cooperation
2025 • Advancing Service Design 2025
Gold
Patrick Boehler
Fishing for Real Needs: Reimagining Journalism Needs with AI
2025 • Designing with AI 2025
Gold
Jemma Ahmed
Theme Three Intro
2023 • Advancing Research 2023
Gold
Benjamin Real
Showing the Value of DesignOps by Not Having a DesignOps Team
2020 • DesignOps Summit 2020
Gold
Amahra Spence
Designing for Liberation, Rehearsing Freedom
2022 • Civic Design 2022
Gold
Dr. Nikki Smith
Research Strategy: Connecting Insights to Outcomes
2025 • Advancing Research 2025
Gold
Marissa Cui
Climate Design Product Showcase
2024 • Climate UX Interest Group
Bassel Deeb
Do More With Less: Equip and Lead Design Orgs Through Adversity
2023 • DesignOps Summit 2023
Gold
Noah Bond
Redefining truth and inclusivity: Navigating data ownership and ethical research in the age of disinformation
2025 • Advancing Research 2025
Gold
Reginé Gilbert
Asking the Right Questions: Life, Hope and Moving Forward During the Pandemic
2022 • Design at Scale 2022
Gold

More Videos

Jon White

"No more than five key insights — any more and teams start going off in different directions."

Jon White Erin May

Unsticking Research for Better Information Flow

March 11, 2026

Luz Bratcher

"What if your value is measured by your being and not by your output?"

Luz Bratcher

This Is a Talk for Tired People

June 10, 2022

Ignacio Martinez

"Continuous feedback is anonymous and focused on teammates’ goals to help keep focus on what matters most."

Ignacio Martinez

Fair and Effective Designer Evaluation

September 25, 2024

Bria Alexander

"Design ops should coordinate initiatives, measure impact, and advocate for designer happiness as a business metric - Peter Bosma."

Bria Alexander Patrizia Bertini Peter Boersma Jon Fukuda Dave Malouf Theresa Slate Changying (Z) Zheng

Charting the future of DesignOps: A community workshop

April 18, 2024

Michael Weir

"People don’t remember what you said to them, but they remember how you made them feel."

Michael Weir

Mixed Methods and Behavioural Science

May 26, 2023

Sam Proulx

"Avoid strictly timed interactions because they stress everyone, especially people using screen readers or with cognitive disabilities."

Sam Proulx

Online Shopping: Designing an Accessible Experience

October 3, 2023

Alla Weinberg

"Stress drops our operating IQ by half, so we can’t do our jobs well under chronic stress."

Alla Weinberg

People Are Sick of Change: Psychological Safety is the Cure

July 20, 2023

Amy Paris

"The State Department removed burdensome medical requirements, allowing people to self-attest their gender on passports."

Amy Paris Danielle Thierry

Delivering Equity: Government Services for All Ages, Languages, Sexual Orientations, and Gender Identities

December 9, 2021

Francesca Barrientos, PhD

"Researchers feel like second-class citizens when they’re not invited into early conversations."

Francesca Barrientos, PhD

You Need Your Own Definition of Design Maturity

June 8, 2022