Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents

Name: Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents
Author: tothienbao6a0

@tothienbao6a0

代码仓库主页

关于 Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents

MCP server to generate design systems, tokens, and provide Figma layout information to AI coding agents like Cursor

#figma #design-systems #ai-agents

基本信息

分类

媒体与设计

许可证

MIT

运行时

node

传输方式

stdio

发布者

tothienbao6a0

提交者

Bao To

配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "npx",
      "args": [
        "-y",
        "@tothienbao6a0/figma-mcp-server",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

工具

When the nodeId cannot be obtained, obtain the layout information about the entire Figma file

Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes

Retrieves all variables and variable collections from a Figma file. Variables are different from design tokens - they are Figma's dynamic values system that can store colors, numbers, strings, and booleans with different modes/themes.

Extracts design tokens (colors, typography, spacing, effects) from a Figma file and saves them as a JSON file.

Generates a comprehensive set of Markdown documents detailing the design system from a Figma file into a specified directory.

Compare design tokens between two Figma files or token sets to identify changes, additions, and removals.

Validate design tokens against design system best practices and rules.

Check design tokens for accessibility compliance issues (contrast, text sizes, etc.).

Convert design tokens to different formats (Tailwind, CSS Variables, Style Dictionary, Figma Tokens).

Compare Figma design tokens with code tokens to identify sync issues between design and implementation.

Analyzes Figma components to understand structure, variants, and relationships for intelligent AI-driven code generation. This tool helps AI agents understand component semantics, props, variants, and implementation patterns.

概览

What is Figma Mcp By Bao To?

Figma Mcp By Bao To is an advanced Model Context Protocol server that extracts design systems, analyzes components, and maintains design-code consistency from Figma files. Built for AI agents like Cursor and Claude, it transforms static Figma designs into comprehensive, accessible design tokens and documentation.

How to use Figma Mcp By Bao To?

Install the npm package @tothienbao6a0/figma-mcp-server and configure your AI client to use it. Then paste a Figma file link in your IDE’s chat and ask the AI agent to implement the design, generate tokens, or create documentation. The server fetches and simplifies the relevant Figma metadata automatically.

Key features of Figma Mcp By Bao To

Component intelligence: variant analysis, smart props, and atomic design classification.
Design token extraction: colors, typography, spacing, effects in multiple formats.
Automated WCAG accessibility checks with real contrast calculations.
Design system documentation generation with component examples.
Version comparison, validation, and design-code sync checking.
Multi-format token migration: JSON, CSS, Tailwind, Style Dictionary, Figma Tokens.

Use cases of Figma Mcp By Bao To

Implement UI components in an IDE using live Figma design data.
Generate a complete set of design tokens and export them to your codebase.
Create living design system documentation directly from a Figma file.
Compare design token changes between file versions for migration planning.
Validate design system consistency and accessibility before production.

FAQ from Figma Mcp By Bao To

How is this different from other Figma MCP servers?

It is a fork of the original Framelink Figma MCP server, building upon its foundation to offer enhanced capabilities for AI-driven design workflows. It is the only MCP that automatically generates rich, multi‑faceted design system documentation from a Figma link.

Do I need a Figma Enterprise plan to use all features?

No. Only the get_figma_variables tool requires a Figma Enterprise plan. Non‑enterprise users can still extract variable‑like structures by calling generate_design_tokens with includeDeducedVariables: true.

How does this server improve AI accuracy?

It simplifies and translates responses from the Figma API so that only the most relevant layout and styling information is provided to the AI model. Reducing the amount of context helps make the AI more accurate and responses more relevant.

Which AI tools are supported?

The server works with Cursor, Claude, and other AI‑powered coding tools that support the Model Context Protocol (MCP).

What export formats are available for design tokens?

Tokens can be exported as JSON, CSS Variables, Tailwind, Style Dictionary, and Figma Tokens.

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

YouTube MCP Server

ZubeidHendricks

MCP Server for YouTube API, enabling video management, Shorts creation, and advanced analytics

544

Weather API MCP Server

TuanKiri

A lightweight Model Context Protocol (MCP) server that enables AI assistants like Claude to retrieve and interpret real-time weather data. Discuss on Hacker News:

247