Feb 23
Loading video player...
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 kirkland@uicollective.co 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