MCP server · Design tools
Figma MCP server (figma-use)
by dannote
Lets your AI create and change things in Figma, like shapes, text, buttons and layouts, right from a chat.
figma-use is a helper that connects your AI to Figma, the design app. It lets the AI make new frames, text, icons and components in your Figma file, and change things like colors, spacing and layout. It is handy if you work with designers or build simple screens and want the AI to do the clicking for you.
What is an MCP server? The 30-second version
On its own, your AI can only chat. An MCP server is a small helper program that gives your AI a new skill or a connection to an app. This one connects your AI to Figma, so when you ask for a button or a card, the AI can actually create it in your Figma file. You still talk in plain words, the helper does the work behind the scenes.
What this MCP server does
You ask your AI something like make a blue button in Figma. The AI uses this helper, which talks to your open Figma app on your computer. The helper sends the instructions to Figma and Figma draws the shape, text or component on the canvas. Then the AI tells you what it made, and you can see it in Figma right away.
Click to zoomWhat you can do with it
- Create frames, rectangles, ellipses, text, lines, stars and polygons
- Add icons from a large icon library by name
- Set colors, spacing, rounded corners and auto layout
- Build reusable components and variants
- Export a Figma element back into code-like text
- Find elements using simple search patterns
- Check a design for common problems like low contrast
Try asking your AI
- “Make a 400 by 300 white card with a title and a description, rounded corners and 16 pixel gap”
- “Create a row of three buttons: Primary, Secondary, Primary, all the same size”
- “Add a home icon from Material Design Icons at 32 pixels in blue”
- “Export the selected frame as JSX so I can reuse it in code”
What it gives back to you
You get short answers in the chat, like created frame 1:23 or a list of elements it found. It can also give you a tree view of your page, a color palette, or a code-like snippet of a design. If it changes something, it tells you what it changed.
Before you start
What you need
- The Figma desktop app installed on your computer
- Node.js installed (the helper runs with a tool called npm)
- Figma started with a special setting so the helper can talk to it
Good to know
It can create, change and delete things in your Figma file, so keep a backup or work on a copy until you trust it.
Install it with your AI
Add Figma MCP server (figma-use) to your AI, no technical skills needed
You don't install anything by hand. You copy one prompt, paste it into an AI that can work on your computer, and it checks, installs and connects the server for you, asking you when it needs something.
Sign in to get the install prompt
Members get a ready-made prompt that lets the Claude desktop app check Figma MCP server (figma-use), install it and connect it for them, step by step. You don't need any technical skills: you copy, paste and answer a few questions. Your connected AI can also find and install any of the 4,066 MCP servers here for you.
Who it's for
Designers, product people and developers who use Figma and want their AI to help build or tidy up screens.
