Figma MCP server: turn your Figma designs into code with your AI app

• Turns a selected design into code you can build from.

  Reads the layer or selection you point at in Figma and returns code for it, React with Tailwind by default. A remote setup needs a link to the design.

  Try: “Turn the pricing card I have selected in Figma into React and Tailwind code.”

  Read · get_design_context

• Takes a picture of a selected design so the assistant can see it.

  Captures an image of the current selection in Figma. Images use more tokens than the text outlines, so ask for one when the layout matters.

  Try: “Take a screenshot of the login screen frame so you can check the spacing.”

  Read · get_screenshot

• Lists the layers in a selection as a short outline, or the file's pages.

  Returns a lightweight XML outline of a selection. With no node ID, it lists the top-level pages in the file.

  Try: “List the pages in my onboarding Figma file.”

  Read · get_metadata

• Lists the colors, spacing and text styles used in a selection.

  Shows the variables and styles used in a selection, covering color, spacing and typography.

  Try: “What colors and font sizes does the header in my selected frame use?”

  Read · get_variable_defs

• Searches your design libraries for components, variables and styles.

  Finds components, variables and styles in the libraries your account can reach. Remote setups only.

  Try: “Find the button component in our design library.”

  Read · search_design_system

• Lists the design libraries you subscribe to or can use.

  Shows the design libraries available to your account. Remote setups only.

  Try: “Which design libraries is my Figma account subscribed to?”

  Read · get_libraries

• Shows which design components are already linked to code components.

  Returns the Code Connect links for the component instances you select, so you can see which Figma components map to which code components.

  Try: “Which code component is the Card in my selected Figma instances linked to?”

  Read · get_code_connect_map

• Gathers the component details needed to write links from designs to code.

  Collects the component metadata that a Code Connect template is written from. Remote setups only.

  Try: “Gather the details I need to write a Code Connect template for the Avatar component.”

  Read · get_context_for_code_connect

• Suggests links between design components and code components.

  Proposes Code Connect mappings for your components. The suggestions are not linked until you confirm them.

  Try: “Suggest code component matches for the components on my settings page.”

  Read · get_code_connect_suggestions

• Gets animation keyframes and CSS snippets for a design layer.

  Returns the keyframe data for a layer, with code snippets for CSS or Motion.

  Try: “Get the animation keyframes and CSS for the toast notification in my selection.”

  Read · get_motion_context

• Reads a FigJam diagram as XML, with screenshots of its nodes.

  Converts a FigJam diagram to XML and includes screenshots of its nodes, so the assistant can read the flow.

  Try: “Read the user flow diagram in our FigJam board and summarize the steps.”

  Read · get_figjam

• Downloads exports and source images from a design, up to 20 at a time.

  Downloads exports and original source images for up to 20 nodes per call. Remote setups only.

  Try: “Download the exported PNG icons from the icon frame.”

  Read · download_assets

• Lists the shader effects and fills in your library.

  Shows the shader effects and fills available in your library.

  Try: “What shader effects are in my Figma library?”

  Read · list_shaders

• Lists the shaders used in a file, up to 100.

  Shows the shaders a file uses, up to 100. Remote setups only.

  Try: “Which shaders does the hero banner file use?”

  Read · list_file_shaders

• Reads the source code of one of your own shaders.

  Returns the source code of one of your own shaders.

  Try: “Show me the source of my glow shader.”

  Read · get_shader

• Lists the generative plugins in your library. Remote setups only.

  Shows the generative plugins in your library. Remote setups only.

  Try: “List the generative plugins I have built.”

  Read · list_generative_plugins

• Reads the source files of one of your own generative plugins.

  Returns the source of one of your own generative plugins. Remote setups only.

  Try: “Show me the source of my pattern generator plugin.”

  Read · get_generative_plugin

• Shows which Figma account is signed in, with its plans and seats.

  Returns the signed-in email, the plans and the seats on the account. Remote setups only.

  Try: “Which Figma account am I signed in with, and what seat do I have?”

  Read · whoami

• Creates and edits content in Design, FigJam, Slides and Specs files.

  Makes changes to the content of your Figma files. It can create, edit and inspect layers in Design, FigJam, Slides and Specs files.

  Try: “Add a three-column pricing section below the hero in my landing page file.”

  Write · use_figma

• Sends a live web page into Figma as editable design layers.

  Copies the UI of a running web page into your Figma file as design layers. Only some clients can use it.

  Try: “Send the signup page I have open in the browser into a Figma file as layers.”

  Write · generate_figma_design

• Turns an HTML document, up to 50 MB, into plain design layers.

  Converts a self-contained HTML document of up to 50 MB into plain design layers you can edit in Figma.

  Try: “Convert this self-contained HTML invoice into editable Figma layers.”

  Write · html_to_figma

• Uploads images and SVGs into a Figma file, up to 60 files at once.

  Adds images and SVG files to a Figma file, up to 60 files per call with 10 MB per file.

  Try: “Upload these logo SVGs into the brand file.”

  Write · upload_assets

