Design

Figma

by Figma, Inc.

Overview

The Figma MCP server helps you pull in Figma context and generate high-quality code that aligns with your codebase and design intent. Use the MCP server to retrieve code resources from Figma Design or Make files, and turn your ideas into production apps. Key Features: • Generate code from selected frames or nodes - Select a frame in Figma or provide a node URL to have an AI agent turn your design into code. • Extract design context from layers - Pull out variables, components, and layouts from a design to ensure builds adhere to design patterns. • Code smarter with Code Connect - Boost output quality by reusing your actual components, the MCP server informs AI agents about existing components derived from Code Connect information. Setup and Usage: The Figma MCP server runs locally on your device and operates only when Dev Mode is active and enabled within a Figma file. You must have the latest version of the Figma desktop app running in order to use this. Enable Figma MCP server in Figma App: 1. Open your Figma application. 2. Open a Figma design file. 3. Access the Dev Mode inspect panel, where you'll find the MCP Server configuration options. Authentication: The Figma MCP server handles authentication through the Figma desktop application. This authentication is managed automatically by Figma when you're logged into the desktop app. Developer terms: Review Figma's developer terms

Tools

Figma tools

ChatGPT

The Figma app in ChatGPT generates beautifully designed presentations, and diagrams. Give the Figma app context about a presentation like a suggested outline or a goal, and it will generate a polished slide deck. The Figma app can also turn prompts into flow charts, Gantt charts, or other diagrams in FigJam. Open what you create in Figma to edit, share, and collaborate.

add_code_connect_map

ChatGPT

Map a Figma node to a code component in your codebase using Code Connect. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id and file key from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId.

create_new_file

ChatGPT

Create a new blank Figma file. IMPORTANT: You MUST load the /figma-create-new-file skill BEFORE every call to this tool, if it exists. NEVER call this tool without loading that skill first if it exists. By default the file is placed in the authenticated user's drafts folder; If specified it can be placed inside a project. Use this tool when you need a new file to work with before calling use_figma. Returns the new file key and URL. Requires a planKey. If the user already provided a planKey, use it directly. Otherwise, call the whoami tool first to get the list of plans. If the user has one plan, use its "key" field. If multiple, ask the user which team or organization to use. Optionally accepts a projectId. If the URL is of the format https://figma.com/files/project/:projectId, https://figma.com/files/:orgId/project/:projectId, or https://figma.com/files/team/:teamId/project/:projectId then use the :projectId as the projectId.

generate_deck

ChatGPT

Generates polished and fully editable presentation decks in Figma Slides, suitable for a wide range of use cases including pitches, slideshows, portfolios, readouts, workshops, research summaries, moodboards, training materials, retrospectives, event recaps, and strategic reviews. This tool produces visually refined, ready-to-edit decks that can be customized for personal, creative, professional, corporate, and creative contexts. Use this tool when you need a slide deck that communicates ideas, findings, or proposals in a visually compelling way. Decks are optimized for storytelling, clarity, and design consistency—ideal for presenting to teams, clients, stakeholders, or audiences. Do not use this tool for designing application UIs, websites, flow diagrams, or standalone marketing assets. For FigJam diagrams, use the generate_diagram tool instead. For Buzz marketing assets, use generate_asset. This tool requires the following parameters to generate high-quality outputs: objectives, outline, style, color palette, use case, and theme. This tool does not retain chat history or conversational context beyond what you provide in the current request. To ensure best results, include all relevant details directly in your prompt, describing your goals and constraints clearly and completely. The prompt should be self-contained and include all relevant details with the context in mind but without referencing earlier prompts. This tool will return up to three unique slide deck options, each including a thumbnail and Figma Slides URL for editing within Figma. These generated decks serve as starting points for refinement, collaboration, and final presentation design.

generate_diagram

ChatGPT

Create a flowchart, decision tree, gantt chart, sequence diagram, state diagram, or entity relationship diagram in FigJam, using Mermaid.js. Generated diagrams should be simple, unless a user asks for details. This tool also does not support generating Figma designs, class diagrams, timelines, venn diagrams, or other Mermaid.js diagram types. This tool also does not support font changes, or moving individual shapes around -- if a user asks for those changes to an existing diagram, encourage them to open the diagram in Figma. If the tool is unable to complete the user's task, reference the error that is passed back. Do not use the create_new_file tool prior to creating a diagram using this tool; generate_diagram creates its own files.

generate_figma_design

ChatGPT

