SuperAPI AI 工具集

figma

设计与创作

查看项目

更新于 10-22 19:40

技能介绍

用途:Figma Code Connect CLI 用于在命令行环境中将 Figma 设计组件与代码组件建立连接关系,管理 Code Connect 文件的创建、解析、发布与取消发布,帮助团队在设计与代码之间维护对应关系。

主要能力:

  1. 交互式初始化:figma connect 提供项目内 Code Connect 的交互式设置。
  2. 创建连接文件:figma connect create <figma-url> 为指定 Figma 组件创建 Code Connect 文件。
  3. 发布与预览:figma connect publish 发布所有 Code Connect 文件到 Figma;加 --dry-run 可预览将要发布的内容。
  4. 取消发布:figma connect unpublish 移除已发布的 Code Connect 数据。
  5. 解析:figma connect parse 解析项目中的 Code Connect 文件,可通过 --dir <path> 指定目录。
  6. 全局参数:--dir <path> 指定项目目录,--config <path> 指定配置文件路径,--verbose 开启详细输出。

使用方式:先安装工具,可全局安装 npm i -g @figma/code-connect,或作为开发依赖 npm i -D @figma/code-connect 后使用 npx figma 调用。认证方面需设置环境变量 FIGMA_ACCESS_TOKEN,其值为 Figma 账户设置中生成的个人访问令牌。随后按需执行 connect、create、publish、parse 等命令。

适用场景:适合设计和开发协作中需要把设计系统组件映射到代码实现、批量发布或检查连接关系、在 CI 或本地预览发布内容的团队与开发者。

限制:资料未说明支持的操作系统、Figma 套餐要求、命令的具体输出格式与错误处理细节,暂未提供;使用前必须配置有效的访问令牌。