Claude + Figma MCP — Updated Setup for Designers

If you want to connect Claude to Figma using the Figma MCP server, this step-by-step tutorial shows exactly how to set it up. In this updated guide, I walk through the full Claude + Figma MCP setup, including how to install Claude Desktop, configure the MCP connector, install the Figma MCP plugin, and verify that the integration works correctly.

You’ll learn how to send designs from Claude code directly into Figma (code to canvas) and even modify designs before pushing them back. This workflow is transforming how designers and developers collaborate by removing the traditional design-to-code handoff.

In this tutorial you’ll learn how to:

• Connect Claude Desktop to Figma using MCP
• Install and configure the Figma MCP plugin
• Debug connection issues with Claude in the terminal
• Send Claude code to Figma canvas
• Modify designs and push updates back

This guide is perfect for UX designers, product designers, and developers who want to start building AI-driven design workflows with Claude and Figma.

🔗 Download the Figma MCP setup PDF guide I created: https://drive.google.com/file/d/1t7avcr5HXAVJWhzzRMMP1cch8jPppHCW/view?usp=sharing

-------------------------------------------------------------------------------
🔗 **Claude Related Tutorials**
Complete Claude + Figma MCP workflow: https://youtu.be/sUr36TBmC8c
First setup video upon release: https://youtu.be/CJIivdkGT5Y
Connect Design System with Claude: https://youtu.be/mAUXxpRx9Zw
Build Design System with Claude: https://youtu.be/WbUhThNIyUQ
Claude Design: https://youtu.be/o7HSVPHCX8I
Claude Cowork: https://youtu.be/afMFZGjQH0w
Figma Skills: https://youtu.be/KUbHHFtM7Js
Claude Skills: https://youtu.be/WUMIdvphiTQ
Ship your Portfolio from Figma with Claude AI:https://youtu.be/BW3pBEZSfcQ
-------------------------------------------------------------------------------
👩🏻‍💻 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 🌸

🤖 The New AI-Design Workflow — Claude AI + Figma (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHnCai2ohL6e9HA4mcq-ZEn0

☸️ Codex & Chatgpt for Designers: https://www.youtube.com/playlist?list=PLXdRMPwB8CHk4F76vsOWHehnz8pcKYP6T

🔥 Figma MAKE — 0 to Expert (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmbSLEKimjJMuvlAQgi09I

🌈 Complete Figma for Beginners 2025 (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN

🧘🏻‍♀️ Career in UX/UI Design (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y


⏰ CHAPTERS

00:00 Intro
00:34 Download Claude Desktop & Enable Figma MCP
06:42 Install Claude CLI in Terminal
07:30 Debug Claude Path Setup
09:18 Install Figma MCP Plugin
10:21 Install MCP for All Projects
11:53 Verify Plugin & Authenticate
13:57 Demo: Send Claude Code to Figma (Code → Canvas)
15:56 Demo: Modify Design and Send Back

SEARCH QUERIES THIS VIDEO ANSWERS

Claude Figma MCP setup
How to connect Claude to Figma
Figma MCP tutorial for designers
Claude Figma integration step by step
How to install Figma MCP plugin
Claude code to canvas Figma tutorial
Claude desktop Figma MCP setup
Figma MCP server setup for designers