广告合作
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`.

评论

媒体与设计 分类下的更多 MCP 服务器

Constants

Constants AI

One workspace of tools for Claude and ChatGPT. Connect apps, generate video, music, and ads, and build new tools on demand. Generate and publish ad creative directly from your assistant.

TokElements

TokElements

Build TikTok LIVE overlay widgets from Claude or ChatGPT. Describe a widget and the assistant writes it, previews it with sample events and places it on your TikTok LIVE Studio or OBS overlay.

Lamina — On-brand product photos, video & try-ons

Lamina

Generate on brand product videos from Claude Code (or any assistant) in one line. Lamina turns a brief + your brand kit into finished product photos, video reels, and campaign banners - no prompt engineering; brand guard

Floors.live — Event Floor Plan & Seating Designer

Hakolsound

MCP server for Floors.live — design event floor plans, manage guest lists, and run intelligent seating assignments from Claude, ChatGPT, or Cursor. 32 tools.

Generate Greetings

Generate Greetings

Create greetings and personalized PNG cards for 30 occasions in 15 languages, including Hindi, Greek and Hebrew. Free remote MCP with curated phrases, occasion-matched backgrounds and four styles, including motivational.

广告合作