arinspunk/claude-talk-to-figma-mcp

Developer tools

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

674 stars 133 forks 品質 79 トレンド 22MIT

Repository Install

arinspunk/claude-talk-to-figma-mcp は、https://github.com/arinspunk/claude-talk-to-figma-mcp. からインポートされたMCPサーバー候補です。

概要

arinspunk/claude-talk-to-figma-mcp は、https://github.com/arinspunk/claude-talk-to-figma-mcp. からインポートされたMCPサーバー候補です。

概要（AI 翻訳）

AIエージェントがFigmaのデザインを読み、分析し、修正できるようにしましょう。

あなたのお気に入りのエージェントティックツールと連携します:

クロードデスクトップ
クロード・コード
カーソル
反重力
ウィンドサーフィン
VS Code + GitHub Copilot
クライン
ルーコード

👩🏽 💻 誰のためか

UX/UIチーム

繰り返しのデザイン作業を自動化し、手作業なしでブランドの一貫性を維持できる:

自動アクセシビリティ監査 - コントラスト問題を数秒で検出・修正
一括スタイル更新 - 単一のコマンドで文書全体の色、タイポグラフィ、または間隔を変更する
視覚的階層分析 - デザイン構造に対する即時フィードバックを得る

開発者

設計から直接本番環境のコードを生成する:

React/Vue/SwiftUIコンポーネント - 設計からコードまで一歩で
デザイントークンを使ったコード - デザインと開発を同期させる
ハンドオフ摩擦の削減 - 設計チームとのやり取りを減らす

主な利点:Figmaの公式MCPがDev Modeライセンスを必要とするのに対し、このMCPは**どのFigmaアカウント(無料アカウントでも)で動作します。

💡 実際のユースケース

アクセシビリティ:

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

README

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

Claude AI Agents Talk to Figma MCP

Enable your AI agents to read, analyze, and modify Figma designs.

Works with your favorite agentic tools:

👩🏽‍💻 Who it’s for

UX/UI Teams

Automate repetitive design tasks and maintain brand consistency without manual effort:

Automated accessibility audits - Detect and fix contrast issues in seconds
Bulk style updates - Change colors, typography, or spacing across the entire document with a single command
Visual hierarchy analysis - Get instant feedback on your design structure

Developers

Generate production-ready code directly from designs:

React/Vue/SwiftUI components - From design to code in one step
Code with design tokens - Keep design and development in sync
Reduce handoff friction - Fewer back-and-forth iterations with the design team

Key advantage: Unlike Figma’s official MCP which requires a Dev Mode license, this MCP works with any Figma account (even free ones).

💡 Real-world use cases

Accessibility:

“Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA”

Rebranding:

“Change #FF6B6B to #E63946 in all primary buttons throughout the document”

Design analysis:

“Analyze the visual hierarchy of this screen and suggest improvements based on design principles”

Developer handoff:

“Generate the React component for ‘CardProduct’ including PropTypes and styles in CSS modules”

⚡️ Quick installation

Setup: 5 minutes | First automation: 2 minutes

Requirements

Node.js installed
Figma Desktop
AI client:
- Claude Desktop
- Claude Code
- Cursor
- Antigravity
- Windsurf
- VS Code + GitHub Copilot
- Cline
- Roo Code

Step 1: Install and start the websocket

Enables the Agent to send commands to Figma.

GitHub で README 全文を見る

インストール

npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server

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

設定

{
    "mcpServers": {
      "ClaudeTalkToFigma": {
        "command": "npx",
        "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
      }
    }
  }