Figma MCP Skill

Overview

This skill provides a comprehensive guide for using the tools available through the Figma MCP (Model-Context-Protocol) server. It enables the agent to interact directly with Figma and FigJam, bridging the gap between design and development workflows.

Use this skill to:

• Generate Figma designs from live web interfaces.
• Extract design tokens, styles, and context from Figma layers.
• Create and manage Code Connect mappings.
• Generate FigJam diagrams from textual descriptions.
• Inspect large design files efficiently.

Prerequisites

• Figma MCP Server: The Figma MCP server must be connected and accessible. Before using any Figma tools, verify the connection. If the tools are not available, guide the user to enable the server within their Figma plugin or IDE extension and restart their MCP client if necessary.

Available Tools

The Figma MCP server exposes the following tools. Refer to the specific workflows below for detailed usage instructions.

• generate_figma_design: (Remote only) Generates design layers from web interfaces into Figma.
• get_design_context: Retrieves design context (e.g., CSS, React, Tailwind) for a selection.
• get_variable_defs: Returns variables and styles (colors, spacing, typography) from a selection.
• get_code_connect_map: Retrieves existing Code Connect mappings.
• add_code_connect_map: Manually adds a Code Connect mapping.
• get_screenshot: Takes a screenshot of a selection.
• create_design_system_rules: Creates a rule file for design-to-code translation.
• get_metadata: Returns a sparse XML representation of large designs.
• get_figjam: Converts FigJam diagrams to XML metadata.
• generate_diagram: Generates FigJam diagrams from Mermaid syntax.
• whoami: (Remote only) Returns the authenticated user's identity.
• get_code_connect_suggestions: Suggests mappings for Code Connect.
• send_code_connect_mappings: Confirms and sends Code Connect mappings.

Workflows and Examples

Workflow: Generating Figma Designs from a Web UI

This workflow uses the generate_figma_design tool to capture a web interface and import it as layers into a Figma file.

Goal: Convert a running web application's UI into an editable Figma design.

Steps:

1. Identify the Target URL: Ask the user for the URL of the web page they want to capture. This can be a local development server (http://localhost:3000) or a live website.
2. Choose Destination: Ask the user whether they want to create a new Figma file, update an existing one, or copy the design to the clipboard.
3. Execute the Tool: Call generate_figma_design with the appropriate parameters.

Example:

• User: "Capture the UI of my local app at http://localhost:5173 and create a new Figma file from it."
• Action:

  generate_figma_design(url="http://localhost:5173", file_destination="new_file")
  

• Result: The tool will open the URL, capture the DOM and styles, and create a new Figma file with the converted layers. A link to the new file is returned.

Workflow: Extracting Design Context

This workflow uses get_design_context to get style information (e.g., CSS, React+Tailwind) for a selected Figma layer.

Goal: Get the code representation of a Figma component's styling.

Steps:

1. Get Figma URL: The user must provide a Figma URL with a node-id pointing to the desired layer.
2. Customize Output (Optional): Ask the user if they need the context in a specific format (e.g., Vue, vanilla CSS). The default is React with Tailwind CSS.
3. Execute the Tool: Call get_design_context with the fileKey and nodeId from the URL.

Example:

• User: "Get the Vue component code for this button: https://figma.com/design/file123/my-app?node-id=10-25"
• Action:
  1. Parse the URL to get fileKey="file123" and nodeId="10:25". Remember to convert the node ID from 10-25 to 10:25.
  2. Call the tool with the customization prompt.

  get_design_context(fileKey="file123", nodeId="10:25", prompt="generate my Figma selection in Vue")
  

• Result: The tool returns a string containing the Vue component code corresponding to the selected Figma layer.

Workflow: Generating a FigJam Diagram

This workflow uses generate_diagram to create a FigJam diagram from a textual description or Mermaid syntax.

Goal: Quickly create a flowchart, sequence, or other diagram in FigJam.

Steps:

1. Understand the Diagram: Ask the user what kind of diagram they want to create (e.g., flowchart, sequence diagram) and for the content or logic it should represent.
2. Formulate Mermaid Syntax: Convert the user's description into the appropriate Mermaid syntax.
3. Execute the Tool: Call generate_diagram with the specified diagramType and the source code.

Example:

• User: "Create a sequence diagram showing a user logging into a website."
• Action:
  1. Formulate the Mermaid syntax for a login sequence.

     sequenceDiagram
         participant User
         participant Browser
         participant Server
         User->>Browser: Enters credentials and clicks login
         Browser->>Server: POST /login (username, password)
         Server-->>Browser: Returns session cookie
         Browser->>User: Renders logged-in dashboard
     

  2. Call the tool.

  generate_diagram(
      diagramType="sequence",
      source="sequenceDiagram
  participant User
  participant Browser
  participant Server
  User->>Browser: Enters credentials and clicks login
  Browser->>Server: POST /login (username, password)
  Server-->>Browser: Returns session cookie
  Browser->>User: Renders logged-in dashboard"
  )
  

• Result: The tool generates an interactive sequence diagram in FigJam and returns a link to it.

Additional Resources

For more detailed information on each tool and its parameters, refer to the official documentation.

• Figma MCP Server Tools and Prompts
• Code Connect Documentation