How to Use Claude with Figma

• Claude Code + Figma MCP server. Reads designs, writes code into your repo, writes to the Figma canvas, and turns a running web page into Figma layers. Best for developers and design engineers.
• Figma connector in the Claude app (web, desktop, Cowork). Reads designs, answers questions about them and makes FigJam diagrams. No terminal needed.
• Figma Make. Figma's own prompt-to-app tool. Claude Sonnet 4.6 and Claude Opus are in its model picker.
• Community plugins. Run inside Figma. Some call Claude directly, others package a design for you to paste into Claude.

Figma's help center gives one command: claude plugin install figma@claude-plugins-official. The plugin is made by Figma. It adds the remote MCP server at https://mcp.figma.com/mcp plus Agent Skills for common jobs like implementing a design. After installing, open /plugin, go to the Installed tab, pick figma and authenticate. Manual setup, the desktop server and error fixes are in our Figma MCP server guide.

Figma's docs list three things Claude Code can do with it:

• Read design context: layout, components, variables, FigJam boards and Figma Make files, then generate code that follows your codebase. Code Connect mappings let it reuse your real components.
• Write to the canvas with the use_figma tool: create and edit frames, components, variables and auto layout. It needs a Full seat and edit access to the file; a Dev seat is read-only. Figma says this is free during the beta and will later be a usage-based paid feature.
• Send live UI to Figma with generate_figma_design. Figma launched this in February 2026: Claude Code captures a page running in a browser (production, staging or localhost) and turns it into editable Figma frames.

The remote server works on every Figma plan and seat, with monthly or daily tool call limits that depend on both. A Starter plan gets up to 20 calls a month, so a real project needs a Dev or Full seat. The limits are listed in the MCP guide.

In Claude on the web, the desktop app or Cowork, go to Customize → Connectors, click +, find Figma and click Connect. You can also click + in a chat, hover over Connectors and choose Manage connectors. Anthropic says directory connectors are available on every Claude plan, including Free. The connection is tied to your Claude account, so you set it up once.

Anthropic's listing for the connector shows read tools (get_design_context, get_screenshot, get_metadata, get_variable_defs, get_code_connect_map, get_figjam) and generate_diagram for FigJam. Figma's help center says the Claude integration "currently supports FigJam only" for making new files, so you can ask for a flowchart, Gantt chart or sequence diagram and open it in FigJam, but not a new design file. Anthropic also lists Figma as an interactive connector for reviewing and annotating designs inside the chat.

Writing to design files is where the sources don't line up. Figma's write-to-canvas page names Claude Desktop as a supported client, while Anthropic's connector listing doesn't include use_figma. Check which tools appear under Figma in your connector settings. If use_figma isn't there, use Claude Code for canvas edits.

None of the plugins below come from Anthropic or Figma. Check what each one sends to its servers before you use it on client work. More options are in our list of AI plugins for Figma.

• Buddy by Anima (9K users, free) is a chat agent inside Figma. Its listing says it supports Opus and Sonnet among other models, generates screens and variants, and runs batch edits on your layers.
• Talk To Figma MCP Plugin (73K users, free) is an open-source bridge between Figma and agents like Claude Code, Cursor and Codex. You run a local WebSocket server with Bun, open the plugin and join a channel. It can read and modify designs.
• html.to.design (2.7M users, $18/mo with a free tier) imports web pages as layers. Its docs describe an MCP set-up for the Claude desktop app that sends Claude's output straight to your canvas.
• Figma to Code Ai Export (6K users) goes the other way: it exports a frame as HTML, images and a ready-made prompt to upload to Claude. One export is free, then $2 one-time.

Figma Make builds prototypes and apps from a prompt. Click the model name in the chat box to switch models; Figma's help page lists Claude Sonnet 4.6 and Claude Opus alongside Gemini and GPT models. You don't need a Claude account. Usage comes out of your Figma AI credits, and Figma warns that non-default models can use far more credits per task. See Figma AI credits.

Not directly. Anthropic's help center lists Claude Design's exports as a .zip, PDF, PPTX, standalone HTML, Canva and several other tools, with no Figma option as of September 2026. html.to.design's docs show the usual workaround: capture the design with its Chrome extension and paste it into Figma, or publish a Claude artifact and import the URL with the plugin.

• Place images or custom fonts through `use_figma`. Figma's write-to-canvas docs list no image asset support yet, and custom fonts aren't supported.
• Handle a huge frame in one call. Each use_figma response is capped at 20kb, and large reads can hit token limits. Link a card or section, not a whole page.
• Act on its own. Claude only works on Figma when you ask it in a chat or session.
• Import files for you. Claude won't turn a PDF or a slide deck into Figma layers; that's plugin work. See import a PDF into Figma and Google Slides to Figma.

Claude reads a design better when the file is tidy: auto layout, named layers, and colours bound to variables. How to create variables in Figma is a good first step before you point Claude at a frame.