abhinavagr/figma-claude-mcp

Developer tools

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。原文を見る

6 stars 4 forks 品質 71 トレンド 14MIT

Repository Install

Create Figma design just by using prompts on Claude

概要

Connect to and design, inspect, and manage your files through natural language. This connects Claude to your Figma file so you can design with prompts. Just describe what you want — Claude will create it directly in Figma. - Create UI components and full screens by typing what you need - Integrate and manage your design system (tokens, variables, styles) - Inspect, audit, and debug your Figma files through conversation This guide connects to using the plugin. Open your terminal and check if Node.js is installed: If you see v18.x.x or higher, skip to Step 1. If not: 1. Go to nodejs.org 2. Download and install 3. Verify with node -v This generates dist/local.js — the file Claude Desktop will run.

README

以下は原文 README の抜粋です。原文を見る。

Figma Console MCP Server

Connect Claude Desktop to Figma Desktop and design, inspect, and manage your files through natural language.

What is this?

This connects Claude to your Figma file so you can design with prompts. Just describe what you want — Claude will create it directly in Figma.

Create UI components and full screens by typing what you need
Integrate and manage your design system (tokens, variables, styles)
Inspect, audit, and debug your Figma files through conversation

What Claude Can Do With Your Figma File

Create & Design

Create a login card with email and password fields and a Sign In button
Design a navbar with logo, links, and a user avatar on the right
Build a settings page with a sidebar and form fields in the main area
Create a modal dialog with a header, content area, and Save/Cancel buttons

Manage Design Tokens

Create a "Brand Colors" token collection with Light and Dark modes
Add a primary color variable — #3B82F6 for Light, #60A5FA for Dark
Rename the "Default" mode to "Light Theme"
Add a "High Contrast" mode to my existing token collection

Analyze & Audit

Audit my design system and show me a health score
Compare the Button component in Figma against our React implementation
Run an accessibility lint on this frame and flag WCAG issues
Browse the design tokens interactively

Setup Guide — Claude Desktop + Figma Desktop

This guide connects Claude Desktop to Figma Desktop using the Figma Claude Connect plugin.

Connection architecture:

Claude Desktop
      ↓
Local MCP Server (Node)
      ↓ WebSocket
Figma Claude Connect Plugin
      ↓
Figma API

Prerequisites

Tool	Requirement
Node.js	Version 18+
Git	Installed
Figma	Desktop app
Claude	Claude Desktop

Step 0 — Install Node.js (If Needed)

Open your terminal and check if Node.js is installed:

node -v

If you see v18.x.x or higher, skip to Step 1.

If not:

Go to nodejs.org
Download and install Node.js LTS
Verify with node -v

Step 1 — Clone the Repository

Open your terminal and run:

git clone https://github.com/AbhinavAgr/figma-claude-MCP.git

then

cd figma-claude-mcp

Step 2 — Install Dependencies

In the same terminal, run:

npm install

Step 3 — Build the Local MCP Server

Then run:

npm run build:local

GitHub で README 全文を見る

インストール

This server does not publish a one-line install command.

Open the repository installation guide MCP 初心者？mcpskill.org のガイドから始めましょう →

設定

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": [
        "/Users/YOUR_USERNAME/figma-claude-mcp/dist/local.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN"
      }
    }
  }
}