======Register here : https://uxpa.zoom.us/webinar/register/WN_ZNnjJKVHRp6ILLC70OPyyg#/registration

This hands-on session introduces designers to an emerging workflow that's transforming design-to-development handoffs: Converting Figma designs directly into functional HTML using AI and the Model Context Protocol (MCP).

We'll start with a brief introduction to MCP, then walk through setting up the file system and Figma integrations with Claude Desktop. You'll see live demonstrations of configuring Figma's Dev Mode and watch as Claude Desktop translates real design components into clean, responsive HTML code in real-time.

This practical session bridges the gap between design intent and implementation, showing how AI can accelerate prototyping and developer collaboration. Bring your laptop to follow along – no coding experience required, just curiosity and a willingness to explore the future of design workflows.

## Takeaways
• Learn to set up and configure MCP with Claude Desktop to connect Figma designs directly to AI-powered code generation
• Master the Figma Dev Mode workflow for extracting design specifications and preparing assets for seamless AI translation
• Experience real-time design-to-code conversion using AI tools that understand design context and generate production-ready HTML
• Gain hands-on experience with an emerging workflow that accelerates prototyping, stakeholder demos, and design system documentation

## Tools used

• Claude Desktop
• Figma Desktop (with pro plan)

## Presenter
Danny Setiawan
Founder & Instructor @ CoCreate – AI-Powered UX Course | Formerly The Economist and Yahoo! Finance

## Register
Zoom Link: https://uxpa.zoom.us/webinar/register/WN_ZNnjJKVHRp6ILLC70OPyyg