Skip to main content
Glama
enesjakozh

MCP Figma to React Converter

by StudentOfJS
GitHub
TypeScript
MIT License
43
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

MCP Figma 到 React 转换器

这是一个模型上下文协议 (MCP) 服务器，用于将 Figma 设计转换为 React 组件。它提供了一些工具，用于获取 Figma 设计并使用 TypeScript 和 Tailwind CSS 生成 React 组件。

特征

  • 使用 Figma API 获取 Figma 设计
  • 从 Figma 设计中提取组件
  • 使用 TypeScript 生成 React 组件
  • 根据 Figma 样式应用 Tailwind CSS 类
  • 使用辅助功能增强组件
  • 支持 stdio 和 SSE 传输

先决条件

  • Node.js 18 或更高版本
  • Figma API 令牌

安装

  1. 克隆存储库
  2. 安装依赖项：
npm install
  1. 构建项目：
npm run build

配置

您需要将FIGMA_API_TOKEN环境变量设置为您的 Figma API 令牌。您可以从 Figma 帐户设置页面获取个人访问令牌。

用法

作为本地 MCP 服务器运行

FIGMA_API_TOKEN=your_token_here npm start

或者使用显式传输：

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio

作为 HTTP 服务器运行

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse

可用工具

Figma 工具

  • getFigmaProject ：获取 Figma 项目结构
  • getFigmaComponentNodes ：从 Figma 文件中获取组件节点
  • extractFigmaComponents ：从 Figma 文件中提取组件
  • getFigmaComponentSets ：从 Figma 文件获取组件集

React 工具

  • generateReactComponent ：从 Figma 节点生成 React 组件
  • generateComponentLibrary ：从 Figma 组件生成多个 React 组件
  • writeComponentsToFiles ：将生成的组件写入文件
  • figmaToReactWorkflow ：将 Figma 设计转换为 React 组件的完整工作流程

示例工作流程

  1. 获取 Figma 文件密钥（URL 中figma.com/file/后面的字符串）
  2. 使用带有文件键和输出目录的figmaToReactWorkflow工具
  3. 该工具将提取组件，生成 React 代码，并保存文件

发展

对于开发，您可以使用监视模式：

npm run dev

执照

国际学习中心

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

通过从 Figma 文件中提取组件并将其转换为可立即使用的代码，将 Figma 设计转换为具有 TypeScript 和 Tailwind CSS 的 React 组件。

  1. 特征
    1. 先决条件
      1. 安装
        1. 配置
          1. 用法
            1. 作为本地 MCP 服务器运行
            2. 作为 HTTP 服务器运行
          2. 可用工具
            1. Figma 工具
            2. React 工具
          3. 示例工作流程
            1. 发展
              1. 执照

                Related MCP Servers

                • Figma to React Native MCP

                  kailashAppDev
                  -
                  security
                  F
                  license
                  -
                  quality
                  Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
                  Last updated -
                  673
                  5
                  TypeScript

                • FigmaMind MCP Server

                  joao-loker
                  -
                  security
                  F
                  license
                  -
                  quality
                  Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
                  Last updated -
                  TypeScript

                • Figma MCP Server

                  sanjeev23oct
                  A
                  security
                  F
                  license
                  A
                  quality
                  A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
                  Last updated -
                  5
                  1,092
                  2
                  TypeScript

                • MCP Design System Bridge

                  brunonepomuceno
                  -
                  security
                  F
                  license
                  -
                  quality
                  Enables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.
                  Last updated -
                  TypeScript

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/StudentOfJS/mcp-figma-to-react'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server