Tools and example prompts

The Figma MCP server provides tools that let your agent read designs from Figma, write designs into Figma, connect designs to your codebase, and build generative plugins and shaders. This article describes each tool and includes example prompts you can use.

To get set up, see Get started with the Figma MCP server.

Tools at a glance

Tools marked Remote only aren't available on the desktop server.

* Used by Figma or by the figma-code-connect skill as part of a larger workflow. You don’t need to call these directly.

The server also provides one MCP prompt, create_design_system_rules.

Design to code

Use these tools to bring designs from Figma into your codebase. get_design_context is the main tool. The others provide extra input for it, or are useful when a selection is too large or you need assets in a specific format.

get_design_context

Supported file types: Figma Design, Figma Make

Gets the design context for a layer or selection in Figma. By default, the output is React and Tailwind, but you can ask for a different framework in your prompt.

If your design uses shader fills or effects, the output includes a lightweight Figma shader runtime. This requires HTML-in-Canvas to display correctly.

Example prompts:

• Change the framework
  • "Generate my Figma selection in Vue."
  • "Generate my Figma selection in plain HTML and CSS."
  • "Generate 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 it with Tailwind."
• Implement a design that uses shaders
  • "Implement this Figma frame in React using the included shader runtime."

get_metadata

Supported file types: Figma Design

Returns a lightweight XML outline of your selection with basic properties only: layer IDs, names, types, positions, and sizes. Your agent can use this outline to call get_design_context on only the parts it needs. This is useful for very large designs, where get_design_context returns too much at once.

Without a node ID, get_metadata returns a list of the file's top-level pages. Your agent can use this list to choose a page to explore. If the node ID is invalid, the error response also includes the page list.

For more detail about each page, such as child counts and top-level node types, your agent can use use_figma to read the file structure directly.

get_screenshot

Supported file types: Figma Design, FigJam, Figma Slides

Takes a screenshot of your selection so your agent can see the design. This helps the generated code match the layout more closely. Screenshots use more tokens, so leave this on unless you're concerned about token limits.

download_assets

Supported file types: Figma Design, FigJam, Figma Slides

Downloads assets from a Figma file for up to 20 nodes per call. It returns temporary URLs your agent uses to fetch the files. Each call returns both:

• Export renders: Each node rendered as PNG, JPG, SVG, or PDF. Uses the node's export settings in Figma if it has them. Otherwise, it uses the defaultFormat and defaultScale parameters (0.01x to 4x). Without export settings, renders at 1x are capped at about 4,096 px on the longest edge.
• Raw source images: The original uploaded image files (JPEG, PNG, GIF, or WebP) used as fills anywhere inside the node, without re-rendering. Returns up to 20 images per call. If there are more, the response includes rawImagesTruncated: true; try a more specific child node.

When to use download_assets or get_screenshot

Use get_screenshot when your agent needs to see a design. Use download_assets when your agent needs to deliver an asset, export in a specific format, or move images between files.

Example 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."
• Get original source images
  • "Grab the original photos from this mockup."
  • "Extract the source images from this frame so I can move them to another file."
• Move images between files
  • "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 selection, such as colors, spacing, and typography.

Example prompts:

• List all variables 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 names and values
  • "List the variable names and their values used in my Figma selection."

get_motion_context

Supported file types: Figma Design

Returns animation data for an animated node so your agent can recreate the motion in code. The response includes:

• A list of animated nodes
• Keyframe tracks with easing curves
• Ready-to-use CSS @keyframes and Motion code snippets
• Hints about which nodes animate together

Use get_motion_context after get_design_context when a design includes animation, using the same node ID. get_design_context provides the static structure and styles, and get_motion_context adds the motion. To get motion data for every animated layer inside the selection in one call, set recursive: true.

get_figjam

Supported file types: FigJam

Returns an XML outline of FigJam diagrams, similar to get_metadata, plus screenshots of the nodes.

Code to design

Use these tools to write into Figma: create and edit files, layers, and content from code or from a description.

use_figma

Supported file types: Figma Design, FigJam, Figma Slides

The general-purpose tool for writing to Figma files. Your agent can use it to create, edit, delete, or inspect content:

• Figma Design: Pages, frames, components, variants, variables, styles, text, images, and more
• FigJam: Stickies, sections, connectors, shapes, tables, code blocks, and more
• Figma Slides: Slides, layouts, text, images, and other deck content

When relevant, your agent checks your design system and existing file content before creating anything from scratch.

Example prompts:

• Create or update designs
  • "Add a new frame to my Figma file."
  • "Update the button component to use the correct fill color."
• Set up variables or styles
  • "Create a color variable collection from my design tokens."
  • "Set up spacing variables in my Figma file."
• Build or update components and variants
  • "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."

generate_figma_design

Supported file types: Figma Design

Sends the live UI of your web apps and sites to Figma as design layers. You can send it to:

• A new Figma Design file
• An existing Figma Design file
• Your clipboard

New files are created in your team or organization drafts. To add to an existing file, you need edit access. Your seat type determines what you can create or edit.

For step-by-step instructions, see Code to canvas.

create_new_file

Supported file types: No file needed

Creates a blank Figma Design, FigJam, or Figma Slides file in your drafts. If you belong to more than one plan, your agent asks which team or organization to use.

Example prompts:

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

upload_assets

Supported file types: Figma Design, FigJam, Figma Slides

Uploads images and SVGs into a Figma file. Supports PNG, JPG, GIF, WebP, and SVG files up to 10 MB each, and up to 60 files per call.

• Images: If you include a link to a specific layer, the image is added as that layer's fill. Otherwise, the tool creates new frames with the images as fills.
• SVGs: Added as editable vector layers, not image fills.

To move images between Figma files, your agent uses download_assets to get the original images, then upload_assets to add them to the other file.

generate_diagram

Supported file types: No file needed

Generates a FigJam diagram from a description or from Mermaid syntax. You don't need to write Mermaid yourself: describe the diagram you want and your agent generates the syntax. Diagrams can go in a new FigJam file or an existing one.

Supported diagram types: Flowcharts, Gantt charts, state diagrams, sequence diagrams, architecture diagrams, and entity relationship diagrams (ERDs)

Example 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 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: …"

html_to_figma

Supported file types: Figma Design

Converts an HTML document into design layers in a Figma Design file. Use it for HTML from your codebase or HTML your agent creates, such as a visual style sheet based on your design tokens.

• The result is plain layers. It doesn't use your components, libraries, or variables. To build with your design system, your agent uses use_figma instead.
• It doesn't run your app or capture a live site. To capture a running web app, your agent uses generate_figma_design. To capture an external website, use the Figma Chrome extension.
• The HTML must be self-contained, with CSS and images included in the document. External links aren't loaded. The document can be up to 50 MB.
• Your agent can choose specific elements, like every card on a page, to turn each one into its own frame, up to 20 per call.

If you don't choose where to add the layers, they're added to a new page in the file.

Example prompts:

• "Create a style sheet from our design tokens and add it to <Figma file URL>."
• "Turn the cards in this HTML file into separate frames in <Figma file URL>."

generate_image

Supported file types: No file needed

Generates an image from a text description. The tool returns a link to the image as a PNG or JPEG.

• Uses Figma AI credits. Each image uses AI credits from your plan, and the cost depends on the image model. If you belong to more than one plan, your agent asks which one to use.
• The link expires after 7 days. Download the image to keep a copy.
• Size is approximate. The requested width and height set the aspect ratio, but the final size may be different.

To add a generated image to a Figma file, your agent uses upload_assets.

Example prompts:

• "Generate a hero image of a mountain trail at sunrise for our landing page."
• "Create a product photo for this card and add it to <link to selection>."

Design systems and Code Connect

Use these tools to find existing design system assets and to map Figma components to code components in your codebase.

get_libraries

Supported file types: Figma Design

Lists the libraries for a Figma file in two groups: libraries already added to the file, and libraries you can add, such as Community UI kits and organization libraries. Each result includes the library's name, key, description, and source. Your agent uses this with search_design_system.

search_design_system

Supported file types: Figma Design

Searches all connected libraries for components, variables, and styles that match a text query, so your agent can reuse what already exists instead of creating new elements. Your agent can send several searches in one call.

Example prompts:

• Find components
  • "Search for a button component in my design system."
  • "Find a card component I can use for this layout."
• Find variables
  • "Search for the primary color variable in my design system."
  • "Find spacing variables in my design libraries."
• Narrow by type
  • "Search for icon styles in my design system."

get_code_connect_map

Supported file types: Figma Design

Returns the Code Connect mappings for the instances in your selection. For each instance, the response includes:

