← Back to all apps

Figma

Designby Figma, Inc.
Open in ChatGPTOpen in ClaudeWebsite
Launched Jun 2, 2026 on ChatGPT

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.

• Map your flows with diagrams

  • The Figma MCP server can turn your Claude prompts into flow charts, Gantt charts, or other diagrams in FigJam.

Note: The get_screenshot tool is currently limited to returning a descripton of screenshots in Figma when called in Claude and Claude Code. See developer term [here](https://www.figma.com/legal/developer-terms/)

19ChatGPT Tools
9Claude Tools
Figma, Inc.Developer
DesignCategory

Use Cases

design

Available Tools

Add Code Connect Mapping

add_code_connect_map
Full Description

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.

Parameters (5 required, 4 optional)
Required
componentNamestring

The name of the component to map to in the source code

fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

labelstring

The framework or language label for this Code Connect mapping. Valid values: React, Web Components, Vue, Svelte, Storybook, Javascript, Swift, Swift UIKit, Objective-C UIKit, SwiftUI, Compose, Java, Kotlin, Android XML Layout, Flutter, Markdown

Options:ReactWeb ComponentsVueSvelteStorybookJavascriptSwiftSwift UIKitObjective-C UIKitSwiftUIComposeJavaKotlinAndroid XML LayoutFlutterMarkdown
nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

sourcestring

The location of the component in the source code

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

templatestring

The executable JS template code for a Code Connect template. When provided, creates a figmadoc-type record (full template) instead of a component_browser mapping (simple mapping).

templateDataJsonstring

JSON string of template metadata. May include isParserless (boolean), imports, nestable, props fields. If omitted when template is provided, defaults to {}.

Create Design System Rules

create_design_system_rules
Full Description

Provides a prompt to generate design system rules for this repo.

Parameters (0 required, 2 optional)
Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

Create New File

create_new_file
Full Description

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.

Parameters (3 required, 1 optional)
Required
editorTypestring

The type of Figma file to create. "design" creates a Figma design file. "figjam" creates a FigJam whiteboard file. "slides" creates a Figma Slides presentation file.

Options:designfigjamslides
fileNamestring

The name for the new Figma file.

planKeystring

The team or organization key (e.g. "team::1234567890" or "organization::1234567890"). Use the `key` field verbatim from one of the user's plans. If the user has more than one plan, ask which one to use before calling.

Optional
projectIdstring

The id of the project (folder) in Figma. If the URL is provided, extract the project id from the URL. Common URL formats include https://figma.com/files/project/:projectId, https://figma.com/files/:orgId/project/:projectId, and https://figma.com/files/team/:teamId/project/:projectId. The extracted projectId would be `:projectId`.

Generate Asset

generate_asset
Full Description

Generates marketing and creative assets in Figma Buzz, including but not limited to social media posts, banners, digital ads, posters, hiring materials, event materials, one-pagers, or flyers, greeting cards, invitations, resumes, business cards, and invoices.

Use this tool when you need polished, visual content suitable for social, print, or digital contexts and marketing, communication, personal, or professional purposes. Do not use this tool when you need application UI, websites, diagrams, or presentation decks. For diagrams, use the generate_diagram tool instead. For presentation decks, use generate_deck.

This tool requires an asset description, list of use cases, list of styles, list of aspect ratios, and list of search keywords. The tool does not have context on previous requests or chat history. The asset description you provide should be fully self-contained and include all relevant details with the context in mind but without referencing earlier prompts.

This tool will return up to three visual assets (thumbnails and URLs) suitable for further edits in Figma Buzz.

Parameters (6 required, 3 optional)
Required
aspectRatiosarray

List of applicable aspect ratios ranked by relevance. Do not include more than the singular relevant aspect ratio if the user requests a specific format (e.g. Instagram story): - 0.27: google skyscraper ad - 0.52: linkedin post - 0.56: 9:16 vertical, social story/reel/post, mobile video, tall poster - 0.67: 2:3, Pinterest, tall poster - 0.71: 5:7, photo print, invitation, poster - 0.75: 3:4 poster - 0.77: 8.5×11 Letter portrait, posters, research posters, one pager, flyers, and printed documents - 0.8: 4:5, social ads, poster - 1: 1:1 square, social ads - 1.2: 6:5 slide - 1.4: 7:5 photo print, postcard - 1.5: 3:2 name tag - 1.78: 16:9 widescreen, YouTube thumbnails - 1.9: wide facebook post - 1.91: Facebook event cover photo - 1.92: wide linkedin post - 2: 2:1 banner - 2.7: facebook cover photo - 3: 3:1 banner - 4: 4:1 LinkedIn profile banner - 5: 5:1 banner, YouTube ad - 6: 6:1 banner - 8.09: 8:1 leaderboard, Google ad

assetDescriptionstring

A self-contained prompt describing the asset to generate, as if written by a creative NYC brand designer. Include user intent, specific colors to use (only one set, do not give options), and the tone of the copy. Do not include specific copy unless the user specifies them. Do not add any layout, typography, or format requirements.

searchKeywordsarray

A short list of key terms or phrases that capture the core topic or intent of the asset to generate

stylesarray

List of applicable styles that define the visual aesthetic or overall look and feel of the asset, ordered with most relevant first. The valid values are: bold, minimal, playful, elegant, vibrant, organic, nostalgic, illustrated

titlestring

The title of the asset to generate.

useCasesarray

List of applicable use cases ordered with most relevant first. The valid values are: social_post, ad, flyer, poster, banner, invitation, announcement, event, promotion, product_showcase, celebration, sale, linkedin, instagram, resume, quote, invoice, one_pager, collage, letter, itinerary, name_tag, thank_you_card, birthday_card, testimonial, letterhead, event_speaker, youtube_thumbnail, hiring, social_proof, research_poster, business_card, save_the_date

Optional
planKeystring

Optional. The team or organization key where the generated Buzz draft file should be saved. The key must start with "team::" or "org::", but do not use these abbreviations in user-facing messages.

savePlanKeyboolean

Optional. Indicates whether to use the same plan for future generations. Do not provide this parameter unless the user specifically requests it, and a planKey is also provided.

userIntentstring

A description of what the user is trying to accomplish with this tool call. Important: Do not add extraneous information other than what the user provides.

Generate Deck

generate_deck
Full Description

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.

Parameters (5 required, 5 optional)
Required
descriptionstring

A description of the deck to generate. It must include the topic, audience, style/tone, and any other relevant information in this exact order. Be as detailed as possible and use context from the conversation to help generate the deck.

objectivesarray
outlinearray

A slide-by-slide outline of the deck. Each outline item includes the slide's subject, purpose, role, content, and visuals. The role represents the slide's layout type; aim to use a variety of roles to keep the deck interesting; do not use the same role for more than two slides in a row; ensure that each deck has at least two layouts with images. The content should be a list of specific facts, examples, or points; if the user's prompt is not specific enough, look up relevant information instead of using ambiguous language or abstract meta-commentary. The visuals should be a list of detailed descriptions of the images for the slide. Both the content and visuals should match the selected role.

templateQueryobject
titlestring

The title of the deck to generate.

Optional
planKeystring

The team or organization key (e.g. "team::1234567890" or "organization::1234567890"). Use the `key` field verbatim from one of the user's plans. If the user has more than one plan, ask which one to use before calling.

rulesstring

Optional. Concrete, enforceable do/don't rules specified by the user that must be followed. Only set this if the user has provided specific rules.

savePlanKeyboolean

Optional. Indicates whether to use the same plan for future generations. Do not provide this parameter unless the user specifically requests it, and a planKey is also provided.

themeobject

The theme of the slide deck. The palette is a list of accessible colors in hex format well-suited for both text, accent, and background colors. The paletteDescription is a concise phrase that describes the colors in the palette. The palette should be based on two primary colors related to the presentation content, with all other colors being tints, shades, or tones derived from these two primary colors.

userIntentstring

A description of what the user is trying to accomplish with this tool call. Important: Do not add extraneous information other than what the user provides.

Generate Diagram

generate_diagram
Full Description

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.

Parameters (2 required, 5 optional)
Required
mermaidSyntaxstring

Mermaid.js code for the diagram. Keep diagrams simple, unless the user has detailed requirements. Only the following diagram types are supported: graph, flowchart, sequenceDiagram, stateDiagram, stateDiagram-v2, gantt, and erDiagram. Make sure to use correct Mermaid.js syntax. For graph, flowchart, or entity relationship diagrams, use LR direction by default and put all shape and edge text in quotes (eg. ["Text"], -->|"Edge Text"|, --"Edge Text"-->). Do not use emojis in the Mermaid.js code. Do not use to represent new lines. Feel free to use the full range of shapes and connectors that Mermaid.js syntax offers. For graph and flowchart diagrams only, you can use color styling--but do so sparingly unless the user asks for it. In gantt charts, do not use color styling. In sequence diagrams, do not use notes. Do not use the word "end" in classNames.

namestring

A human-readable title for the diagram. Keep it short, but descriptive.

Optional
fileKeystring

Optional. The key of an existing FigJam file to add the diagram to. Extract from a Figma URL like figma.com/board/{fileKey}/... When provided, the diagram is placed directly in this file instead of creating a new one. The user must have edit access to the file.

planKeystring

The team or organization key (e.g. "team::1234567890" or "organization::1234567890"). Use the `key` field verbatim from one of the user's plans. If the user has more than one plan, ask which one to use before calling.

savePlanKeyboolean

Optional. Indicates whether to use the same plan for future generations. Do not provide this parameter unless the user specifically requests it, and a planKey is also provided.

useArchitectureLayoutCodestring

Optional. To generate a diagram using the software architecture layout, pass the code from the architecture-diagram-instructions resource. Omit this parameter for standard diagrams.

userIntentstring

A description of what the user is trying to accomplish with this tool call. Important: Do not add extraneous information other than what the user provides.

Generate Figma Design

generate_figma_design
Full Description

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.
Parameters (1 required, 2 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`. Only design files are supported: the URL must be a /design/ URL. /slides/, /board/, and /make/ URLs are not allowed.

Optional
captureIdstring

ID returned from the initial call. If provided, polls for capture completion. Each capture ID is single-use and captures exactly one page; call this tool once per page to capture multiple pages, all targeting the same fileKey.

nodeIdstring

Optional node ID to append the capture under. If not provided, a new page is created in the file.

Get Code Connect Mapping

get_code_connect_map
Full Description

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.

Parameters (2 required, 1 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
codeConnectLabelstring

The label used to fetch Code Connect information for a particular language or framework when multiple Code Connect mappings exist.

Get Code Connect Suggestions

get_code_connect_suggestions
Full Description

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.

Parameters (2 required, 3 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

excludeMappingPromptboolean

Whether to exclude the prompt text and images from the response, returning only a lightweight list of unmapped components.

Get Code Connect Context

get_context_for_code_connect
Full Description

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.

Parameters (2 required, 2 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

Get Design Context

get_design_context
Full Description

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.

Parameters (2 required, 5 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

disableCodeConnectboolean

Whether Code Connect should be used to get the design context. Only set this when the user directly requests to disable Code Connect.

excludeScreenshotboolean

Whether to exclude the screenshot of the design from the response. IMPORTANT: it is not recommended to exclude screenshots. Only set this to true if the user has explicitly requested it or you are trying to preserve context.

forceCodeboolean

Whether code should always be returned, instead of returning just metadata if the output size is too large. Only set this when the user directly requests to force the code.

Get FigJam Content

get_figjam
Full Description

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.

Parameters (2 required, 3 optional)
Required
fileKeystring

The key of the FigJam (board) file to use. If a URL is provided, extract the file key from the FigJam board URL. The given URL must be in the format https://figma.com/board/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`. A `/design/...` URL is NOT a FigJam file — do not call this tool with a design fileKey.

nodeIdstring

The ID of the node in the FigJam board, eg. "123:456" or "123-456". If a URL is provided, extract the node id from the FigJam board URL, e.g. for https://figma.com/board/:fileKey/:fileName?node-id=1-2 the extracted nodeId would be `1:2`. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

includeImagesOfNodesboolean

Whether to include images of nodes in the response

Default: True

Get Libraries

get_libraries
Full Description

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.

Parameters (1 required, 1 optional)
Required
fileKeystring

The key of the Figma file to get libraries for.

Optional
offsetinteger

Pagination offset from a previous response (libraries_available_to_add_next_offset). Pass this to fetch the next page of organization libraries in libraries_available_to_add.

Get Metadata

get_metadata
Full Description

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.

Parameters (1 required, 3 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Get Screenshot

get_screenshot
Full Description

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.

Parameters (2 required, 5 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

contentsOnlyboolean

When true, renders the node in isolation — floating/overlapping content (e.g. connectors parented to the page that visually sit above a section) is excluded. Defaults to false so screenshots match what the user sees on the canvas. Only set to true if the caller specifically needs the isolated render.

enableBase64Responseboolean

When true, the response also includes the screenshot inline as a base64-encoded image entry, in addition to the short-lived URL and curl instructions. Defaults to false. Set to true ONLY if the agent cannot fetch URLs (no shell access, no HTTP client, or a sandboxed environment that blocks outbound requests)

Default: False
maxDimensioninteger

Optional. Maximum pixel size of the longer edge of the rendered screenshot — the server scales the node so that max(width, height) ≤ maxDimension while preserving aspect ratio. Defaults to 1024. Must be a positive integer; values above 65536 are rejected. Increase when the agent will visually inspect fine detail; decrease for thumbnails or to save context.

Default: 1024

Get Variable Definitions

get_variable_defs
Full Description

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.

Parameters (2 required, 2 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

Search Design System

search_design_system
Full Description

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.

Parameters (2 required, 5 optional)
Required
fileKeystring

The file key for context

querystring

Text query to search for design system components

Optional
disableCodeConnectboolean

Whether to disable Code Connect for search results.

includeComponentsboolean

Whether to include components in the search results. Defaults to true.

Default: True
includeLibraryKeysarray

Optional list of library keys to restrict the search to. When provided, only results from these libraries are returned. Library keys are returned in previous search results.

includeStylesboolean

Whether to include styles in the search results. Defaults to true.

Default: True
includeVariablesboolean

Whether to include variables in the search results. Defaults to true.

Default: True

Send Code Connect Mappings

send_code_connect_mappings
Full Description

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.

Parameters (3 required, 2 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

mappingsarray
nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document. Do not pass an empty string for node_id.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `react-native`, `expo`, `vue`, `django`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `typescript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is metadata only for logging purposes—the tool output does not change based on this value, so do not retry with different variations.

Upload Assets

upload_assets
Full Description

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/).

Parameters (1 required, 4 optional)
Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

Optional
batchCommitboolean

Optional. Set to true only if you can call the returned commitUrl exactly once after all uploads complete. When enabled server-side, this commits and places all assets in one file operation. If omitted, each upload URL commits and places its asset automatically.

Default: False
countinteger

Number of assets to upload (1-5, default 1). Returns 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). By default, each upload URL handles storage, BlobStore commit, and canvas placement automatically.

Default: 1
nodeIdstring

Optional. If provided, sets the uploaded asset as a fill on this existing node. Can only be used when count is 1.

scaleModestring

How the image fills the node. Default: FILL.

Options:FILLFITCROPTILE
Default: FILL

Use Figma

use_figma
Full Description

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.

Parameters (3 required, 1 optional)
Required
codestring

JavaScript code to execute. Has access to the `figma` global (Figma Plugin API)

descriptionstring

A concise description of what the code aims to do

fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

Optional
skillNamesstring

A comma-separated list of Figma skill names being followed, if any (e.g. "figma-use", "figma-use,figma-generate-design"). Only pass this when explicitly instructed to by skill documentation. Used for logging purposes. If the skill was loaded via a skill-content MCP resource, prefix the skill name with "resource:". (e.g. "resource:figma-use", "resource:figma-use,resource:figma-generate-design")

Who Am I

whoami
Full Description

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.

Links

WebsitePrivacy PolicyTerms of Service