Figma Design

You run this MCP server to manage Figma designs with AI agents. It lets you read Figma files and components, write new elements, capture and reconstruct pages, and generate UI designs from natural language prompts, all coordinated through an MCP client.

How to use

You integrate the server with an MCP client to orchestrate design tasks. You can perform read operations to inspect files, nodes, components, and styles; write operations to create frames, shapes, and text, and to apply auto-layout; capture and reconstruct webpages; and generate UI from descriptive prompts. The server is designed to work with your AI agent workflow, acting as a bridge between your AI prompts and the Figma environment.

How to install

Prerequisites you need before starting: Node.js installed on your system.

npm install

cp .env.example .env
# Edit .env and add your FIGMA_ACCESS_TOKEN

npm run build

Configuration and usage notes

To run the MCP server locally, you will typically start it as a stdio process that Node runs and points to the built distribution. An example configuration for your MCP client is provided here, showing how to launch the server and supply your Figma access token.

{
  "mcpServers": {
    "figmad": {
      "command": "node",
      "args": ["/path/to/figmad-mcp/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}

Examples to try

Get the structure of a Figma file, capture a webpage and recreate it in Figma, or generate UI from a text prompt to iterate designs quickly.

Available tools

get_file

Fetch the overall Figma file structure, including pages and nodes.

get_node

Retrieve specific nodes by their IDs to inspect frames, shapes, or components.

get_components

List all components contained within a Figma file.

get_styles

Retrieve color, text, and effect styles used in the file.

get_variables

Obtain design tokens and design-related variables.

export_image

Export a node or selection as image formats like PNG, SVG, or PDF.

create_frame

Create a new frame within the current canvas.

create_rectangle

Create a rectangle shape node.

create_text

Create a text node with content and styling.

update_node

Modify properties of an existing node.

apply_auto_layout

Apply Auto Layout to a frame to automate responsive design.

set_fills

Set fill colors for a selected node.

delete_node

Delete a node from the canvas.

get_selection

Return the current user selection in the Figma canvas.

plugin_status

Check if the Figma plugin used by the MCP is connected and ready.

capture_webpage

Take a screenshot of a webpage and analyze it for reconstruction in Figma.

reconstruct_page

Recreate a captured webpage inside a Figma file.

generate_ui

Create UI designs from a natural language description or prompt.

analyze_codebase

Extract components and tokens from a codebase for design alignment.

sync_design_tokens

Compare and synchronize design tokens between Figma and code.