Capture, import, or convert a web page (by URL) or HTML into an existing Figma design file. Use this tool when the user wants to send, import, capture, screenshot, or push a webpage into Figma. REQUIRES an existing fileKey — if the user does not already have a Figma file, first call create_new_file (load the figma-create-new-file skill for the plan-resolution contract) and reuse the returned file_key here. Works with both local dev servers (localhost) and external websites. For LOCAL projects: explore the user's codebase to identify the page, dev server command, and URL before calling. Call this tool with a fileKey (no captureId) to get the capture script + a captureId, then poll with the captureId every 5 seconds (up to 10 times) until status is 'completed'. Each capture ID is single-use. USING generate_figma_design WITH use_figma: - For web apps, use BOTH tools in parallel: run this tool (generate_figma_design) to capture a pixel-perfect layout, and use use_figma with search_design_system to build the screen from design system components. - Once both complete, refine the use_figma output to match the pixel-perfect layout from this tool's capture, then delete this tool's output (it was used as a layout reference only). - For non-web apps (e.g. iOS), use use_figma only. - For updating/syncing a page already in Figma, use use_figma only.

get_code_connect_map

ChatGPT

Get a mapping of {[nodeId]: {codeConnectSrc: e.g. location of component in codebase, codeConnectName: e.g. name of component in codebase} E.g. {'1:2': { codeConnectSrc: 'https://github.com/foo/components/Button.tsx', codeConnectName: 'Button' } }. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id and file key from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId.

get_code_connect_suggestions

ChatGPT

Get AI-suggested strategy for linking a Figma node to code components via Code Connect. Workflow: call this tool → review suggestions with the user → call send_code_connect_mappings to save the approved mappings. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id and file key from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId.

get_context_for_code_connect

ChatGPT

Get structured component metadata including properties, variants, and descendant tree for a Figma component or component set. Returns property definitions with types and variant options, and a tree of descendant instances and text nodes with their property references. Designed for creating Code Connect template files. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id and file key from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId.

get_design_context

ChatGPT

Get design context for a Figma node — the primary tool for design-to-code workflows. Returns reference code, a screenshot, and contextual metadata that should be adapted to the target project. See the server instructions for how to interpret and adapt the response. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id and file key from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey. If the URL is of the format https://figma.com/make/:makeFileKey/:makeFileName then use the makeFileKey to identify the Figma Make file. Only for Figma Make files (URLs containing /make/), and only when calling get_design_context, assume the nodeId is 0:1. The response will contain a code string and a JSON of download URLs for the assets referenced in the code. It will also include a screenshot of the node for context by default.

get_figjam

ChatGPT

Generate UI code for a given FigJam node in Figma. Use the nodeId parameter to specify a node id. If no node id is provided, use 0:1 which is the root node ID. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/board/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. IMPORTANT: This tool only works for FigJam files (URL path /board/), not other Figma files.

get_libraries

ChatGPT

Get the design libraries associated with a Figma file. Returns two lists: (1) libraries currently added to the file (subscribed), and (2) libraries available to add (community UI kits and organization libraries). Each library includes its name, library key, description, and source type. The organization libraries portion of libraries_available_to_add is paginated — when the response includes a libraries_available_to_add_next_offset value, pass it back via the offset parameter to fetch the next page. Use the library keys from the response to scope searches with search_design_system by passing them as includeLibraryKeys.

get_metadata

ChatGPT

IMPORTANT: Always prefer to use get_design_context tool. Get metadata for a node or page in the Figma desktop app in XML format. Useful only for getting an overview of the structure, it only includes node IDs, layer types, names, positions and sizes. You can call get_design_context on the node IDs contained in this response. Use the nodeId parameter to specify a node id, it can also be the page id (e.g. 0:1). IMPORTANT: This tool only works for Figma design files (URL path /design/). It is NOT supported for FigJam (/board/) or Slides (/slides/) files. This tool is not supported for Figma Make Files (URLs containing /make/). The nodeId parameter is optional: when omitted, the tool returns a list of the top-level pages (guid + name) in the document instead of an XML dump — use this when you don't yet know which page or node to drill into. If the URL includes node-id, extract it and pass it as nodeId; for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. If the URL does not include node-id, do not set nodeId; omit the field so the tool lists top-level pages. Do not pass an empty or guessed nodeId. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey.

get_screenshot

ChatGPT

Generate a screenshot for a given node or the currently selected node in the Figma desktop app. Works on Figma design files (URL path /design/), FigJam boards (/board/), and Figma Slides (/slides/). The optional maxDimension parameter (positive integer, max 65536, default 1024) caps the longer edge of the rendered PNG in pixels — increase it when you need to inspect fine detail, decrease it for thumbnails or to save context. The JSON metadata entry in the response includes both width/height (the rendered PNG size) and original_width/original_height (the node's natural canvas size before any clamping), so callers can decide whether to re-request at a higher maxDimension. Use the nodeId parameter to specify a node id. nodeId parameter is REQUIRED. Use the fileKey parameter to specify the file key. fileKey parameter is REQUIRED. If a URL is provided, extract the file key and node id from the URL. For example, if given the URL https://figma.com/design/pqrs/ExampleFile?node-id=1-2 the extracted fileKey would be pqrs and the extracted nodeId would be 1:2. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId. This tool is not supported for Figma Make Files (URLs containing /make/). By default this tool returns a short-lived URL to the screenshot plus curl instructions for downloading the PNG — the URL+curl path is strongly preferred because it uses far fewer tokens than embedding the image inline. The enableBase64Response parameter defaults to false. Only set enableBase64Response: true when the agent cannot fetch URLs (no shell access, no HTTP client, or a sandboxed environment that blocks outbound requests); when set, an inline base64 image entry is appended to the response in addition to the URL and curl instructions. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey.

get_variable_defs

ChatGPT

Get variable definitions for a given node id. E.g. {'icon/default/secondary': #949494}Variables are reusable values that can be applied to all kinds of design properties, such as fonts, colors, sizes and spacings. Use the nodeId parameter to specify a node id. Extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId. This remote tool requires a concrete node target. This tool is not supported for Figma Make Files (URLs containing /make/). If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey.

search_design_system

ChatGPT

Search for design system assets (components, variables, and styles) based on a text query. Returns matching assets from all design libraries. Use this when you need to find specific components, variables (e.g. colors, spacing tokens), or styles from design libraries.

send_code_connect_mappings

ChatGPT

Save multiple Code Connect mappings in bulk. Use after get_code_connect_suggestions to confirm and save approved mappings. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id and file key from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL does not include node-id, ask the user for a node-specific URL. Do not pass an empty or guessed nodeId.

upload_assets

ChatGPT

Upload assets (images, etc.) into a Figma file. Call with a "count" to get that many single-use upload URLs. POST raw asset bytes to each URL with the correct Content-Type header (e.g. image/png, image/jpeg). Set batchCommit to true so all assets can commit and place in one file operation. If a commitUrl is returned, after all uploads succeed, call it exactly once to commit and place all assets. If no commitUrl is returned, each upload URL commits and places automatically. For a single image with nodeId, sets it as a fill on that existing node. Without nodeId, creates new frames with image fills on the current page. Supports PNG, JPG, GIF, and WebP formats. Max 10MB per asset. Works on Figma design files (URL path /design/), FigJam boards (/board/), and Figma Slides (/slides/).

use_figma

ChatGPT

Create, edit, generate, or sync any design in Figma — UIs, screens, mockups, components, frames, variables, styles, text, images, layouts, and design systems. This is the general-purpose tool for writing to Figma; it works by running JavaScript via the Figma Plugin API. Works on Figma design files (URL path /design/), FigJam boards (/board/), and Figma Slides (/slides/). IMPORTANT: Before calling this tool, load figma-use guidance. Prefer the /figma-use skill if available; otherwise read the skill://figma/figma-use/SKILL.md MCP resource. Skipping this causes common, hard-to-debug failures. Use this tool when the user wants to: - Create or generate a design, screen, UI, or mockup in Figma — from scratch, from intent, or from code - Update, edit, or sync an existing Figma design - Generate or sync Figma designs from source code - Set up or modify design tokens, variables, or styles - Build or extend a design system or component/variant library - Fix layout, spacing, auto-layout, or fill/hug issues - Add component descriptions or Code Connect metadata to nodes - Review or fix accessibility, contrast, typography, or visual polish - Inspect or query node properties programmatically CHOOSING BETWEEN use_figma AND generate_figma_design: - Default to this tool (use_figma) for all Figma write operations. - generate_figma_design is the exception: use it ONLY when capturing a web app page or view into Figma for the first time. For web apps, run both tools in parallel — generate_figma_design captures a pixel-perfect screenshot, use_figma builds the screen from imported design system components, then refine use_figma against the screenshot. - For non-web targets (iOS, Android, generic UI) and from-scratch designs, use this tool only. - For updating or syncing a Figma page already captured into Figma, use this tool — even if the source code has changed. GOTCHAS: - For the font "Inter", the style is "Semi Bold" (with a space), not "SemiBold". Same for "Extra Bold" not "ExtraBold". - Setting figma.currentPage is not supported. Use await figma.setCurrentPageAsync(page) instead. - getPluginData / setPluginData / getPluginDataKeys are NOT supported here (web-only, require a plugin manifest id). Use getSharedPluginData(namespace, key) / setSharedPluginData(...) / getSharedPluginDataKeys(namespace) instead. Pick a stable namespace (>=3 chars, alphanumeric/_/.) unique to your integration. REUSE THE DESIGN SYSTEM FIRST: Before creating components, styles, or tokens from scratch, call search_design_system to find existing matches. Import component matches via importComponentByKeyAsync or importComponentSetByKeyAsync rather than recreating them. Reuse existing variables and styles rather than defining new ones.

whoami

ChatGPT

Returns information about the authenticated user. If you are experiencing permission issues with other tools, you can use this tool to get information about who is authenticated and validate the right user is logged in.

add_code_connect_map

Claude

App Stats

Tools

Prompts

Dec 21, 2025

First seen

ChatGPT, Claude

Platforms