​🎯 For UX & Product Designers | 🧠 Advanced | 🛠️ Hands-on workshop | 🕒 90 minutes | 👥 40 seats | 💵 $150 Standard / $100 Uxcel Pro

​Learn a practical, end-to-end workflow for turning an existing Figma component system into real, coded UI components with AI doing the heavy lifting.

​Design handoff was never the finish line, it’s just where collaboration stopped. For years, designers shipped beautifully structured Figma components only to see them fall apart in implementation. AI changes that, pulling designers closer to real production than ever.

​Starting from a structured Figma file, you'll use Figma MCP to bring design context directly into Cursor, generate and refine React components, and preview them inside Storybook, all in one connected pipeline.

​You'll leave with coded React components built during the session, a working Storybook instance to preview and test them, and a reusable toolkit for running AI-assisted design system workflows on your own projects.

​Led by Florian Boelter, Staff Product Designer at Juro and founder of Open Doors. Florian has spent most of his career in early-stage startups and scaleups, where he built deep expertise establishing and maintaining design systems in lean, fast-moving environments. AI has fundamentally transformed how he works, as an avid vibe coder, he brings production-tested, hands-on insights rather than theory.

​🧠 What You'll Learn

• ​How Figma MCP connects your design system directly to AI coding workflows, eliminating the context gap between design and implementation.

• ​How to structure and prepare Figma components so they're primed for accurate, AI-assisted code generation.

• ​How to generate real React UI components from Figma design context using Cursor or another coding agent, and learn how to refine the output across variants, props, and reusable patterns.

• ​How Storybook fits into modern design system workflows as a tool for previewing, testing, and documenting components in a live environment.

• ​How to build reusable workflow patterns using rules files, markdown context, and structured prompts that you can adapt and scale to real client or company environments.

​🕘 Agenda

1. ​Why this workflow matters (10 min): Where traditional design handoff starts to break down, why AI is reshaping the design-to-implementation relationship, and what Figma MCP makes possible in practical workflows.

2. ​Setting up the environment (15 min): Initializing a lightweight Storybook setup, connecting Cursor to the Figma MCP server, and preparing the provided Figma component file so it's ready for implementation.

3. ​Translating Figma components into code (35 min): Inspecting variables, styles, and component structure in Figma; pulling design context into Cursor via MCP; generating React components and Storybook stories with AI assistance; and refining output across variants, props, and reusable patterns.

4. ​Creating consistency and reusable workflows (15 min): Using rules files and markdown context to guide AI outputs, establishing consistent implementation patterns, and structuring prompts for scalable workflows that translate to real company or client environments.

5. ​Wrap-up & next steps (15 min): Common limitations of AI workflows and where they still struggle, recommended tools and setup improvements, how to keep experimenting after the session, and live Q&A.

​⚙️ Format

​Hands-on

​You can actively work on building coded UI components and a Storybook instance as you follow along during the session or simply observe and apply it later.

​👤 Who Should Attend

​Experience level: Advanced

​This session is for UX and product designers who already have a solid understanding of design systems and have prior experience with vibe coding or coding agents.

​🎓 Meet Your Instructor

​Florian Boelter is a Staff Product Designer at Juro and the founder of Open Doors. He has spent most of his career working in early-stage startups and scaleups, building deep expertise in establishing and maintaining design systems under real-world constraints. AI has supercharged his design and implementation workflows, and as an avid vibe coder, he brings hands-on, production-tested insights to everything he shares. Florian is an active member of the Uxcel community and channels his practical experience directly into this session.

​🛠️ Tools

• ​Any AI coding agent with active credits (Cursor, Claude Code, or similar)

• ​Figma with a paid plan required (free plan limitations make the MCP workflow difficult to follow hands-on)

• ​FigJam for light collaboration and sharing during the session

​​🤝 Brought To You By

​Uxcel is a learning platform used by 500,000+ product professionals and 200+ organizations to build cross-functional skills across UX design, product management, and AI. Learn through short, gamified courses that fit into a working day, earn certifications, and build a portfolio with real-world project briefs. Ranked Top 50 Educational Product worldwide by G2 in 2024 and 2025.

​Interested in hosting an event with us? Apply here.

Join our Discord community of 7,000+ UX and product professionals and start connecting today.

​Catch up on past events and stay connected.

​📌 Notes

• ​Includes access to the full recording.

• ​Tickets are non-refundable once the session has started.

• ​Use Uxcel registered email address when purchasing Uxcel Pro tickets.

• ​A paid Figma plan is required for this workshop as the free plan has limitations that make it difficult to follow the MCP workflow hands-on.

• ​You will need an active AI coding agent (Cursor, Claude Code, or similar) with available credits to participate hands-on.

• ​Participants will receive a toolkit/framework after the session to support their own AI-assisted design system workflows.