Learn how to design with Claude Code from Anthropic in real product workflows with Figma MCP. I cover what Claude Code is, how designers can use it, and how to turn it into a serious productivity multiplier for UX exploration, documentation, prototyping, and shipping faster. If you’re a UI, UX, or Product Designer looking to build better products, work smarter with AI, and stay competitive in a rapidly changing industry, this guide is for you. 🔗 KEY LINKS 📣 JOIN THE COMMUNITY: https://uicollective.co/ ❎ Follow me on X: https://x.com/KirkMDesign Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo...trying to make design education available for all, support goes a long way!) ↪️ Need a design system? (also included in the academy): https://collectivekit.co/ 🔗 VIDEOS TO WATCH Build a Design System: https://youtu.be/opTANvl9G1g Complex Design System Setup: https://youtu.be/L-tpK7Eeuow AI & Design Systems: https://youtu.be/XfezMs8B-O8 🔗 MORE LINKS Let us build or fix your design system: https://designsystemlabs.co/ 📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective [email protected] VIDEO LINKS & MORE: Installation: https://code.claude.com/docs/en/overview#terminal For installation: /plugin install figma@claude-plugins-official MCP documentation: https://code.claude.com/docs/en/mcp https://www.pencil.dev/ 0:00 An Introduction 0:53 Introduction to Claude Code 3:23 Claude Code & Opus 4.6 4:26 Setting Up Claude Code 6:07 Connecting Figma MCP 7:35 Building a Figma Design with Claude Code 11:59 Claude Code Desktop App 13:32 Pencil App Demo 14:31 Building a Design with Claude Code & Pencil
ADVERTISEMENT
it's opening in ifgma for me when I paste the link, but how do i have it open locally to select different components to change?
Once it built the dashboard in figma, only the figma file populated for me. How did you open it locally, in a browser that allowed you to copy send certain elements to Figma?
Wow… I’m surprised at the voice—Korean? Haha! It’s too good to pass up! I’ll cheer you on, too. You’re the best instructor for me. Thanks for introducing Claude to me.
HOW are you getting an HTML version in localhost at the same time as building the Figma file? And How is selecting an element in localhost making changes to the figma file on the fly. HUGE missing piece here that we would love to see how that works.
this video is pure gold, thanks for sharing
This is really great and easy to follow. It would also be helpful if you could create a video on how a Figma design system can influence Claude code designs.
How did it automatically created the local host website?
I couldn't get to the point where a local file is built and I can actually see that as a prototype, with hovering states and so on. All of that came out from the single prompt you've used? It designed, but the preview on local is not there, I might be missing something... ideas?
very useful and straight to the point. Thank you
I am really new to developers department & I don't know how to open terminal. Can anyone help me out ?
Thanks this was really helpful! Finally something that explains from the basics :)
Noticed that ux designs exported fm figma to claude dont result in apps with the exact lay out as we defined in figma; how to improve?
Is a pencil subscription required for that browser dashboard tile selection > send to figma flow? I'm not able to select any thing in the browser.
(edited) Working! as always thanks for the awesome content man, thank you!
This vid is exactly what I was looking for, thank you!
Thanks for the great vid! The only issue I had is when I type the command in Cloude Code desktop app it can't access my Figma at all after all the troubleshooting :(
Do we need to have a pro plan to use Claude code?
How does this differ to Figma Make in terms of output? Have been using Figma Make but they just introduced credit limits
How come this works when I prompt something net new....but if i have an existing figma design and ask it to code it and put it on my local server, that lovely tool bar "entire screen, select element, open file" do not appear? Thank you!!
Thanks for the video! i did it yesterday it worked, only i the terminal but not in the claude code app - it kept saying it doesn't recognise it