Connect Claude to Figma with MCP

Connect Claude to Figma with MCP

TD Sunshine 45.8K subscribers
126.8K views · 2026-03-31 UI DesignInteraction & UX
Thanks for watching, TD 💛
⭐️ Get 30% off Figma Weave (use code TDSunshine30) → https://weave.figma.com?ref=tdsunshine&fp_sid=oct

🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine

🚨 _MENTIONED IN THE VIDEO_ :
- Check command line tools : "git --version"
- Install command line tools : "xcode-select --install"
- Claude code docs : https://code.claude.com/docs/en/overview
- Figma MCP docs :https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

🌼 _CHAPTERS_ :
00:00 Intro
00:13 What is Claude Code
00:39 Prework 1- Anthropic account
00:50 Prework 2 - Enable Figma MCP
01:06 Prework 3 - Command line tools
01:49 Install Claude Code
02:53 Connect via Figma MCP
04:20 IF YOU GET THIS ERROR
04:37 Authenticate Figma
05:25 Generate design
07:36 Bidirectional loop
09:22 Figma Agent (Figma-use skill)
10:45 Create component with Claude
11:41 Designer 1 - Claude 0
13:00 Wrap up

🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.

#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figmaai #figmamcp #claude #claudeai #claudecode