広告掲載
MCP.so
ログイン
F

Figma MCP Server

@ihiteshsharma

リポジトリ

基本情報

カテゴリ

メディアとデザイン

トランスポート

stdio

作者

ihiteshsharma

投稿者

Hitesh Sharma

Figma MCP Server について

概要はまだありません

#figma#design-tool#ai-assistant

Figma MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "figma": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "-p",
        "9000:9000",
        "--rm",
        "mcp/hs-figma"
      ],
      "env": {
        "NODE_ENV": "production",
        "WEBSOCKET_MODE": "true",
        "WS_PORT": "9000"
      }
    }
  }
}

Figma MCP Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is Figma?

The Figma MCP server connects Claude with Figma, enabling Claude to create and edit designs directly in the Figma desktop app. It is for designers and developers who want to generate or modify Figma designs using natural language prompts.

How to use Figma?

Install the Figma plugin (Plugins > Development > Import plugin from manifest, selecting figma-plugin/manifest.json). Then edit the Claude desktop configuration file (claude_desktop_config.json) to add the Docker-based server command. Finally, open Claude and ask it to create or edit designs in Figma—for example, “Create a login screen in Figma.”

Key features of Figma

  • Creates rectangles, circles, text, and frames
  • Designs buttons, cards, and UI components
  • Arranges layouts for web pages and apps
  • Styles elements with colors, shadows, and effects
  • Exports designs as images

Use cases of Figma

  • Generate a login screen or sign‑up form in Figma
  • Build a landing page layout with header, hero, and footer
  • Design individual UI components like profile cards and navigation buttons
  • Edit existing Figma designs by giving descriptive instructions

よくある質問

1

What are the prerequisites for running the Figma server?

Node.js (>=16), npm, Docker, and the Figma Desktop app are required for the technical setup.

2

How do I connect Claude to Figma?

Install the Figma plugin from the repository, then add the Docker container configuration to your Claude desktop config file. The server runs automatically when Claude starts.

3

What can I create with this tool?

You can create rectangles, circles, text, frames, buttons, cards, complete wireframes, and page layouts, and apply styling like colors, shadows, and effects.

4

What should I do if Claude cannot connect to Figma?

Ensure the Figma plugin is running, the Claude configuration file is correctly set up, and restart both Claude and Figma if needed.

5

Is Docker required to use the Figma server?

Yes. The server is distributed as a Docker image, and the recommended setup runs it with the command `docker run -i -p 9000:9000 --rm mcp/hs-figma`.

コメント

「メディアとデザイン」の他のコンテンツ

QR Planet QR Code MCP Server

qrplanet

QR Planet QR Code MCP Server - Hosted MCP server for QR Planet. Connect AI agents and MCP-compatible clients to create, update, design, route, and analyze dynamic QR Codes using your QR Planet API key.

1

Riddle Quiz Maker

Riddle.com

Creates and manages quizzes, polls, surveys, personality tests, forms, predictors, minigames and leaderboards on Riddle.com – with branching logic, custom design, live stats and embed code.

LinkedIn Ads MCP

AdPlug

LinkedIn Ads MCP server by AdPlug, connecting LinkedIn Ads to Claude, ChatGPT and other MCP-compatible AI assistants. Analyse performance, audiences, creatives and conversions. Generate reports and manage campaigns, budg

Blaze

Blaze

Plan, create and schedule social media content from your AI assistant. Blaze makes on-brand posts, carousels and short videos, writes blog posts and newsletters, and schedules them to Instagram, TikTok, YouTube, LinkedIn

SceneF — California + Hawaii Movie Showtimes

SceneF

Built by movie lovers, for movie lovers and their assistants. SceneF puts every screen in California and Hawaii on one board — 33 regions, from San Francisco's single-screen neighborhood houses and nightly repertory cale

広告掲載