2 server modes
The remote server connects over HTTP, the desktop one is enabled in Dev Mode and runs locally
Figma MCP and Icons8: design to code with assets
Use Figma MCP in Claude Code to read the layout. Icons8 adds 420,000+ icons and 110,000+ illustrations for what the file lacks
claude plugin install figma@claude-plugins-officialclaude plugin marketplace add icons8/agent-skills &&claude plugin install icons8@icons8Then run /mcp and sign in to both servers
New to MCP servers? Start with the guide
What is Figma MCP server?
The Figma MCP server speaks the Model Context Protocol. It gives the agent your layout and the assets in the file, but has no stock icon catalogue.
Design context
The server hands the agent React and Tailwind code for a layer or selection
Variables
The agent reads your typography, colors and spacing directly from the file
Existing assets
It exports PNG, JPG, SVG and PDF files that already sit in the design
What each server covers
Figma MCP brings the layout and the assets in the file. Icons8 MCP covers icons and illustrations that are not in the file yet.
Missing icons
A placeholder box in the frame gets an icon from Icons8
New states
When a screen needs an empty state, the agent fetches an illustration in your style
Icons you drew
Figma exports them from the file, Icons8 does not replace them
Which tools does Figma MCP server give the agent?
The Figma MCP server exposes 6 tools to help the agent understand your design. They fetch structure and parameters, not new stock graphics.
Design context
Returns React and Tailwind code for a specific layer or selection
Variable definitions
Reads your typography, spacing and color tokens from the file
Screenshots
Gets a picture of the frame so the agent can see the layout
Metadata
Returns metadata for the file
Download assets
Exports PNG, JPG, SVG and PDF from the file as temporary URLs
Search design system
Looks up components in your own Figma libraries
Figma MCP setup for your IDE
Set up Figma MCP in Cursor, Codex or VS Code: each client takes both servers
Add the plugins
Run the install command or add the server URLs to your configuration file
Sign in
Authenticate with both services through your browser
Pass a link
Give the agent a link to your Figma frame so it can read the layout
Pick your client and configure the servers
# Run /add-plugin figma in the agent chat# Then add Icons8 to .cursor/mcp.json{"mcpServers": {"icons8mcp": {"url": "https://mcp.icons8.com/mcp/"}}}Then sign in from the MCP settings
What agents build with the servers
The agent reads the frame from Figma and fills the gaps with Icons8 icons and illustrations
Screen from a frame
Layout from Figma, missing icons from Icons8
Empty state
A new illustration where the file has none
Is Figma MCP free to use?
The remote server is available on all seats. The desktop server needs a Dev or Full seat on a paid plan.
| Figma seat | Remote server | Desktop server | Tool limit |
|---|---|---|---|
| View and Collab | Available | Not available | Up to 6 or 20 calls a month |
| Organization Dev/Full | Available | Available | 200 calls a day |
| Enterprise Dev/Full | Available | Available | 600 calls a day |
Questions about using both servers
It is a server that lets an agent read your Figma file: layout, variables and assets. The remote server runs on Figma's hosted endpoint and needs no desktop app.
Install the Figma plugin from the command at the top of this page. Or add the remote server https://mcp.figma.com/mcp over HTTP by hand. Then run /mcp, select Figma, Authenticate and Allow Access.
Pass a link to a frame to the remote server. The agent calls tools like get_design_context to read the layout of that screen.
Cursor: add the Figma plugin from the agent chat. Codex: add the server URL https://mcp.figma.com/mcp with its MCP add command. VS Code: add the Figma entry in MCP: Open User Configuration, then Start and Allow Access.
No. It exports icons that already sit in your Figma file. For icons and illustrations the file lacks, add Icons8 MCP.
# Add Figma and Icons8 to the agent