Figma

Created By
figma-mcp-servera year ago
Overview

What is Figma MCP Server?

Figma MCP Server is a tool that connects Claude with Figma, enabling users to create and edit designs directly in Figma using natural language commands.

How to use Figma MCP Server?

To use Figma MCP Server, install the Figma plugin, configure the server in Claude, and then use Claude to create or edit designs by describing them.

Key features of Figma MCP Server?

  • Create new designs by describing them to Claude
  • Edit existing designs with simple instructions
  • Generate wireframes and UI elements
  • Export designs as images

Use cases of Figma MCP Server?

  1. Creating a login screen in Figma
  2. Designing UI components like buttons and cards
  3. Generating complete app layouts

FAQ from Figma MCP Server?

  • Can I use Figma MCP Server without the Figma Desktop app?

No, the Figma Desktop app is required to use this tool.

  • Is there a cost to use Figma MCP Server?

Figma MCP Server is free to use, but you need a Figma account.

  • What if Claude can't connect to Figma?

Ensure the Figma plugin is running and the configuration is set up correctly.

Server Config

{
  "mcpServers": {
    "figma": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "-p",
        "9000:9000",
        "--rm",
        "mcp/hs-figma"
      ],
      "env": {
        "NODE_ENV": "production",
        "WEBSOCKET_MODE": "true",
        "WS_PORT": "9000"
      }
    }
  }
}
Project Info
Created At
a year ago
Updated At
a year ago
Author Name
figma-mcp-server
Star
-
Language
-
License
-

Recommend Servers

View All
//beforeyouship — LLM Cost Modeling From Your Editor
@Indiegoing

Query realistic LLM cost models without leaving your editor. beforeyouship models the **true monthly cost** of an LLM app architecture — retries, prompt caching, batch discounts, infra overhead, and 3×/10× growth — across GPT-5.x, Claude, Gemini, DeepSeek, and more. Not a token calculator: a planning tool for the design phase, before you commit to a stack. **No API key needed to try it** — demo mode covers the six free-tier models. A Pro key from [beforeyouship.dev](https://beforeyouship.dev) unlocks the full 18-model catalog. ## What you can ask - "How much will a RAG chatbot cost at 10,000 requests/day?" - "Compare Claude Haiku vs Gemini Flash pricing for my workload" - "What's the cheapest model for a multi-step agent at scale?" - "Show me current per-token prices for Anthropic models" ## Tools ### `estimate_cost` Full cost model for an architecture at a given usage level. Returns Naive / Realistic / Worst Case monthly cost per model, 3×/10× growth scenarios, and an opinionated recommendation with reasoning. ### `get_model_prices` Current per-1M-token pricing — input, output, cached input, batch — with context windows and staleness metadata. ### `list_archetypes` Seven preset architecture patterns (simple chatbot, chatbot with history, RAG pipeline, multi-model router, coding assistant, document processor, multi-step agent) used as starting points for estimates. ## Setup **Claude Code:** ​```bash claude mcp add --transport http beforeyouship https://beforeyouship.dev/api/mcp ​``` **Cursor / other clients** — add a remote server: ​```json { "mcpServers": { "beforeyouship": { "type": "streamable-http", "url": "https://beforeyouship.dev/api/mcp" } } } ​``` Add an `Authorization: Bearer bys_...` header with a Pro key for the full catalog. ## Try it > Estimate the monthly cost of a RAG pipeline at 10,000 requests/day

13 hours ago
Shippo
@Shippo

21 hours ago