• Creates an AI image and places it in your file. Uses Figma AI credits.

  Generates an image and places it in a Figma file. Each use spends Figma AI credits.

  Try: “Generate a soft gradient background image and place it on the cover frame.”

  Write · generate_image

• Creates a FigJam diagram from a text description or Mermaid code.

  Builds a FigJam diagram from a description you give it or from Mermaid syntax.

  Try: “Make a FigJam flowchart of our checkout process.”

  Write · generate_diagram

• Creates a blank Design, FigJam or Slides file in your drafts.

  Creates an empty Design, FigJam or Slides file in your drafts.

  Try: “Start a blank Slides file for the Q1 review deck.”

  Write · create_new_file

• Links one Figma component to a code component.

  Maps a Figma component to a code component, so designs point at the real code.

  Try: “Link the Button component in Figma to our Button component in code.”

  Write · add_code_connect_map

• Confirms the suggested links between design and code components.

  Confirms the Code Connect mappings that were suggested, so they are saved.

  Try: “Confirm the component links you suggested for the settings page.”

  Write · send_code_connect_mappings

• Imports a local project as a Make file or a code layer in Figma.

  Imports a local project archive (.zip, .tar.gz or .tgz) into Figma as a Make file or a code layer. Remote setups only.

  Try: “Import my prototype project archive into Figma as a Make file.”

  Write · send_code_to_figma

• Creates a starter shader effect or fill you can edit.

  Creates a starter shader effect or fill that you can then edit. Remote setups only.

  Try: “Create a starter shader for a grainy fill.”

  Write · create_shader

• Replaces the main source file of one of your shaders.

  Replaces the main.ts source of one of your shaders. Remote setups only.

  Try: “Replace the source of my glow shader with the new version.”

  Write · update_shader

• Creates a starter generative plugin.

  Creates a starter generative plugin you can build on. Remote setups only.

  Try: “Create a starter generative plugin for patterned tiles.”

  Write · create_generative_plugin

• Replaces the source files of one of your generative plugins.

  Replaces the source files of one of your generative plugins. Remote setups only.

  Try: “Update my pattern generator plugin with the revised code.”

  Write · update_generative_plugin

• Runs a Weave tool. Uses Weave credits and asks you to confirm the cost first.

  Runs a Figma Weave tool. It uses Weave credits and asks for confirmation of the cost before it runs.

  Try: “Run the background remover Weave tool on this image.”

  Write · weave_run_tool

• Runs a Weave AI model directly. Each run uses credits and needs your approval.

  Runs a Figma Weave model directly. Every run uses Weave credits and needs your approval.

  Try: “Run the upscale model on the product photo, after I approve the cost.”

  Write · weave_run_model

• Uploads an image, video, audio or 3D file to use as Weave input.

  Uploads an image, video, audio or 3D file so a Weave tool or model can use it as input.

  Try: “Upload this product video so I can use it as input for a Weave tool.”

  Write · weave_upload_asset

• Cancels a Weave run that is still in progress.

  Stops a Weave run that has not finished yet.

  Try: “Cancel the Weave run that is still processing my render.”

  Write · weave_cancel_tool_run

• Used by the assistant behind the scenes

  Lists the Weave tools available to run. Needs a paid Weave account.

  Lists the Weave tools you can run. Needs a paid Weave account.

  Try: “Which Weave tools can I run on my account?”

  Read · weave_list_tools

• Finds a Weave AI model by name.

  Looks up a Weave model by its name so it can be run.

  Try: “Find the Weave model called upscale.”

  Read · weave_find_model

• Lists the inputs a Weave tool needs before it can run.

  Returns the inputs a Weave tool expects, so a run can be set up correctly.

  Try: “What inputs does the background remover Weave tool need?”

  Read · weave_get_tool_inputs

• Checks the status and output of a Weave tool run.

  Polls the status and result of a Weave tool run that was started.

  Try: “Has the background removal run finished yet?”

  Read · weave_get_tool_run_output

• Checks the status and output of a Weave model run.

  Polls the status and result of a Weave model run that was started.

  Try: “Is the upscale model run done?”

  Read · weave_get_model_run_output

Watch out for

• It can edit your Figma files

  On the remote server, the write tools create and change content in Design, FigJam and Slides files you can edit. Write tools are not rate limited, so review what the agent plans to change. developers.figma.com

• Some actions spend Figma AI credits

  Image generation and later code-to-Figma prompts use Figma AI credits, and Weave tools use paid Weave credits. Figma's skills ask before using them. developers.figma.com

• It only reaches files you can already open

  Plan, seat and file permissions apply to the signed-in account. developers.figma.com

• Only approved AI apps can connect

  The remote server accepts sign-in only from clients in Figma's catalog and answers others with a 403. A security reviewer on Hacker News suspects this limits sign-in redirect abuse. developers.figma.com

• Community Figma servers had serious security bugs

  The community Framelink server had command injection advisories, fixed in 0.6.3. They do not affect Figma's official server, but check any third-party server you add. github.com

Security advisories

In their words