Tools and prompts

The Figma MCP server provides the following tools:

• add_code_connect_map: Adds a mapping between a Figma node ID and its corresponding code component in your codebase
• create_new_file (remote only): Creates a new blank Figma Design, FigJam, or Figma Slides file in the authenticated user's drafts
• download_assets (remote only): Downloads rendered exports and original source images from a Figma file
• generate_diagram (remote only): Generates a FigJam diagram from Mermaid syntax
• generate_figma_design (specific clients only, remote only): Generates design layers from interfaces
• get_code_connect_map: Retrieves a mapping between Figma node IDs and their corresponding code components in your codebase
• get_code_connect_suggestions: A Figma-prompted tool call to find suggestions for mapping Figma node IDs to their corresponding code components in your codebase using Code Connect
• get_context_for_code_connect (remote only): A Figma-prompted tool call to get context for generating Code Connect templates
• get_design_context: Get the design context for a layer or selection
• get_figjam: Converts FigJam diagrams (such as app architecture workflows) to XML
• get_libraries (remote only): Returns the libraries currently added to the file (subscribed) and libraries available to add (community UI kits and org libraries)
• get_metadata: Returns a sparse XML representation of your selection that contains basic properties such as layer IDs, names, types, position and sizes
• get_screenshot: Allows the agent to take a screenshot of your selection
• get_shader_effect: Retrieves a shader effect and its source files
• get_shader_fill: Retrieves a shader fill and its source files
• get_variable_defs: Returns the variables and styles used in your Figma selection
• list_shader_effects: Lists shader effects in your authenticated account library
• list_shader_fills: Lists shader fills in your authenticated account library
• search_design_system (remote only): Searches design libraries for components, variables, and styles matching a text query
• send_code_connect_mappings: A Figma-prompted tool used after calling get_code_connect_suggestions to confirm the suggested Code Connect mappings
• upload_assets (remote only): Uploads supported assets (PNG, JPG, GIF, and WebP) to a Figma file
• use_figma (remote only): The general-purpose tool for creating, editing, or inspecting any object in a Figma file
• whoami (remote only): Returns the identity of the user that's authenticated to Figma

add_code_connect_map

Supported file types: Figma Design

Adds a mapping between a Figma node ID and its corresponding code component in your codebase. Setting up these mappings will improve the output quality of design-to-code worksflows and help you identify and use the exact component in your project.

create_new_file (remote only)

Supported file types: No file context required

Creates a new blank Figma Design, FigJam, or Figma Slides file in your drafts folder. If you belong to multiple plans, you'll be asked which team or organization to create the file in.

You can ask it to:

• Create a new design file
  • create a new Figma file called "Homepage Redesign"
• Create a new FigJam file
  • create a new FigJam board for our project planning session
• Create a new Figma Slides file
  • create a new Figma Slides deck for our Q3 review

download_assets (remote only)

Supported file types: Figma Design, FigJam, Figma Slides

Downloads assets from a Figma file. Returns temporary URLs that must be fetched to retrieve file contents.

Each call returns two types of output for the given node(s) — you get both, not one or the other:

• Export render: The node rendered as an image. If the node has export settings configured in Figma, those are used; otherwise it falls back to the defaultFormat and defaultScale parameters (0.01–4x). Without export settings at scale 1, renders are capped at ~4096px on the longest edge. Supports PNG, JPG, SVG, and PDF.
• Raw source images: The original uploaded files (JPEG, PNG, GIF, or WebP) placed as fills anywhere in the node's subtree, returned without re-rendering. Capped at 20 per call (rawImagesTruncated: true when there are more. Try passing a more specific child node). Useful for cross-file transfer with upload_assets.

Up to 20 nodes can be passed per call.

When to use download_assets vs get_screenshot

Use get_screenshot when the agent needs to see what a design looks like. Use download_assets when the agent needs to deliver an asset to the user, export in a specific format, or transfer images between files.

	get_screenshot	download_assets
Use when	You need to visually inspect a design	You need to save, deliver, or transfer an asset
Output	PNG, inline base64 or URL	URLs only (PNG, JPG, SVG, PDF, or original source)
Nodes	Single	Up to 20
Format control	Always PNG	PNG, JPG, SVG, PDF (export); original format (raw)
Original source files	No — always re-renders	Yes — raw mode returns the exact uploaded binary
Inline base64	Yes, via enableBase64Response	No

Suggested prompts

• Export assets in a specific format
  • export these icons from my Figma file as SVGs
  • download the hero image from this frame as a JPG
  • export this component as a PDF
• Extract original source images
  • grab the original photos from this mockup
  • extract the source images from this frame so I can transfer them to another file
• Cross-file image transfer
  • copy the images from this file into my other Figma file (agent uses download_assets raw mode, then upload_assets)

generate_diagram (remote only)

note

Note: We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

Supported file types: No file context required

Generates a FigJam diagram from Mermaid syntax or natural language descriptions. The generate_diagram tool converts structured or inferred diagram definitions into interactive FigJam diagrams that can be edited and shared.