• componentName: The component's name in your codebase
• source: Where the component lives in your codebase (file path or URL)
• snippet, snippetImports, snippetNestedFunctions: Code snippet data, when available
• version: Where the mapping came from, such as the Code Connect UI or CLI
• label: The framework label, such as React, when available

Each selected instance appears separately, even if several use the same component. Nested components with their own mappings, such as an icon inside a button, may also be included.

With the remote server, your agent can use clientFrameworks and clientLanguages to choose which mappings are returned.

add_code_connect_map

Supported file types: Figma Design

Maps a Figma component to its code component in your codebase. Mappings improve design-to-code output and help your agent use the exact components in your project.

Tools used by Figma

Figma or the figma-code-connect skill uses these tools as part of a larger Code Connect workflow. You don't need to call them directly.

• get_code_connect_suggestions: Detects Figma components and suggests which code components to map them to.
• get_context_for_code_connect: Returns component details used to generate Code Connect templates, including properties, variant options, and nested instances and text layers.
• send_code_connect_mappings: Confirms the mappings suggested by get_code_connect_suggestions.

All three support Figma Design files.

Generative plugins and shaders

Use these tools to read and write the source code behind generative plugins, shader fills, and shader effects that you build by prompting Figma Agent.

These rules apply to all tools in this group:

• Access: You can read the code for any shader, but only for your own plugins. Every response includes an owner field: your email, figma, or a publisher handle.
• Create returns a starter: create_generative_plugin and create_shader create a working starter, not a finished resource. Your agent follows up with the matching update tool.
• Updates replace whole files: Updates must include the complete contents of each file, not just the changes. Files you don't include stay as they are. You can't add new files. Shaders have main.ts; plugins have code.ts and ui.html.
• Plan keys come from whoami: Creating a plugin or shader requires a planKey, copied exactly from the plans whoami returns.

list_generative_plugins

Supported file types: No file needed

Lists the generative plugins in your account library, including Figma's own plugins. Generative plugins are runnable tools that change the canvas. They're separate from shader effects and fills.

Example prompts:

• "List my generative plugins."
• "Find my layer-renaming plugin so I can update it."

get_generative_plugin

Supported file types: No file needed

Reads a generative plugin from your account library.

Example prompts:

• "Show me the source for my layer-renaming plugin."
• "Get version <commit SHA> of my layer-renaming plugin."

create_generative_plugin

Supported file types: No file needed

Creates a new generative plugin in your account library. The plugin starts as a working starter that draws a square. Your agent then uses update_generative_plugin to add the behavior you want.

Requires the figma-generative-plugins skill.

Example prompts:

• "Create a new generative plugin called 'Layer renamer' in my team plan."
• "Create a generative plugin, then update it to batch-rename my selected layers."

update_generative_plugin

Supported file types: No file needed

Updates an existing generative plugin. Figma builds, versions, and deploys the update.

Requires the figma-generative-plugins skill.

list_shaders

Supported file types: No file needed

Lists the shader effects and shader fills in your account library.

Example prompts:

• "List the shaders in my library."
• "Find my star field shader."

get_shader

Supported file types: No file needed

Reads a shader effect or fill from your account library.

Example prompts:

• "Show me the source for my star field shader."
• "Get version <commit SHA> of my star field shader."

create_shader

Supported file types: No file needed

Creates a new shader effect or fill in your account library. Like create_generative_plugin, it creates a working starter. Your agent then uses update_shader to add the behavior you want.

Requires the figma-shaders skill.

Example prompts:

• "Create a shader fill called 'Topographic contours' in my team plan."
• "Create a shader effect called 'Chromatic blur' in my organization plan."

update_shader

Supported file types: No file needed

Updates an existing shader effect or fill. Figma builds, versions, and deploys the update.

Requires the figma-shaders skill.

list_file_shaders

Supported file types: Figma Design

Lists the shader effects and fills used in a specific Figma file. Use this to read a shader you don't own: you only need view access to the file. Source code is returned for the exact shader version the file uses, so what you read matches what the file shows.

Example prompts:

• "What shaders are used in this Figma file?"
• "Show me the source for the background shader in this file."

Figma Make and code layers

Use these tools to bring code projects into Figma and keep building them with the Figma Make agent. Your agent can create a Figma Make file or a code layer in a Figma Design file, send prompts, and check progress.

