From Figma to Frontend: Automating Frontend Development with AI

Session Topic:

What if your design system could help write the code for your components? In this session, Pierre Marcel will share how he’s been automating the process of turning Figma designs into React components or virtually any frontend framework or stack, using a blend of AI, Storybook, and structured workflows.

The presentation dives into a hands-on, repeatable approach to bridging the gap between design and development, one that uses the Figma API, prompt engineering, and frontend architecture to generate high-quality, consistent code with minimal manual effort.

You’ll learn:

• How Pierre uses the Figma API to extract tokens, styles, and structure
• How he integrates design data into Storybook using MCP (Model-Code-Prompt) orchestration
• How AI is prompted to output clean, production-ready frontend code
• How he planned workflows to align designers, dev tools, and AI
• Real demos and insights into what’s working, and what still needs solving

If you’re curious about practical ways to use AI to accelerate development without replacing human judgment, this session offers a grounded and technical deep dive into what’s possible today.

Drinks & Discussion:

Stay after the presentation for drinks and more Drupal talk at Hotel Ocho

Special Thanks to our Sponsor:

A big shoutout to Kalamuna for providing the CSI space for our meetup.
Looking forward to seeing old friends and new faces alike. Let's make this a great meetup for Toronto's Drupal community, going strong since 2006!