Figma

Name: Figma
Author: ihiteshsharma

@ihiteshsharma

リポジトリ

Figma について

概要はまだありません

#figma #design-tool #ai-assistant

基本情報

カテゴリ

メディアとデザイン

トランスポート

stdio

公開者

ihiteshsharma

投稿者

Hitesh Sharma

設定

以下の設定を使って、このサーバーを 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"
      }
    }
  }
}

ツール

ツールは検出されませんでした

ツールは 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

FAQ from Figma

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.

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.

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.

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.

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.

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

MiniMax MCP

MiniMax-AI

Official MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.

1.5K