Figma: a Claude connector by Figma
Official
For developers turning Figma designs into code and designers who want FigJam diagrams. Skip it if your designs are not in Figma.
Add it
Add it from its page in Claude’s connector directory and sign in. In Claude Code you can add it with this command:
claude mcp add --transport http figma https://mcp.figma.com/mcp Run it in your terminal. Open its page in the directory
figma is also a Claude Code plugin. See that page
What does Figma do?
Figma is a Claude connector that brings Figma design context into Claude so it can write code that matches. Pick a frame or paste a node URL and Claude pulls the layout, variables and components from Figma Design or Make files. With Code Connect set up, it learns which of your real components map to the design. It also reads FigJam boards and draws flow charts or Gantt charts in FigJam. The page notes that in Claude, get_screenshot returns only a description of the screenshot.
When should you use Figma?
Use it when
- You need a Figma frame built as a component
- You want design tokens pulled from a file
- You want a flow chart drawn in FigJam
Skip it when
- Your designs live in another tool
- You need Claude to see the actual design image
What it needs and what it can touch
You need
- A Figma account
What it can do
- Reads Figma design files, variables, metadata and FigJam boards
- Creates diagrams in FigJam
From reading its instructions, not from running it.
Details
Did it do the job for you?
Figma