You do not have to provide Mermaid syntax yourself. You can describe the diagram you want in natural language, and the agent will generate the appropriate Mermaid syntax and call the generate_diagram tool automatically.

Diagrams can be created in a new FigJam file or added to an existing FigJam file.

To ensure that the agent uses the Figma MCP generate_diagram tool, you can include the directive "Use the Figma MCP generate_diagram tool" in your prompt. In most cases, the agent will invoke the tool automatically when a diagram is needed.

Supported diagram types:

• Flowchart
• Gantt chart
• State diagram
• Sequence diagram
• Architecture diagram
• Entity Relationship Diagram (ERD)

Suggested prompts:

• Generate a diagram from a description
  • create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool
  • generate a gantt chart for the project timeline using the Figma MCP generate_diagram tool
  • generate a sequence diagram for the payment processing system using the Figma MCP generate_diagram tool
  • generate an ERD for a blog database with users, posts, and comments using the Figma MCP generate_diagram tool
  • generate an architecture diagram for a real-time chat system using the Figma MCP generate_diagram tool
• Convert existing Mermaid syntax
  • create a diagram from this mermaid syntax: ...

generate_figma_design (remote only)

note

Note:

• For use with select MCP clients.
• Remote Figma MCP server only.
• This tool is exempt from the standard rate limits for the Figma MCP server.

Supported file types: Figma Design

For detailed instructions, see Code to canvas.

generate_figma_design lets you prompt your MCP client to send live UI for your web apps and sites as design layers to:

• New Figma Design files
• Existing Figma Design files
• Your clipboard

generate_figma_design respects your seat type when creating or editing files. New files are created in your team or organization drafts. For existing files, you must have edit permissions for the file.

get_code_connect_map

Supported file types: Figma Design

Retrieves a mapping between selected Figma instance node IDs and their corresponding Code Connect components in your codebase.

It returns an object where each key is a Figma node ID (an instance in the current selection), and the value contains metadata about the connected component, such as:

• componentName: The name of the component in your codebase.
• source: The location of the component in your codebase (file path or URL).
• snippet, snippetImports, snippetNestedFunctions: Snippet data when available.
• version: The source of the mapping (for example, Code Connect UI vs Code Connect CLI).
• label: The framework label (for example, React) when available.

If multiple instances of the same component are selected, each instance appears as a separate entry. The mapping may also include nested components that have their own Code Connect mappings (for example, an icon inside a component).

On the remote server, you can use clientFrameworks and clientLanguages to control which Code Connect mappings are returned.

This mapping connects Figma design elements directly to their framework implementations, enabling design-to-code workflows and helping ensure the correct components are used for each part of the design.

get_code_connect_suggestions

Supported file types: Figma Design

A tool call prompted by Figma to detect and suggest mappings of Figma components to code components in your codebase using Code Connect.

get_context_for_code_connect (remote only)

Supported file types: Figma Design

A tool call prompted by Figma to retrieve context for generating Code Connect templates. 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.

Only intended for use with the figma-code-connect skill, not for direct invocation by a user.

get_design_context

Supported file types: Figma Design, Figma Make

Use the MCP server to get the design context for a layer or your selection in Figma. By default, the output is React + Tailwind, but you can customize it through your prompt.

Suggested prompts:

• Change the framework
  • generate my Figma selection in Vue
  • generate my Figma selection in plain HTML + CSS
  • generate my Figma selection in iOS
• Use your components
  • generate my Figma selection using components from src/components/ui
  • *Tip: set up Code Connect for best code reuse results. Code Connect lets you set up multiple connections per Figma Library. You can map, for example, both your React and SwiftUI code to your Figma components. The Desktop MCP server will use the Code Connect mapping you have selected in Dev Mode. To control which Code Connect mappings are sent via the Remote MCP Server, instruct your agent to set the clientFrameworks tool call paramater to the exact Code Connect label you have set up for your mappings, e.g.. React, SwiftUI.
• Combine both
  • generate my Figma selection using components from src/ui and style with Tailwind

note

Note: Selection-based prompting only works with the desktop MCP server. The remote server requires a link to a frame or layer to extract context.

get_figjam

Supported file types: FigJam

This tool returns metadata for FigJam diagrams in XML format, similar to get_metadata. In addition to returning basic properties like layer IDs, names, types, positions, and sizes, it also includes screenshots of the nodes.

get_libraries (remote only)

Supported file types: Figma Design

Get the design libraries associated with a Figma file. Returns two lists: libraries currently added to the file (subscribed), and libraries available to add (community UI kits and organization libraries). Each library includes its name, library key, description, and source type. The tool is used alongside search_design_system.

get_metadata

Supported file types: Figma Design

Returns a sparse XML representation of your selection containing just basic properties such as the layer IDs, names, types, position and sizes. This is an outline that your Agent can then break down and call get_design_context on to retrieve only the styling information of the design it needs. Useful for very large designs where get_design_context produces output with a large context size.