import_codebase

Supported file types: Figma Make, Figma Design

Imports a project from your computer into Figma. In a Figma Make file, the project becomes the file's code. In a Figma Design file, it becomes a new code layer. It doesn't create design layers.

• Requires edit access to the file.
• Your agent packages the project as a .zip, .tar.gz, or .tgz file and uploads it.
• The first import doesn't use Figma AI credits. Prompting and later changes do.

After importing, open the file to preview the project.

Example prompts:

• "Import this project into <Figma file URL> as a code layer."
• "Bring the checkout flow from this repo into a new Figma Make file."

Account

whoami

Supported file types: No file needed

Returns details about the Figma account you're signed in with:

• Your email address
• All the plans you belong to
• Your seat type on each plan

Your agent needs this to create generative plugins and shaders, which require a planKey from the plans list.

Figma Weave

Use these tools to run Figma Weave from your agent. Your agent can run a published Weave tool, or run a Weave model directly without publishing a tool first. In Weave, a “tool” is a published Weave workflow, not an MCP tool.

weave_list_tools

Supported file types: No file needed

Lists the Weave tools you can run in your active Weave workspace: your own tools, tools shared with the workspace, and tools shared with you by email. Private tools aren't included.

Example prompts:

• "Show me the Weave tools I can run."
• "Find the 'image generator' Weave tool."

weave_get_tool_inputs

Supported file types: No file needed

Gets the inputs a Weave tool needs to run. Your agent uses this before weave_run_tool.

Example prompts:

• "What inputs does the 'image generator' Weave tool take?"
• "Show me the inputs and their defaults for this Weave tool."

weave_upload_asset

Supported file types: Images (PNG, JPG, WebP, HEIC), video (MP4, MOV, WebM), audio (MP3, WAV, OGG, and other common formats), and 3D models (GLB, OBJ, FBX, PLY)

Uploads an attached file so it can be used as an input for weave_run_tool. Files that already have a public HTTPS URL don't need to be uploaded.

Example prompts:

• "Use this image as the reference input for the Weave tool."
• "Upload this file to Weave so I can run a tool on it."

weave_run_tool

Supported file types: No file needed

Runs a Weave tool. Your agent uses weave_get_tool_inputs first, then checks progress with weave_get_tool_run_output.

Because runs use credits, the tool won't start until it has what it needs. If inputs are missing or invalid, it returns inputs_required. If the run has a cost, it returns cost_confirmation_required with the number of credits. Your agent confirms with you before running.

Example prompts:

• "Run the 'image generator' Weave tool with the prompt 'a cat.'"
• "Run this Weave tool 3 times."

weave_get_tool_run_output

Supported file types: No file needed

Gets the status and output of Weave runs.

Example prompts:

• "Is my Weave run done yet?"
• "Show me the output of my last Weave run."

weave_cancel_tool_run

Supported file types: No file needed

Cancels one or more in-progress runs. You can't undo this.

Example prompts:

• "Cancel that Weave run."
• "Cancel all my running Weave tool runs."

weave_find_model

Supported file types: No file needed

Finds a Weave model by name so your agent can run it with weave_run_model. Use this when you name a model in your prompt. If the name matches more than one model, your agent shows you the options.

Example prompts:

• "Run Nano Banana 2 on this image."
• "Make a video of this product photo with Veo 3."

weave_run_model

Supported file types: No file needed

Runs a Weave model directly, without a published Weave tool. Your agent uses weave_find_model first, then checks progress with weave_get_model_run_output.

Because runs use Weave credits, your agent shows you the cost and asks you to approve every run, including reruns. If an input is missing, your agent asks you for it.

weave_get_model_run_output

Supported file types: No file needed

Gets the status and output of model runs started with weave_run_model. For runs of published Weave tools, your agent uses weave_get_tool_run_output instead.

Example prompts:

• "Is my video done yet?"
• "Download the images from my last model run."

MCP prompts

MCP prompts are different from the prompts you type to chat with your agent. They're built into the MCP server, and you run them with a command in your client. The command depends on the client, and not all clients support MCP prompts. Check your client's documentation.

create_design_system_rules

Supported file types: No file needed

Creates a rules file that gives your agent the context it needs to turn designs into code that fits your codebase, design system, and tech stack.

After running the prompt, save the result to your project's rules/ or instructions/ folder so your agent can use it when generating code.