Figma (Oficial)

- Generate code from selected frames— Ask your assistant to turn a Figma frame into production-ready code for any framework or styling system.
- Extract design context— Pull variables, components, and layout data into your IDE to inform component-based workflows viaget_design_context.
- Write to the canvas— Create and modify native Figma content like frames, components, and auto layout directly from your MCP client.
- Reuse components with Code Connect— Keep generated code consistent with your codebase by linking Figma components to your existing code.
- Fetch variable definitions— Retrieve color, spacing, and typography tokens from a selection usingget_variable_defsfor token-based code generation.
- Generate designs from web pages— Capture or convert a web page into a Figma design directly from your AI coding agent.

[!NOTE] Rate limits apply to Figma MCP server tools that read data from Figma. Some tools, such as those that write to Figma files, are exempt from the rate limits.

Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month.

Users with aDev or Full seaton theProfessional, Organization, or Enterprise planshave per minute rate limits, which follow the same limits as the Tier 1Figma REST API. As with Figma’s REST API, Figma reserves the right to change rate limits.

For the complete set of Figma MCP server docs, see ourdeveloper documentation. By using the Figma MCP server and the related resources (including these skills), you agree to theFigma Developer Terms. These skills are currently available as a Beta feature.

{ "servers": { "figma": { "type": "http", "url": "https://mcp.figma.com/mcp" } } }

[!NOTE] You must haveGitHub Copilotenabled on your account to use MCP in VS Code.

For more information, seeVS Code's official documentation.

{ "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } }

For more information, seeCursor's official documentation.

claude plugin install figma@claude-plugins-official

Learn more about Anthropic'sClaude Code PluginsandAgent Skills.

claude mcp add --transport http figma https://mcp.figma.com/mcp

claude mcp list

For more information, seeAnthropic's official documentation.

gemini extensions install https://github.com/figma/mcp-server-guide

{ "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } }

[!NOTE] Your client won't be able to navigate to the selected URL, but it will extract the node-id that is required for the MCP server to identify which object to return information about.

Figma maintains a list of tools provided by the Figma MCP server in thedeveloper documentation.

You can also learn more about the skills included with the Figma plugin forsupported agentsin theFigma Help Center. Depending on the agent, you may also see the termsconnector,extension, orpower; these include the same set of skills.

- workflow-skills/video-interaction-mapper: Turns UI recordings into annotated Figma storyboards
- workflow-skills/generate-project-plan: Turn a PRD (plus optional codebase grounding) into a FigJam project plan board

[!TIP] Resize the frame in Figma to check that it behaves as expected before generating code.

MCP gives your AI assistant structured Figma data, but your prompt drives the result. Good prompts can:

- Align the result with your framework or styling system
- Follow file structure and naming conventions
- Add code to specific paths (e.g.src/components/ui)
- Add or modify code in existing files instead of creating new ones
- Follow specific layout systems (e.g. grid, flexbox, absolute)

- "Generate iOS SwiftUI code from this frame"
- "Use Chakra UI for this layout"
- "Usesrc/components/uicomponents"
- "Add this tosrc/components/marketing/PricingCard.tsx"
- "Use ourStacklayout component"

Think of prompts like a brief to a teammate. Clear intent leads to better results.

The MCP supports different tools, and each one provides your AI assistant with a different kind of structured context. Sometimes, the assistant doesn't automatically pick the right one, especially as more tools become available. If results are off, try being explicit in your prompt.

- get_design_contextprovides a structuredReact + Tailwindrepresentation of your Figma selection. This is a starting point that your AI assistant can translate into any framework or code style, depending on your prompt.
- get_variable_defsextracts the variables and styles used in your selection (color, spacing, typography, etc). This helps the model reference your tokens directly in the generated code.

For example, if you're getting raw code instead of tokens, try something like:

- "Get the variable names and values used in this frame."

Set project-level guidance to keep output consistent—just like onboarding notes for a new developer. These are things like:

- Preferred layout primitives
- File organization
- Naming patterns
- What not to hardcode

You can provide this in whatever format your MCP client uses for instruction files.

## Figma MCP Integration Rules These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change. ### Required flow (do not skip) 1. Run get_design_context first to fetch the structured representation for the exact node(s). 2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context. 3. Run get_screenshot for a visual reference of the node variant being implemented. 4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation. 5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible. 6. Validate against Figma for 1:1 look and behavior before marking complete. ### Implementation rules - Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style. - Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable. - Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality. - Use the project's color system, typography scale, and spacing tokens consistently. - Respect existing routing, state management, and data‑fetch patterns already adopted in the repo. - Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals. - Validate the final UI against the Figma screenshot for both look and behavior.

--- description: Figma MCP server rules globs: alwaysApply: true --- - The Figma MCP server provides an assets endpoint which can serve image and SVG assets - IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

# MCP Servers ## Figma MCP server rules - The Figma MCP server provides an assets endpoint which can serve image and SVG assets - IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

- IMPORTANT: Always use components from /path_to_your_design_system when possible - Prioritize Figma fidelity to match designs exactly - Avoid hardcoded values, use design tokens from Figma where available - Follow WCAG requirements for accessibility - Add component documentation - Place UI components in /path_to_your_design_system; avoid inline styles unless truly necessary

Adding these once can dramatically reduce the need for repetitive prompting and ensures that teammates or agents consistently follow the same expectations.

Be sure to check your IDE or MCP client's documentation for how to structure rules, and experiment to find what works best for your team. Clear, consistent guidance often leads to better, more reusable code with less back-and-forth.

Break screens into smaller parts (like components or logical chunks) for faster, more reliable results.

Large selections can slow the tools down, cause errors, or result in incomplete responses, especially when there's too much context for the model to process. Instead:
- Generate code for smaller sections or individual components (e.g. Card, Header, Sidebar)
- If it feels slow or stuck, reduce your selection size

This helps keep the context manageable and results more predictable, both for you and for the model.

If something in the output doesn't look quite right, it usually helps to revisit the basics: how the Figma file is structured, how the prompt is written, and what context is being sent. Following the best practices above can make a big difference, and often leads to more consistent, reusable code.

- Fetch project contextdirectly from Make (individual files or the whole project)
- Prompt to use existing code componentsinstead of starting from scratch
- Extend prototypes with real datato validate and productionize designs faster

[!NOTE] This integration leverages the MCPresources capability, which allows your agent to fetch context directly from Make projects. It is available only on clients that support MCP resources.
- Prompt your agent to fetch contextby providing a valid Make link
- Receive a list of available filesfrom your Make project
- Download the files you want to fetchwhen prompted

Goal:Implement a popup component in your production codebase that matches the design and behavior defined in Make.
- Share your Make project link with your agent.
- Prompt the agent:"I want to get the popup component behavior and styles from this Make file and implement it using my popup component."

Your agent will fetch the relevant context from Make and guide you in extending your existing popup component with the prototype's functionality and styles.

See theFigma Brand Usage Guidelinesfor displaying any icons contained in this repo.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.