Tools
Available tools
These are the tools that are currently available in Figma MCP, with some examples of how they work and what you can expect from the output. To use them, you don’t have to specifically mention a tool if you include the right wording in your prompt, for example, “add this component from my selection” or “get the color tokens of my selection”.
get_code
As the name suggests, this will get the code from your current selection or the link you shared with your prompt. By default, it will generate React + Tailwind code, but if your project is already using a different framework, it should automatically pick that up and get the code for the right language and framework.
If you’re using Figma MCP in Claude, for example, and want to create a small code snippet, there it might be best to include the language and framework in the prompt, for example: “Create my current Figma selection in Swift UI”.
You can improve your prompt by referencing existing code in your codebase, for example, “Create the new screen from my Figma selection and use existing components from ui/components and all currently defined design tokens”.
If you are using the remote Figma MCP server, you have to paste the Figma link. You can say “use my current selection” in that case.
When using get_code, there are some limitations: you can only select one frame at once, which can make your prompt limited, but having a large or complex selection can make your output less accurate.
You can, however, combine multiple selections in a single prompt. Here, you will have to add individual links to the frames. For example, I want to create an onboarding that has 3 cards you can swipe through, but only the first card is visible. Here, you could use a prompt like:
“Generate this onboarding view with swipeable cards, the first one is visible by default.
Card 1: <figma link>
Card 2: <figma link>
Card 3: <figma link>”
You can also use this for other interactions like going to a detail after clicking a button, like this:
“Create the home page <figma link> in plain HTML/CSS and open this modal <figma link> when clicking on the “Pricing details” button”.
get_variable_defs
This will return all variables and styles that have been used in your current selection. This can be helpful to implement new design tokens in your code base that you haven’t added before.
You can ask for:
- What color variables are used in my selection?
- Show all spacing tokens used in my selection and add the ones that are not yet in the code
This only works with the local version of Figma MCP.
get_screenshot
This doesn’t need a lot of explanation. This takes a screenshot of your current selection. By itself, it might not do a lot, but it’s great to give additional context with your prompt to show how the code should be visualized.
You likely don’t need to prompt this yourself as an agent will do it automatically after using get_code.
You can turn this off if you want to reduce your token usage, but your results will likely be worse since the screenshots are very valuable context.
get_metadata
The metadata tools are a bit different from get_code they will create a simplified XML representation of your selection that only includes basic properties like layer IDs, names, types, position, and sizes.
This is especially useful for large selections where get_code might need too much context. get_metadata can break it down and will allow the Agent to make smaller get_code requests.
You can use get_metadata also on multiple selections or for an entire page if you have nothing selected.
create_design_system_rules
Also a straightforward tool name, this one will create a rule file that will give your Agent the right context when creating code from your designs. It will generate multiple rules on token naming convention, code structure, component templates, which frameworks to use, how the asset folder should be structured, how icons should be used, …
This will already create a great first version based on your existing code base, but make sure to edit the rules file to fit even better to your expectations. This will improve the quality of your output and will give you less rework (or token usage) afterwards.
Make sure you save the rules in the right folder, so they can get accessed by your Agent when generating code. This can be in rules/ or instructions/ depending on the tool you are using.
get_code_connect_map
This will look for the mapping between a Figma component ID and the code component that matches it in your codebase. It will return an object with codeConnectSrc, which is the location of the component in your code base, and codeConnectName, as you might have guessed, the name of the component in your codebase.
You probably won’t have to use this tool on its own as an Agent might call it automatically after get_code to see which Figma components match your code components to implement the correct ones. This might greatly improve your code output, so it might be worth looking into. More on Code Connect in the Components section.