diff --git a/README.md b/README.md index 9cdbf3d..591df93 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ + +> [!NOTE] +> 本文档由 WeHub 基于上游 README 翻译整理,属于社区翻译,非官方中文文档。 +> [English](./README.en.md) · [原始项目](https://github.com/GLips/Figma-Context-MCP) · [上游 README](https://github.com/GLips/Figma-Context-MCP/blob/HEAD/README.md) +> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。 + @@ -7,9 +13,9 @@

Framelink MCP for Figma

-

Give your coding agent access to your Figma data.
Implement designs in any framework in one-shot.

+

让你的编程智能体访问 Figma 数据。
一次性在任何框架中实现设计。

- weekly downloads + 每周下载量 MIT License @@ -25,36 +31,36 @@
-Give [Cursor](https://cursor.sh/) and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) server. +通过此 [Model Context Protocol](https://modelcontextprotocol.io/introduction)(MCP)服务器,让 [Cursor](https://cursor.sh/)) 及其他 AI 驱动的编程工具访问你的 Figma 文件。 -When Cursor has access to Figma design data, it's **way** better at one-shotting designs accurately than alternative approaches like pasting screenshots. +当 Cursor 能够访问 Figma 设计数据时,相比粘贴截图等替代方案,它在一次性(one-shot)准确实现设计方面**好得多**。 -

See quickstart instructions →

+

查看快速入门说明 →

-## Demo +## 演示 -[Watch a demo of building a UI in Cursor with Figma design data](https://youtu.be/6G9yb-LrEqg) +[观看在 Cursor 中使用 Figma 设计数据构建 UI 的演示](https://youtu.be/6G9yb-LrEqg) -[![Watch the video](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg) +[![观看视频](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg) -## How it works +## 工作原理 -1. Open your IDE's chat (e.g. agent mode in Cursor). -2. Paste a link to a Figma file, frame, or group. -3. Ask Cursor to do something with the Figma file—e.g. implement the design. -4. Cursor will fetch the relevant metadata from Figma and use it to write your code. +1. 打开 IDE 的聊天界面(例如 Cursor 中的 agent 模式)。 +2. 粘贴 Figma 文件、画框(frame)或群组(group)的链接。 +3. 让 Cursor 对 Figma 文件执行操作——例如实现该设计。 +4. Cursor 将从 Figma 获取相关元数据,并用其编写你的代码。 -This MCP server is specifically designed for use with Cursor. Before responding with context from the [Figma API](https://www.figma.com/developers/api), it simplifies and translates the response so only the most relevant layout and styling information is provided to the model. +此 MCP 服务器专为与 Cursor 配合使用而设计。在基于 [Figma API](https://www.figma.com/developers/api), 的上下文进行响应之前,它会简化并转换响应,从而仅向模型提供最相关的布局与样式信息。 -Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant. +减少提供给模型的上下文量,有助于提高 AI 的准确性并使响应更加贴合需求。 -## Getting Started +## 快速入门 -Many code editors and other AI clients use a configuration file to manage MCP servers. +许多代码编辑器及其他 AI 客户端都使用配置文件来管理 MCP 服务器。 -The `figma-developer-mcp` server can be configured by adding the following to your configuration file. +可通过在配置文件中添加以下内容来配置 `figma-developer-mcp` 服务器。 -> NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found [here](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). +> 注意:你需要创建 Figma 访问令牌(access token)才能使用此服务器。有关如何创建 Figma API 访问令牌的说明请参阅[此处](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). ### MacOS / Linux @@ -82,14 +88,14 @@ The `figma-developer-mcp` server can be configured by adding the following to yo } ``` -Or you can set `FIGMA_API_KEY` and `PORT` in the `env` field. +或者,你可以在 `env` 字段中设置 `FIGMA_API_KEY` 和 `PORT`。 -If you need more information on how to configure the Framelink MCP for Figma, see the [Framelink docs](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme). +如需了解更多关于如何配置 Framelink MCP for Figma 的信息,请参阅 [Framelink 文档](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme). -## Star History +## Star 历史 -Star History Chart +Star History 图表 -## Learn More +## 了解更多 -The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the [Framelink](https://framelink.ai?utm_source=github&utm_medium=referral&utm_campaign=readme) site. +Framelink MCP for Figma 简洁而强大。访问 [Framelink](https://framelink.ai?utm_source=github&utm_medium=referral&utm_campaign=readme) 网站了解更多,以充分发挥其作用。