How Developers Set Up Figma Code Connect with Claude!
2590 次观看 · 2026-09-14
UI 设计
Learn how to set up Figma Code Connect CLI with Claude directly from a production codebase.
Principal software engineer Sam Rockwell demonstrates the developer-side, code-first workflow—from installing and configuring Code Connect to mapping a Material UI component, verifying it in Figma, and improving it in Storybook.
This is the engineering companion to my design-side Figma Code Connect tutorial.
Watch the design-side workflow here:
https://youtu.be/ps13emf_6lM
In that tutorial, I show how designers can connect components from inside Figma and test how Code Connect affects the accuracy of AI-generated implementations.
In this video, Sam approaches the same design-to-code bridge from the other direction: the production repository.
You’ll see how to:
• Explore the Code Connect tools available through Figma MCP
• Give Claude access to a selected Figma component
• Reference an existing production component and MUI documentation
• Install the Figma Code Connect dependency
• Create the Code Connect configuration and mapping files
• Connect a Material UI button to its Material 3 design in Figma
• Push and merge the Code Connect changes
• Verify the connection inside Figma
• Use Storybook and screenshots to evaluate the implementation
• Iterate on the coded component to better match the design
• Verify Claude’s work when the result is not completely accurate
Together, these two tutorials show both sides of the workflow:
Design side: connect and validate production components from Figma.
Engineering side: configure and maintain Code Connect from the codebase.
This tutorial is intended for developers, design engineers, design-system teams, and designers who want to better understand how their code and Figma libraries connect.
🎥 Set up Code Connect from inside Figma:
https://youtu.be/ps13emf_6lM
Follow Sam Rockwell:
https://samrockwell.substack.com/
Official Figma Code Connect documentation:
https://developers.figma.com/docs/code-connect/
#Figma #CodeConnect #Claude #FigmaMCP #designengineering
⏱️Chapters:
0:00 Why Figma Code Connect matters
0:33 Meet Sam and the project goal
1:27 Storybook versus the Material 3 design
2:02 Preparing Claude with the Figma link and llms.txt
2:47 Running Code Connect with Claude
3:23 Installing and configuring Code Connect
4:12 Verifying Storybook and merging the changes
4:52 Confirming Code Connect inside Figma
5:06 Using Code Connect to match the Material 3 styles
5:41 Material UI 2 versus Material 3
5:59 Why you must double-check AI-generated work
6:20 Final Storybook and Figma comparison
6:47 Conclusion and Sam’s Substack
-------------------------------------------------------------------------------
👩🏻💻 I'm Nehmat — Design Leader, Professor, and your guide for navigating the AI era.
I help designers master tools like Claude Design, Figma MCP, and AI design workflows with clarity and real-world application.
🎯 New videos as soon as you need to know: Figma Updates, Industry changes, AI tools & career evolution
💕 Subscribe to get the latest releases & changes in our industry
👉 Join my community to get First Access, more direct guidance & live consultation on your work
🔔 Turn on ALL notifications so you don't miss the latest releases and tutorials
🔥 Hype this video to help it reach the people searching for it
➡️ LinkedIn: https://linkedin.com/in/nehmatgereige
❎ X: https://x.com/33Nehmat
Ⓜ️ Medium: https://medium.com/@nehmat.gereige
🌈 Figma Creations: https://www.figma.com/@nehmatgereige
🌸 FREE Professional Courses 🌸
🎨 **Figma Design Agent Complete Course**
https://youtube.com/playlist?list=PLXdRMPwB8CHm6XJwPZMZwUfDTUipxGMPK&si=pbp2rXVshkssQ6Et
🤖 **Claude AI + Figma MCP for Designer: The New AI-Design Workflow**
https://www.youtube.com/playlist?list=PLXdRMPwB8CHnCai2ohL6e9HA4mcq-ZEn0
☸️ **Codex for Designers** https://www.youtube.com/playlist?list=PLXdRMPwB8CHk4F76vsOWHehnz8pcKYP6T
🔥 **Figma MAKE — 0 to Expert **
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmbSLEKimjJMuvlAQgi09I
🌈 **Complete Figma for Beginners 2025**
https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN
🧘🏻♀️ **Career in UX/UI Design**
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y
Principal software engineer Sam Rockwell demonstrates the developer-side, code-first workflow—from installing and configuring Code Connect to mapping a Material UI component, verifying it in Figma, and improving it in Storybook.
This is the engineering companion to my design-side Figma Code Connect tutorial.
Watch the design-side workflow here:
https://youtu.be/ps13emf_6lM
In that tutorial, I show how designers can connect components from inside Figma and test how Code Connect affects the accuracy of AI-generated implementations.
In this video, Sam approaches the same design-to-code bridge from the other direction: the production repository.
You’ll see how to:
• Explore the Code Connect tools available through Figma MCP
• Give Claude access to a selected Figma component
• Reference an existing production component and MUI documentation
• Install the Figma Code Connect dependency
• Create the Code Connect configuration and mapping files
• Connect a Material UI button to its Material 3 design in Figma
• Push and merge the Code Connect changes
• Verify the connection inside Figma
• Use Storybook and screenshots to evaluate the implementation
• Iterate on the coded component to better match the design
• Verify Claude’s work when the result is not completely accurate
Together, these two tutorials show both sides of the workflow:
Design side: connect and validate production components from Figma.
Engineering side: configure and maintain Code Connect from the codebase.
This tutorial is intended for developers, design engineers, design-system teams, and designers who want to better understand how their code and Figma libraries connect.
🎥 Set up Code Connect from inside Figma:
https://youtu.be/ps13emf_6lM
Follow Sam Rockwell:
https://samrockwell.substack.com/
Official Figma Code Connect documentation:
https://developers.figma.com/docs/code-connect/
#Figma #CodeConnect #Claude #FigmaMCP #designengineering
⏱️Chapters:
0:00 Why Figma Code Connect matters
0:33 Meet Sam and the project goal
1:27 Storybook versus the Material 3 design
2:02 Preparing Claude with the Figma link and llms.txt
2:47 Running Code Connect with Claude
3:23 Installing and configuring Code Connect
4:12 Verifying Storybook and merging the changes
4:52 Confirming Code Connect inside Figma
5:06 Using Code Connect to match the Material 3 styles
5:41 Material UI 2 versus Material 3
5:59 Why you must double-check AI-generated work
6:20 Final Storybook and Figma comparison
6:47 Conclusion and Sam’s Substack
-------------------------------------------------------------------------------
👩🏻💻 I'm Nehmat — Design Leader, Professor, and your guide for navigating the AI era.
I help designers master tools like Claude Design, Figma MCP, and AI design workflows with clarity and real-world application.
🎯 New videos as soon as you need to know: Figma Updates, Industry changes, AI tools & career evolution
💕 Subscribe to get the latest releases & changes in our industry
👉 Join my community to get First Access, more direct guidance & live consultation on your work
🔔 Turn on ALL notifications so you don't miss the latest releases and tutorials
🔥 Hype this video to help it reach the people searching for it
➡️ LinkedIn: https://linkedin.com/in/nehmatgereige
❎ X: https://x.com/33Nehmat
Ⓜ️ Medium: https://medium.com/@nehmat.gereige
🌈 Figma Creations: https://www.figma.com/@nehmatgereige
🌸 FREE Professional Courses 🌸
🎨 **Figma Design Agent Complete Course**
https://youtube.com/playlist?list=PLXdRMPwB8CHm6XJwPZMZwUfDTUipxGMPK&si=pbp2rXVshkssQ6Et
🤖 **Claude AI + Figma MCP for Designer: The New AI-Design Workflow**
https://www.youtube.com/playlist?list=PLXdRMPwB8CHnCai2ohL6e9HA4mcq-ZEn0
☸️ **Codex for Designers** https://www.youtube.com/playlist?list=PLXdRMPwB8CHk4F76vsOWHehnz8pcKYP6T
🔥 **Figma MAKE — 0 to Expert **
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmbSLEKimjJMuvlAQgi09I
🌈 **Complete Figma for Beginners 2025**
https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN
🧘🏻♀️ **Career in UX/UI Design**
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y