Figma Pilot

Bridges AI agents with Figma to create and modify designs via natural language, coordinating actions through an MCP server.

typescript

1

GitHub Stars

typescript

Language

4 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "youware-labs-figma-pilot": {
      "command": "npx",
      "args": [
        "@youware-labs/figma-pilot-mcp"
      ]
    }
  }
}

You connect an MCP client to the Figma pilot MCP to drive design work in Figma using natural language. This bridge lets you build, modify, and inspect Figma files through AI prompts and an MCP-enabled workflow, simplifying collaborative design tasks and rapid prototyping.

How to use

You interact with the MCP server through your MCP client by issuing high‑level design commands to your AI agent. The agent talks to the MCP server, which forwards actions to the Figma plugin, enabling you to create elements, modify properties, query selections, and export visuals for review. Use straightforward prompts that describe the end state you want in Figma, and let the agent handle the sequence of actions to achieve it.

How to install

Prerequisites: you need a runtime for MCP and the ability to run commands from your terminal. The setup relies on Bun for building and running the MCP server, as shown in the commands below.

# One‑line install (local)
git clone https://github.com/youware-labs/figma-pilot.git && cd figma-pilot && ./scripts/install.sh

Configure your MCP client

Configure Claude Code or Gemini CLI to connect to the MCP server. The following configurations are shown as examples you can apply in your environment.

{
  "mcpServers": {
    "figma-pilot": {
      "command": "npx",
      "args": ["@youware-labs/figma-pilot-mcp"]
    }
  }
}

Available tools

figma_status

Check the current connection status of the MCP bridge to the Figma plugin.

figma_selection

Retrieve the current selection within the Figma document.

figma_query

Query a design element by ID or name to inspect or modify properties.

figma_create

Create new elements such as frames, text blocks, or shapes.

figma_modify

Modify properties of existing elements, including position, size, color, and text.

figma_delete

Delete elements from the design.

figma_append

Move elements into a container or group.

figma_list_components

List available components within the project.

figma_instantiate

Create an instance of a component.

figma_to_component

Convert a selection into a reusable component.

figma_create_variants

Create multiple variants of a component for different states.

figma_ensure_accessibility

Check accessibility and apply fixes to meet accessibility standards.

figma_audit_accessibility

Audit accessibility without applying fixes.

figma_bind_token

Bind a design token to a node for consistent styling.

figma_create_token

Create a new design token for palette management.

figma_sync_tokens

Import or export design tokens to synchronize styles.

figma_export

Export the current view or selection as an image for review.