Tools and prompts
The Figma MCP server provides tools for reading designs out of Figma, writing designs into Figma, connecting designs to your codebase, and building generative plugins and shaders.
Tools are grouped below by workflow. Use the index to jump to a specific tool.
Index
Read tools
| Tool | What it does | Group | Remote only |
|---|---|---|---|
download_assets | Downloads exports and original source images | Design to code | ✓ |
get_code_connect_map | Retrieves node ID to code component mappings | Design systems and Code Connect | |
get_code_connect_suggestions | Suggests mappings (Figma-prompted) | Design systems and Code Connect | |
get_context_for_code_connect | Component metadata for templates (Figma-prompted) | Design systems and Code Connect | ✓ |
get_design_context | Design context for a layer or selection | Design to code | |
get_figjam | Converts FigJam diagrams to XML | Design to code | |
get_generative_plugin | Reads a generative plugin's source manifest | Generative plugins and shaders | ✓ |
get_libraries | Lists subscribed and available libraries | Design systems and Code Connect | ✓ |
get_metadata | Sparse XML outline of a selection | Design to code | |
get_motion_context | Keyframe animation data and code snippets | Design to code | |
get_screenshot | Screenshot of a selection | Design to code | |
get_shader | Reads a shader effect or fill's source manifest | Generative plugins and shaders | |
get_variable_defs | Variables and styles used in a selection | Design to code | |
list_file_shaders | Lists shaders used in a specific file | Generative plugins and shaders | ✓ |
list_generative_plugins | Lists generative plugins in your library | Generative plugins and shaders | ✓ |
list_shaders | Lists shader effects and fills in your library | Generative plugins and shaders | |
search_design_system | Searches libraries for components, variables, styles | Design systems and Code Connect | ✓ |
whoami | Identity and plans of the authenticated user | Account | ✓ |
Write tools
| Tool | What it does | Group | Remote only |
|---|---|---|---|
add_code_connect_map | Maps a Figma node ID to a code component | Design systems and Code Connect | |
create_generative_plugin | Creates a generative plugin scaffold | Generative plugins and shaders | ✓ |
create_new_file | Creates a blank Design, FigJam, or Slides file | Code to design | ✓ |
create_shader | Creates a shader fill or effect scaffold | Generative plugins and shaders | ✓ |
generate_diagram | Generates a FigJam diagram from Mermaid | Code to design | ✓ |
generate_figma_design | Generates design layers from interfaces | Code to design | ✓ |
generate_image | Generates a downloadable raster image | Image generation | ✓ |
send_code_connect_mappings | Confirms suggested mappings (Figma-prompted) | Design systems and Code Connect | |
update_generative_plugin | Replaces a generative plugin's code.ts or ui.html | Generative plugins and shaders | ✓ |
update_shader | Replaces a shader's main.ts | Generative plugins and shaders | ✓ |
upload_assets | Uploads images into a Figma file | Code to design | ✓ |
use_figma | General-purpose create, edit, and inspect | Code to design | ✓ |
Weave tools are listed separately. The server also provides one MCP prompt.
Not all agents and clients support MCP prompts. Check the documentation for your agent or client to confirm whether MCP prompts are supported.
Design to code
Tools for reading designs out of Figma and into your codebase. get_design_context is the
default entry point: the other tools in this group are either inputs to it, or fallbacks when a
selection is too large or you need a specific asset format.
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.
If you have shader fills and effects in your design, a lightweight Figma shader runtime is included in the output and requires HTML-in-Canvas to display correctly.
You can ask it to:
- Change the framework
generate my Figma selection in Vuegenerate my Figma selection in plain HTML + CSSgenerate my Figma selection in iOS
- Use your components
generate my Figma selection using components from src/components/ui
- Combine both
generate my Figma selection using components from src/ui and style with Tailwind
- Implement a design that uses shaders
implement this Figma frame in React using the included shader runtime
Set up Code Connect for best code reuse results. Code Connect lets you set up multiple
connections per Figma library: you can map both your React and SwiftUI code to the same Figma
components. The desktop MCP server uses the Code Connect mapping you have selected in Dev Mode.
To control which mappings are sent via the remote server, instruct your agent to set the
clientFrameworks parameter to the exact Code Connect label you have set up, for example React
or SwiftUI.
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_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 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 such as child counts and top-level node types, 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 it 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.
download_assets
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 nodes: 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
defaultFormatanddefaultScaleparameters (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: truewhen there are more: try passing a more specific child node). Useful for cross-file transfer withupload_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 |
You can ask it to:
- Export assets in a specific format
export these icons from my Figma file as SVGsdownload the hero image from this frame as a JPGexport this component as a PDF
- Extract original source images
grab the original photos from this mockupextract 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
get_variable_defs
Supported file types: Figma Design
Returns the variables and styles used in your Figma selection, such as colors, spacing, and 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
get_motion_context
Supported file types: Figma Design
Returns keyframe animation data for an animated node so agents can faithfully recreate motion in
code. The response includes an inventory of animated nodes, keyframe tracks with easing curves,
pre-computed CSS @keyframes and motion.dev code snippets, and timeline
coordination hints that describe which nodes animate together.
Call get_motion_context after get_design_context when a design contains animation:
get_design_context returns the static structure and styling, and get_motion_context supplies
the motion layer. Pass the same node id you used for get_design_context. Set recursive: true
to return motion data for every animated descendant of the selection in a single call.
get_figjam
Supported file types: FigJam
Returns metadata for FigJam diagrams in XML format, similar to get_metadata. In addition to
basic properties like layer IDs, names, types, positions, and sizes, it also includes screenshots
of the nodes.
Code to design
Tools for writing into Figma: creating and editing files, layers, and content from code or from a description.
These tools work best with a skill. Use
figma-use for Figma Design workflows,
figma-use-figjam for FigJam, and figma-use-slides for Figma Slides.
use_figma
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 work with pages, frames, components, variants, variables,
styles, text, images, and more. In FigJam, it can work with boards and objects like stickies,
sections, connectors, shapes, tables, and code blocks. In Figma Slides, it can 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.
You can ask it to:
- Create or modify designs
add a new frame to my Figma fileupdate the button component to use the correct fill color
- Set up design tokens, variables, or styles
create a color variable collection from my design tokensset up spacing tokens in my Figma file
- Build or update component and variant systems
generate variants for the card componentsync my Figma components with my latest code changes
- Fix layout or visual issues
fix the auto-layout spacing on the nav componentupdate the typography styles to match the design spec
- Create or update FigJam boards
organize this FigJam board into sectionsadd stickies and connectors to summarize this project brief
generate_figma_design
Supported file types: Figma Design
For use with select MCP clients. This tool is exempt from the standard rate limits for the Figma MCP server.
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 detailed instructions, see Code to canvas.
create_new_file
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
upload_assets
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.
generate_diagram
Supported file types: No file context required
Generates a FigJam diagram from Mermaid syntax or natural language descriptions. You do not have to provide Mermaid syntax yourself: describe the diagram you want in natural language and the agent will generate the appropriate Mermaid syntax and call the tool automatically.
Diagrams can be created in a new FigJam file or added to an existing one.
Supported diagram types: Flowchart, Gantt chart, State diagram, Sequence diagram, Architecture diagram, Entity Relationship Diagram (ERD).
You can ask it to:
- Generate a diagram from a description
create a flowchart for the user authentication flow using the Figma MCP generate_diagram toolgenerate a gantt chart for the project timeline using the Figma MCP generate_diagram toolgenerate an ERD for a blog database with users, posts, and comments using the Figma MCP generate_diagram tool
- Convert existing Mermaid syntax
create a diagram from this mermaid syntax: ...
To ensure the agent uses this tool, include the directive "Use the Figma MCP generate_diagram tool" in your prompt. In most cases the agent will invoke it automatically when a diagram is needed.
Image generation
generate_image
Each generated image uses Figma AI credits.
generate_image creates a raster image from a prompt and returns a temporary URL. Download the
image within seven days by following the returned instructions. The tool returns a standalone
asset and does not place it on the Figma canvas.
Design systems and Code Connect
Tools for finding existing design system assets and for mapping Figma components to their implementations in your codebase.
get_libraries
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. Used alongside search_design_system.
search_design_system
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.
When your agent uses the tool, it passes items as queries, which each express one search intent.
The agent will pass a number of queries per call and gets results based on the text of each query.
You can ask it to:
- Find components
search for a button component in my design systemfind a card component I can use for this layout
- Look up tokens
search for the primary color variable in my design systemfind spacing tokens in my design libraries
- Narrow by type
search for icon styles in my design system
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.
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:
componentName: the name of the component in your codebasesource: the location of the component in your codebase (file path or URL)snippet,snippetImports,snippetNestedFunctions: snippet data when availableversion: 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 appears as a separate entry. The mapping may also include nested components that have their own Code Connect mappings, such as an icon inside a component.
On the remote server, use clientFrameworks and clientLanguages to control which mappings are
returned.
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 improves the output quality of design-to-code workflows and helps you identify and use the exact component in your project.