Figma To Code Mcp By Bao To

Created By
tothienbao6a0a year ago
THE BEST AND ONLY FIGMA MCP SERVER YOU WILL NEED While other Figma MCP servers can provide basic node information, Figma MCP Server by Bao To offers superior capabilities for understanding and utilizing your design system: - Comprehensive Design Data Extraction (get_figma_data): Fetches detailed information about your Figma files or specific nodes, simplifying complex Figma structures into a more digestible format for AI. - Precise Image Downloads (download_figma_images): Allows targeted downloading of specific image assets (SVGs, PNGs) from your Figma files. - ⭐ Automated Design Token Generation (generate_design_tokens): - Extracts crucial design tokens (colors, typography, spacing, effects) directly from your Figma file. Outputs a structured JSON file, ready to be integrated into your development workflow or used by AI to ensure design consistency. - ⭐ Intelligent Design System Documentation (generate_design_system_doc): - Goes beyond simple node data by generating comprehensive, multi-file Markdown documentation for your entire design system as defined in Figma. - Creates an organized structure including an overview, detailed pages for global styles (colors, typography, effects, layout), and component/node information per Figma canvas. This tool was a key motivation for this fork. By generating this comprehensive design system documentation directly within your project repository, it provides AI agents with a deep, contextual understanding of your project's specific design language. This empowers them to understand not just individual elements but the relationships and rules of your design system, leading to more accurate, consistent, and contextually aware UI implementation and freeing you from manual design interpretation. These advanced features make this server particularly powerful for tasks requiring a deep understanding of the design system, such as generating themed components or ensuring adherence to brand guidelines during UI development. This is a fork of Framelink's MCP server.
Overview

What is Figma MCP Server by Bao To?

Figma MCP Server by Bao To is a powerful tool designed to enhance AI-driven design workflows by providing direct access to Figma design data, enabling the generation of design systems and tokens for seamless UI implementation.

How to use Figma MCP Server by Bao To?

To use this server, configure your AI coding client (like Cursor) to utilize the Figma MCP Server by Bao To. You can then paste a link to a Figma file and request specific actions such as extracting design data or generating design tokens.

Key features of Figma MCP Server by Bao To?

  • Comprehensive Design Data Extraction: Fetches detailed information about Figma files or specific nodes.
  • Precise Image Downloads: Allows targeted downloading of specific image assets (SVGs, PNGs).
  • Automated Design Token Generation: Extracts design tokens (colors, typography, spacing) and outputs them in a structured JSON format.
  • Intelligent Design System Documentation: Generates comprehensive Markdown documentation for the entire design system defined in Figma.

Use cases of Figma MCP Server by Bao To?

  1. Extracting design data for AI agents to implement UI accurately.
  2. Generating design tokens for consistent styling across applications.
  3. Creating detailed documentation for design systems to facilitate collaboration and adherence to brand guidelines.

FAQ from Figma MCP Server by Bao To?

  • Can this server handle all types of Figma files?

Yes, it can process various Figma files and nodes to extract relevant design data.

  • Is there a cost associated with using this server?

No, the Figma MCP Server by Bao To is free to use for everyone.

  • How do I set up the server?

You can set it up by adding the server configuration to your AI coding client and providing your Figma API key.

Server Config

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "npx",
      "args": [
        "-y",
        "@tothienbao6a0/figma-mcp-server",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}
Project Info
Created At
a year ago
Updated At
a year ago
Author Name
tothienbao6a0
Star
-
Language
-
License
-

Recommend Servers

View All
Payai X402 Tools

20 hours ago
Meteomatics

16 hours ago
GovQL
@Alex Stout

# govql-mcp-server An MCP (Model Context Protocol) server for [GovQL](https://govql.us) — gives AI clients like Claude Desktop, Claude Code, and Cursor direct access to the US Congressional GraphQL API at [api.govql.us/graphql](https://api.govql.us/graphql) without bespoke HTTP wiring. For the design rationale (why FastMCP-Python, the passthrough+curated philosophy, roadmap through v0.4), see [design.md](https://github.com/govql/govql/blob/main/mcp-server/docs/design.md). ## What you can do with it Ask an agent questions like: - *"How did Vermont's two senators vote on the most recent nomination?"* - *"Which legislators in the 118th Congress switched parties during their service?"* - *"Compare Senator Sanders' voting record to Senator Murkowski's on cloture votes in the most recent Congress."* The agent picks the right tool, writes the GraphQL query against the live schema, and parses the response — no manual API wrangling. ## Install The server runs as a per-client subprocess over stdio. Pick your client: ### Claude Desktop Edit `claude_desktop_config.json` (Settings → Developer → Edit Config): ```json { "mcpServers": { "govql": { "command": "uvx", "args": ["govql-mcp-server"] } } } ``` Restart Claude Desktop. The `govql` tools appear in the tools panel. ### Claude Code Add to `.mcp.json` in your project (or `~/.mcp.json` for global): ```json { "mcpServers": { "govql": { "command": "uvx", "args": ["govql-mcp-server"] } } } ``` ### Cursor Settings → MCP → Add Server. Use the same `command` / `args` as above. ### Other clients Any MCP-compatible client that supports stdio servers will work. The command is `uvx govql-mcp-server` with no required arguments. ## Tools | Tool | Purpose | |---|---| | `execute_graphql` | Run any GraphQL query against the GovQL endpoint. Returns the result plus an `last_ingest` timestamp so the agent can reason about data freshness. | | `list_types` | Returns the names and kinds of every type in the GovQL schema. Optional `kind` filter (`"OBJECT"`, `"INPUT_OBJECT"`, `"ENUM"`, etc.) to narrow further. Start here when you don't know what's queryable. | | `describe_type` | Returns one type's full details — fields, arg signatures, input fields, enum values. Call after `list_types` to learn the shape of a specific type before writing a query. | ## Configuration All env vars are optional — the package is zero-config for end users. | Env var | Default | Purpose | |---|---|---| | `GOVQL_ENDPOINT` | `https://api.govql.us/graphql` | Endpoint to query. Override to point at a local dev stack. | | `GOVQL_TIMEOUT_MS` | `30000` | Per-request HTTP timeout. | | `LOG_LEVEL` | `INFO` | Logging level. Logs go to stderr only (stdout is reserved for the MCP transport). | ## Limits (enforced by the upstream API) - Max query depth: 10 - Max query complexity: ~10 billion points (`first: N` multiplies child cost by N — keep page sizes reasonable on deeply nested queries) - Rate limit: 100 requests / 60 s per source IP A depth or complexity violation surfaces as a GraphQL `errors` entry in the tool response so the agent can adjust and retry. ## Data freshness Every `execute_graphql` response includes a `last_ingest` ISO timestamp. Vote data refreshes hourly; legislator data refreshes daily. ## Status Version 0.1.0 ships three foundational tools: a GraphQL passthrough (`execute_graphql`) and two narrow schema-discovery tools (`list_types`, `describe_type`). Curated higher-level tools (`find_legislator`, `get_voting_record`, `compare_voters`, etc.) are planned for subsequent releases — see [design.md](https://github.com/govql/govql/blob/main/mcp-server/docs/design.md) for the roadmap. ## Links - [GovQL project site](https://govql.us) - [GraphQL API](https://api.govql.us/graphql) - [Source / issues](https://github.com/govql/govql)

2 hours ago
Voyei

a day ago