FM

figma/mcp-server-guide

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

2126 stars 211 forks 质量 70 趋势 44

如何使用Figma MCP服务器指南

概览

Figma MCP 服务器通过向从 Figma 设计文件生成代码的 AI 代理提供重要的设计信息和上下文,直接将 Figma 带入您的工作流程。 速率限制适用于读取 Figma 数据的 Figma MCP 服务器工具。部分工具,如写入 Figma 文件的工具,不受速率限制。入门计划用户或付费计划中拥有视图或协作席位的用户,每月最多可调用 6 次工具。拥有专业、组织或企业套餐开发席位或全席位的用户,按分钟速率限制,遵循与 Tier 1 Figma REST API 相同的限制。与 Figma 的 REST API 类似,Figma 保留更改速率限制的权利。 完整的 Figma MCP 服务器文档,请参见我们的开发者文档。使用 Figma MCP 服务器及相关资源(包括这些技能)即表示您同意 Figma 开发者条款。这些技能目前作为测试版功能提供。

概述(AI 翻译)

Figma MCP 服务器通过向从 Figma 设计文件生成代码的 AI 代理提供重要的设计信息和上下文,直接将 Figma 带入您的工作流程。

[!注] 速率限制适用于从 Figma 读取数据的 Figma MCP 服务器工具。一些工具,如写入 Figma 文件的工具,不受速率限制。

使用Starter计划或拥有View或Collab座位的付费计划用户,每月最多只能调用6次工具。>

拥有专业、组织或企业套餐开发或全席位的用户,有每分钟速率限制,这与第一层Figma REST API相同。与Figma的REST API一样,Figma保留更改速率限制的权利。

完整的 Figma MCP 服务器文档,请参见我们的开发者文档。使用 Figma MCP 服务器及相关资源(包括这些技能)即表示您同意 Figma 开发者条款。这些技能目前作为测试版功能提供。

特色

  • **写入画布(仅限远程服务器):直接从你的MCP客户端创建和修改Figma原生内容。

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

Figma MCP Server Guide

The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.

[!NOTE] Rate limits apply to Figma MCP server tools that read data from Figma. Some tools, such as those that write to Figma files, are exempt from the rate limits.

Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month.

Users with a Dev or Full seat on the Professional, Organization, or Enterprise plans have per minute rate limits, which follow the same limits as the Tier 1 Figma REST API. As with Figma’s REST API, Figma reserves the right to change rate limits.

For the complete set of Figma MCP server docs, see our developer documentation. By using the Figma MCP server and the related resources (including these skills), you agree to the Figma Developer Terms. These skills are currently available as a Beta feature.

Features

  • Write to the canvas (remote server only): Create and modify native Figma content directly from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your Figma files using your design system as the source of truth.

    Note: We’re quickly improving how Figma supports AI agents. The write to canvas feature will eventually be a usage-based paid feature, but is currently available for free during the beta period.

  • Generate placeholder images: When source, captured, or library images are unavailable, agents can use generate_image after asking permission and disclosing Figma AI credit usage. Generated images are uploaded with upload_assets and applied to the design.

  • Generate code from selected frames

    Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.

  • Extract design context

    Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.

  • Code smarter with Code Connect

    Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

    Learn more about Code Connect →

  • Generate Figma designs from web pages (rolling out)

    Capture, import, or convert a web page into a Figma design directly from your AI coding agent.

Installation & Setup

在 GitHub 查看完整 README

安装

This server does not publish a one-line install command.

Open the repository installation guide 新手?先看 mcpskill.org 教程 →

配置

{ "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } }