MCP server
Figma MCP server
Figma's official MCP server gives AI design context, screenshots, variables and assets, and can now write to the canvas.
- Official server
- Productivity
Why it matters
What it does and why it matters
Figma is where most product and web design happens. Its official MCP server gives a coding assistant the design context it needs: layout and style details, metadata, screenshots, design variables, assets, Code Connect mappings and search across the design system. That leads to code that matches the design much more closely than working from a screenshot.
Figma has also added tools that write to the canvas, so an assistant can create files and generate or edit designs.
For developers, the read tools are the main value. Canvas writing is newer, and we treat it as a drafting aid that a designer reviews. Access follows your Figma account and file permissions.
We use design-to-code tools like this when building interfaces, always with a developer checking the result against the design and accessibility needs.
Use cases
Best business use cases
Design to code
Design tokens
Assets
Design system search
Draft designs
Tools
Available tools
Tool names as published by the maintainer at review time. Versions change, so check the repository for the current list.
Read and write: Read design data and write to the canvas (create and edit content).
-
get_design_contextGets design context for a layer or selection.
-
get_metadataReturns an XML outline of the selection.
-
get_screenshotCaptures an image of the selection.
-
get_variable_defsLists variables and styles used.
-
download_assetsDownloads exports and source images.
-
use_figmaCreates, edits and inspects content on the canvas.
-
generate_figma_designGenerates design layers from an interface (remote only).
-
create_new_fileCreates a blank Design, FigJam or Slides file (remote only).
-
get_code_connect_mapGets node-to-code component mappings.
-
search_design_systemFinds components, variables and styles (remote only).
Workflows
Example workflows
Build a component from a design
-
1
Select a frame in Figma.
-
2
The assistant reads the design context.
-
3
It checks the Code Connect mapping.
-
4
It writes the component.
-
5
A developer compares it with the design.
Check tokens in code
-
1
Ask for the color and spacing variables.
-
2
The assistant reads them.
-
3
It compares them with the code.
-
4
It lists mismatches.
-
5
The team fixes them.
Prompts
Example prompts
“Build this selected card component in React with Tailwind, matching the design.”
“List the color and spacing variables used in this frame.”
“Find the button component in our design system and show its variants.”
Setup
Installation and configuration
Examples for Claude Desktop and Claude Code. Replace the placeholder values with your own keys, and store secrets outside version control.
Claude Code: terminal
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp- Hosted server: https://mcp.figma.com/mcp.
- Local server: Desktop app server (needed for Figma for Government); remote is recommended.
- Needs: OAuth. Only clients in the Figma MCP Catalog can connect..
Security
Security considerations
-
File permissions
The assistant sees the files your account can see.
-
Canvas writes
Review designs created or edited by the assistant.
-
Review code
Check generated code for accessibility and quality.
-
Confidential designs
Be careful with unreleased product designs.
Related servers
Servers that pair well with it
Canva
Canva's official MCP server lets AI search, create, resize, export and comment on designs, upload assets and use brand kits.
GitHub
GitHub's official MCP server lets AI read repositories, search code, manage issues and pull requests and, when allowed, change files.
Notion
Notion's official hosted MCP server lets AI search and read pages, create and update pages and databases, query data and add comments.
Keep exploring
Solutions and services that use it
Related services
View all related services- MCP integration Connect AI assistants to your CRM, files, databases and tools through Model Context Protocol servers, with safe permissions.
- AI copilots AI helpers built into your product or internal tools that draft, summarize and suggest while people decide.
- WordPress development Custom WordPress themes, plugins and cleanups for teams who want to keep editing content themselves.
- MVP development A first version with just enough features to put in front of real users and learn what to build next.
- Internal tools Custom software for your own team: trackers, approval flows and back-office systems that replace spreadsheets.
- App store launch Store listings, review requirements, test builds and release management for the App Store and Google Play.
Solutions
View all solutions- AI-assisted content workflows Briefs, first drafts, edits and repurposing in a workflow where people set the angle and approve every word.
- Approval workflows Requests, approvals and reminders in one place, with clear owners and deadlines instead of long email threads.
- Automated quoting Draft accurate quotes and proposals from a request, your price rules and past work, for a person to approve.
- Compliance tracking Track filing deadlines, licenses and obligations in one place, with reminders and AI summaries of relevant rule changes.
- Knowledge assistant (RAG) Ask a question in plain words and get an answer from your own documents, with links to the sources.
- Meeting notes automation Transcribe meetings and calls, summarize decisions and push action items into your CRM or project tool.
Industries
View all industries- Professional services Client portals, proposal drafting, knowledge assistants and internal tools for consultancies, agencies and firms.
- Marketing agencies Landing pages, content workflows, client reporting and white-label development capacity for marketing agencies.
- Construction and facilities Job tracking, maintenance requests, inspections, quotes and proof-of-work photos for builders and facility teams.
- Education and elearning Course platforms, student portals, content workflows and AI tutoring assistants for schools and training companies.
- SaaS and startups MVPs, subscription billing, AI features, multi-tenant platforms and scaling support for founders and product teams.
Guides and articles
View all guides and articles- Where AI helps in development, and where it does not An honest map of the development tasks AI speeds up and the ones that still need experienced people.
- What is AI-accelerated development? How software teams use AI to plan, code, test and document faster, and where people still make every decision.
- Prompt writing basics for business teams How to write prompts that get consistent, useful results from AI tools, with templates your team can reuse.
- How to build an AI workflow with MCP servers Plan, connect and test an AI workflow that uses MCP servers, from a single task to a reliable process.
- Progressive web apps explained What progressive web apps can do, where they beat store apps, their limits and how to decide.
AI models
View all ai models- Mistral Medium 3.5 A newer open-weight Mistral model for agent and coding work, with image input, tool calling, structured outputs and a 256K window.
- Codestral 25.08 Mistral's low-latency coding model for code completion and generation, with fill-in-the-middle support, tool calling and a 128K window.
- GPT-6 Sol The middle model of the GPT-6 family, positioned for complex coding and agentic workflows at a mid price level.
- Qwen3.8-Max Alibaba's current Qwen flagship for long autonomous coding and professional work, with image and video input, tool calling, JSON Schema output and a 1 million token window.
- Qwen3-Coder Qwen's open-weight coding models under Apache 2.0, from the efficient Qwen3-Coder-Next to the large 480B model, with tool use and long context.
Glossary terms
View all glossary terms- AI copilot An AI copilot is an assistant built into a tool people already use, which suggests, drafts and explains while the person stays in control.
- Progressive web app A progressive web app, or PWA, is a website that works like an installed app, with offline use, home screen icons and notifications.
- Claude Code Claude Code is Anthropic's agentic coding tool, which works in a developer's terminal, IDE, desktop app or browser to read code, run commands and make changes.
- Cross-platform app A cross-platform app is a mobile app built from one shared codebase that runs on both iOS and Android.
- Prompt A prompt is the instruction and context you give an AI model to get the output you want.
FAQ
Questions people ask us
Have a question that is not here? Ask us directly.
Yes. It is provided by Figma.
Yes. It can now write to the canvas. Review AI-made changes.
Developers turning designs into code, and design teams keeping systems consistent.