mcpField
D
designport

designport

本地服务
github.com/CloudCorpRecords媒体与设计02 周前更新

关于 designport

designport 是供需要读取设计文件和处理评论的工作流使用的 Figma REST API 客户端,提供 MCP 服务与命令行工具。它覆盖文件、节点、图像、样式、组件、项目和评论的一组操作。

主要功能

  1. 01获取文件和指定节点
  2. 02将节点渲染为图像
  3. 03列出图像填充、样式和组件
  4. 04浏览团队项目及项目文件
  5. 05读取和发布文件评论

适用场景

  1. 01检查 Figma 文件或选定节点
  2. 02获取节点图像和文件样式
  3. 03浏览团队项目中的文件
  4. 04读取或发布文件评论

MCP 相关

MCP 服务提供调用 Figma REST API 的工具,可访问文件和节点数据、图像、样式、组件、项目及评论。它使用 Figma 个人访问令牌。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"cloudcorprecords-designport": {
"command": "npx",
"args": [
"-y",
"@reneturcios/designport"
]
}
}
}
启动命令npx -y @reneturcios/designport

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npm@reneturcios/designport0.1.0
ocighcr.io/cloudcorprecords/designport:0.1.0

工具

10

收录的工具列表 · 更新于 1 周前

参数类型必填说明
depthnumber否可选:要返回的文档树深度,以层数表示。
versionstring否可选:要检索的文件的特定版本,以其版本 ID 标识。
file_keystring是用于标识要检索文件的 Figma 文件 key。

详细介绍

designport

designport 是一个兼容 Figma REST API 的客户端,以 MCP 服务和小型命令行工具的形式打包。它是针对同一公开上游 API(https://api.figma.com/v1)的独立客户端——并非 Figma 托管的 OAuth 远程 MCP 服务的副本,也未复现该服务的任何 OAuth 工具功能(设计上下文、截图、元数据、变量定义、code-connect、FigJam 或设计系统规则)。

此子集涵盖设计文件的读取:获取文件或特定节点、将节点渲染为图像、列出图像填充、样式和组件、浏览团队项目和项目文件,以及读取或发布文件评论。

身份验证使用 Figma 个人访问令牌,并通过 X-Figma-Token 标头发送。启动服务前,请设置 FIGMA_PERSONAL_ACCESS_TOKEN;未设置该变量时发起的调用会失败,并显示包含该变量名称的错误。可通过 FIGMA_API_BASE 覆盖 API 基础地址。

安装

npx @reneturcios/designport get_file <file_key>
docker run -i ghcr.io/cloudcorprecords/designport

命令行工具

designport get_file <file_key> --depth 2
designport get_file_nodes <file_key> 1:2,3:4
designport get_images <file_key> 1:2 --format png --scale 2
designport get_file_styles <file_key>
designport get_team_projects <team_id>
designport list_project_files <project_id>
designport post_comment <file_key> "Looks good"
designport --version

退出代码:0 表示成功,1 表示 API 错误,2 表示用法错误。

MCP 服务

npx -y @reneturcios/designport mcp
{
  "mcpServers": {
    "designport": {
      "command": "npx",
      "args": ["-y", "@reneturcios/designport", "mcp"],
      "env": { "FIGMA_PERSONAL_ACCESS_TOKEN": "your-token" }
    }
  }
}
工具
工具输入Figma 端点
get_filefile_key、version?、depth?GET /files/{key}
get_file_nodesfile_key、node_ids、depth?、version?GET /files/{key}/nodes
get_imagesfile_key、node_ids、format?、scale?GET /images/{key}
get_image_fillsfile_keyGET /files/{key}/images
get_file_stylesfile_keyGET /files/{key}/styles
get_file_componentsfile_keyGET /files/{key}/components
get_team_projectsteam_idGET /teams/{id}/projects
list_project_filesproject_idGET /projects/{id}/files
get_commentsfile_keyGET /files/{key}/comments
post_commentfile_key、message、client_meta?POST /files/{key}/comments

node_ids 是以逗号分隔的节点 ID 字符串,会作为 API 的 ids 参数发送。post_comment 的可选参数 client_meta 是一个包含 JSON 编码对象的字符串,例如 '{"x":10,"y":20}';该字符串会被解析后作为 API 的 client_meta 对象发送。将其保留为字符串可简化工具架构。

此子集不包括:变量 API、开发资源、库资源和搜索、Webhook、活动日志及付费功能。

开发

npm install
npm run build
npm test

测试完全使用模拟的 fetch 固定数据;不会使用网络,也不会使用真实令牌。

许可证

MIT — 参见 LICENSE。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。