If you call get_metadata without a nodeId, the tool returns a list of the document's top-level pages (each entry shows the page's id and name) instead of an XML dump. Use this when you don't yet know which page or node to drill into, then call back with one of those page ids to fetch its structure. If you pass an invalid or unknown nodeId, the error response also includes that pages list so the agent has a usable recovery path. For richer per-page detail (child counts, top-level node types, etc.), use_figma can read the document structure directly via the Plugin API.

get_screenshot

Supported file types: Figma Design, FigJam, Figma Slides

Allows the agent to take a screenshot of your selection. This helps preserve layout fidelity in the generated code. Recommended to keep on (only turn off if you're concerned about token limits).

Use download_assets instead if you need multiple nodes, non-PNG formats (SVG, PDF, JPG), full-resolution exports respecting Figma export settings, or the original uploaded source images.

get_shader_effect

Retrieves a shader effect by ID.

Use an ID returned from list_shader_effects.

Returns:

• Name
• Description
• Version
• Source file manifest containing:
  • filename
  • bytes
  • uri

Optionally provide a version parameter to retrieve a specific version of the shader effect. The version must be a 40-character commit SHA.

get_shader_fill

Retrieves a shader fill by ID.

Use an ID returned from list_shader_fills.

Returns:

• Name
• Description
• Version
• Source file manifest containing:
  • filename
  • bytes
  • uri

Optionally provide a version parameter to retrieve a specific version of the shader fill. The version must be a 40-character commit SHA.

get_variable_defs

Supported file types: Figma Design

Returns the variables and styles used in your Figma selection (such as colors, spacing, typography).

You can ask it to:

• List all tokens used
  • get the variables used in my Figma selection
• Focus on a specific type
  • what color and spacing variables are used in my Figma selection?
• Get both names and values
  • list the variable names and their values used in my Figma selection

list_shader_effects

Lists shader effects in your authenticated account library.

Returns the shader effect's:

• ID
• Name
• Description

If additional results are available, the response includes a nextCursor value for pagination.

Use the returned ID with get_shader_effect to retrieve the shader effect's source files and metadata.

list_shader_fills

Lists shader fills in your authenticated account library.

Returns the shader fill's:

• ID
• Name
• Description

If additional results are available, the response includes a nextCursor value for pagination.

Use the returned ID with get_shader_fill to retrieve the shader fill's source files and metadata.

search_design_system (remote only)

Supported file types: Figma Design

Searches across all connected design libraries to find components, variables, and styles matching a text query. Returns matching assets so the agent can reuse existing design system elements rather than creating new ones from scratch.

You can ask it to:

• Find components
  • search for a button component in my design system
  • find a card component I can use for this layout
• Look up tokens
  • search for the primary color variable in my design system
  • find spacing tokens in my design libraries
• Narrow by type
  • search for icon styles in my design system

send_code_connect_mappings

Supported file types: Figma Design

A tool call prompted by Figma to confirm the Code Connect mappings after calling get_code_connect_suggestions.

upload_assets (remote only)

Supported file types: Figma Design, FigJam, Figma Slides

Uploads assets (PNG, JPG, GIF, and WebP) into a Figma file. Max 10MB per asset. If a URL to a specific node is provided, the image is uploaded as a fill to that node. Otherwise, new frames are created with the images as fills.

To transfer images between Figma files, use download_assets in raw mode to retrieve the original source images, then upload_assets to place them in the target file.

use_figma (remote only)

note

Note: We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

Supported file types: Figma Design, FigJam, Figma Slides

The general-purpose tool for writing to Figma files. Use it to create, edit, delete, or inspect objects in Figma Design files, FigJam boards, and Figma Slides decks.

In Figma Design files, use_figma can be used to work with pages, frames, components, variants, variables, styles, text, images, and more. In FigJam, it can be used to work with boards and objects like stickies, sections, connectors, shapes, tables, and code blocks. In Figma Slides, it can be used to work with slides, layouts, text, images, and other deck content.

When relevant, the agent will first check your design system or existing file content before creating anything from scratch.

The use_figma tool is best used with a skill:

• Use figma-use for Figma Design workflows
• Use figma-use-figjam for FigJam workflows
• Use figma-use-slides for Figma Slides workflows

You can ask it to:

• Create or modify designs
  • add a new frame to my Figma file
  • update the button component to use the correct fill color
• Set up design tokens, variables, or styles
  • create a color variable collection from my design tokens
  • set up spacing tokens in my Figma file
• Build or update component and variant systems
  • generate variants for the card component
  • sync my Figma components with my latest code changes
• Fix layout or visual issues
  • fix the auto-layout spacing on the nav component
  • update the typography styles to match the design spec
• Create or update FigJam boards
  • organize this FigJam board into sections
  • add stickies and connectors to summarize this project brief
  • update this architecture diagram in FigJam with a new service

whoami (remote only)

Supported file types: No file context required

This tool returns the identity of the user that's authenticated to Figma, including:

• The user's email address
• All of the plans the user belongs to
• The seat type the user has on each plan