站点图标 高效码农

Figma命令行黑科技揭秘：如何用JSX脚本让AI百倍速构建设计系统

高效码农

Figma 命令行工具：用代码高效构建设计系统

在现代产品开发流程中，设计与开发的协作一直是一个挑战。随着 AI 技术的成熟，我们开始看到更多将生成式 AI 与设计工具结合的尝试。今天，我想介绍一个创新工具——figma-useCLI，它为 Figma 提供了一个高效的命令行接口，特别适合与 AI 模型协同工作。这个工具的核心理念是简化设计自动化流程，让开发者和设计师能够用熟悉的代码方式操作 Figma。

为什么需要 Figma 命令行工具？

在解释 figma-useCLI 之前，让我们先思考一个问题：为什么我们需要一个 Figma 的命令行工具？传统的 Figma 插件 API 有其局限性，尤其当与 AI 模型结合使用时。AI 模型在生成设计时通常需要执行大量操作，而每次操作都涉及数据传输开销。

figma-useCLI 采用了不同的方法：它绕过了标准插件 API 的限制，直接使用 Figma 的内部多人协作协议，大大提升了操作效率。根据文档，这种方法比传统插件 API 快约 100 倍，同时为 AI 模型提供了更简单的交互方式。

用 JSX 而不是 JSON：降低 AI 使用门槛

figma-useCLI 最引人注目的特点之一是它对 JSX 的支持。为什么选择 JSX 而不是传统的 JSON 配置？

原因很简单：大型语言模型已经在数百万 React 组件上进行了训练。它们天生就熟悉 JSX 语法，无需额外示例就能生成复杂的设计结构。例如，一个 AI 模型可以轻松生成以下代码：

<Frame style={{ flexDirection: 'column', gap: 16, padding: 24 }}>
  <Text style={{ fontSize: 24, fontWeight: 'bold' }}>标题</Text>
  <Text style={{ fontSize: 14, color: '#666' }}>描述文字</Text>
</Frame>

这种语法直观且表达力强，远比等效的 JSON 配置更简洁。文档中提到，相同的创建帧操作，使用 CLI 命令只需 47 个 token，而 MCP (可能是某种 JSON 协议) 请求和响应则需要约 200 个 token。对于需要执行数十次 Figma 操作的 AI 代理来说，这种效率差异会迅速累积。

安装与设置：从零开始

要使用 figma-useCLI，你需要完成以下安装和设置步骤：

安装全局命令

首先，通过 bun 包管理器全局安装工具：

bun install -g @dannote/figma-use

安装 Figma 插件

安装 CLI 工具后，需要在 Figma 中安装配套插件（安装前请先退出 Figma 应用）：

figma-use plugin install

启动代理服务器

figma-useCLI 依赖代理服务器与 Figma 通信。设置过程分为两个终端窗口：

终端 1：启动带调试端口的 Figma

figma --remote-debugging-port=9222

终端 2：启动代理服务器

figma-use proxy

完成这些步骤后，你就可以在 Figma 中通过 “Plugins → Development → Figma UseRender: JSX → Figma (Experimental)” 访问该工具。

注意：该工具使用 Figma 的内部多人协作协议，这使其比标准插件 API 快约 100 倍，但若 Figma 更新其内部协议，工具可能会暂时失效。

基础用法：从简单操作开始

figma-useCLI 提供了两种主要使用方式：直接命令和 JSX 渲染。

直接命令操作

对于简单操作，可以直接使用命令行参数：

# 创建一个带有特定属性的帧
figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12 --layout VERTICAL --gap 16

# 从标准输入渲染 JSX
echo '<Frame style={{width: 200, height: 100, backgroundColor: "#FF0000"}} />' | figma-use render --stdin

# 从文件渲染
figma-use render ./Card.figma.tsx

# 带参数渲染
figma-use render ./Card.figma.tsx --props '{"title": "Hello"}'

JSX 渲染：创建复杂布局

JSX 渲染是 figma-useCLI 的核心功能，它允许你用类似 React 的语法创建复杂的设计系统。支持的元素包括：

  • Frame (框架)
  • Rectangle (矩形)
  • Ellipse (椭圆)
  • Text (文本)
  • Line (线条)
  • Star (星形)
  • Polygon (多边形)
  • Vector (矢量)
  • Group (组)

每种元素都支持丰富的样式属性，例如：

<Frame style={{
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'stretch',
  gap: 16,
  padding: 24,
  width: 400,
  height: 300,
  backgroundColor: '#3B82F6',
  borderRadius: 12,
  opacity: 0.9
}}>
  <Text style={{
    fontSize: 24,
    fontFamily: 'Inter',
    fontWeight: 'bold',
    color: '#FFF',
    textAlign: 'center'
  }}>
    欢迎使用 Figma
  </Text>
</Frame>

高级功能：设计系统的构建模块

可复用组件

figma-useCLI 允许你定义可复用的 Figma 组件，这类似于 React 中的组件模式：

import { defineComponent, Frame, Text } from '@dannote/figma-use/render'

const Card = defineComponent('Card', 
  <Frame style={{ 
    padding: 24, 
    backgroundColor: '#FFF', 
    borderRadius: 12 
  }}>
    <Text style={{ fontSize: 18, color: '#000' }}>
      卡片内容
    </Text>
  </Frame>
)

export default () => (
  <Frame style={{ gap: 16, flexDirection: 'row' }}>
    <Card /> {/* 首次使用创建主组件 */}
    <Card /> {/* 后续使用创建实例 */}
    <Card /> {/* 后续使用创建实例 */}
  </Frame>
)

第一次使用 Card 组件时，会创建 Figma 中的主组件。后续使用则创建该组件的实例，保持设计一致性的同时提高效率。

组件变体

更强大的是，figma-useCLI 支持创建带有变体的组件集，这是 Figma 中高级设计系统的核心特性：

import { defineComponentSet, Frame, Text } from '@dannote/figma-use/render'

const Button = defineComponentSet('Button', {
  variant: ['Primary', 'Secondary'] as const,
  size: ['Small', 'Large'] as const,
}, ({ variant, size }) => (
  <Frame style={{ 
    padding: size === 'Large' ? 16 : 8,
    backgroundColor: variant === 'Primary' ? '#3B82F6' : '#E5E7EB',
    borderRadius: 8,
  }}>
    <Text style={{ 
      color: variant === 'Primary' ? '#FFF' : '#111' 
    }}>
      {variant} {size}
    </Text>
  </Frame>
))

export default () => (
  <Frame style={{ gap: 16, flexDirection: 'column' }}>
    <Button variant="Primary" size="Large" />
    <Button variant="Secondary" size="Small" />
  </Frame>
)

这段代码会创建一个包含 4 个变体（Primary/Small、Primary/Large、Secondary/Small、Secondary/Large）的组件集，并在画布上放置两个指定变体的实例。

变量绑定

现代设计系统依赖设计变量来维护一致性。figma-useCLI 允许将样式属性绑定到 Figma 变量：

import { defineVars, Frame, Text } from '@dannote/figma-use/render'

const colors = defineVars({
  bg: { name: 'Colors/Gray/50', value: '#F8FAFC' },
  text: { name: 'Colors/Gray/900', value: '#0F172A' },
})

export default () => (
  <Frame style={{ backgroundColor: colors.bg }}>
    <Text style={{ color: colors.text }}>绑定到变量</Text>
  </Frame>
)

这里，value 属性提供了回退值，实际渲染时会根据名称绑定到 Figma 中的对应变量。这对于维护设计系统的一致性和灵活性至关重要。

命令详解：灵活的操作方式

除了 JSX 渲染，figma-useCLI 还提供了丰富的命令行操作，覆盖 Figma 的几乎所有功能。这些命令分为几大类：

创建命令

# 创建框架
figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12 --layout VERTICAL --gap 16

# 创建矩形
figma-use create rect --width 100 --height 50 --fill "#FF0000" --radius 8

# 创建椭圆
figma-use create ellipse --width 80 --height 80 --fill "#00FF00"

# 创建文本
figma-use create text --text "你好" --fontSize 24 --fill "#000"

# 创建线条
figma-use create line --length 100 --stroke "#000"

# 创建组件
figma-use create component --width 200 --height 100

# 创建实例
figma-use create instance --component <id>

修改命令

# 设置填充颜色
figma-use set fill <id> "#FF0000"

# 设置描边
figma-use set stroke <id> "#000" --weight 2

# 设置圆角
figma-use set radius <id> 12

# 设置不透明度
figma-use set opacity <id> 0.5

# 设置文本
figma-use set text <id> "新文本"

# 设置字体
figma-use set font <id> --family "Inter" --style "Bold" --size 20

# 设置布局
figma-use set layout <id> --mode VERTICAL --gap 12 --padding 16

# 设置效果
figma-use set effect <id> --type DROP_SHADOW --radius 10 --color "#00000040"

查询命令

# 获取节点属性
figma-use node get <id>

# 以树形结构查看页面
figma-use node tree

# 列出子节点
figma-use node children <id>

# 获取边界信息
figma-use node bounds <id>

# 按名称查找
figma-use find --name "按钮"

# 按类型查找
figma-use find --type FRAME

# 获取当前选择
figma-use selection get

矢量路径操作

# 创建矢量
figma-use create vector --x 0 --y 0 --path "M 0 0 L 100 50 L 0 100 Z" --fill "#F00"

# 获取路径数据
figma-use path get <id>

# 设置路径数据
figma-use path set <id> "M 0 0 ..."

# 移动路径
figma-use path move <id> --dx 10 --dy -5

# 缩放路径
figma-use path scale <id> --factor 1.5

# 翻转路径
figma-use path flip <id> --axis x

导出功能

# 导出节点
figma-use export node <id> --output design.png

# 导出截图
figma-use export screenshot --output viewport.png

# 导出选择
figma-use export selection --output selection.png

导航与管理

# 列出页面
figma-use page list

# 切换页面
figma-use page set "页面名称"

# 缩放到适合
figma-use viewport zoom-to-fit <ids...>

变量与样式

# 列出变量
figma-use variable list

# 创建变量
figma-use variable create "Primary" --collection <id> --type COLOR --value "#3B82F6"

# 列出样式
figma-use style list

# 创建填充样式
figma-use style create-paint "Brand/Primary" --color "#E11D48"

字体管理

# 列出所有字体
figma-use font list

# 按字族筛选
figma-use font list --family Roboto

评论与历史

# 列出评论
figma-use comment list

# 添加评论
figma-use comment add "请审核这个部分"

# 在特定位置添加评论
figma-use comment add "这里" --x 200 --y 100

# 删除评论
figma-use comment delete <id>

# 查看版本历史
figma-use version list

# 查看当前用户
figma-use me

# 查看文件信息
figma-use file info

高级特性：差异比较

figma-useCLI 还提供实验性的差异比较功能，可用于比较两个帧并生成统一差异补丁：

# 创建差异
figma-use diff create --from 123:456 --to 789:012

# 应用补丁（带验证）
figma-use diff apply patch.diff

# 从标准输入应用
figma-use diff apply --stdin < patch.diff

# 预览变更
figma-use diff apply patch.diff --dry-run

# 强制应用（跳过验证）
figma-use diff apply patch.diff --force

与 AI 代理集成

figma-useCLI 特别适合与 AI 代理集成。项目提供了 SKILL.md 文件，这是一个专为 Claude Code 等 AI 代理设计的参考文档。设置方法如下：

# 为 Claude Code 设置
mkdir -p ~/.claude/skills/figma-use
cp node_modules/@dannote/figma-use/SKILL.md ~/.claude/skills/figma-use/

# 或直接下载
curl -o ~/.claude/skills/figma-use/SKILL.md \
https://raw.githubusercontent.com/anthropics/figma-use/main/SKILL.md

对于简单设置，可以将以下内容添加到项目的 AGENTS.md 中：

## Figma
使用 `figma-use` CLI。对于复杂布局，使用 `figma-use render --stdin` 与 JSX。
运行 `figma-use --help` 查看所有命令。

MCP 服务器支持

如果客户端仅支持 MCP (可能是某种协议)，figma-useCLI 的代理服务器在 http://localhost:38451/mcp 暴露了一个端点，提供 80 多个自动生成的工具。运行 figma-use mcp 可获取配置代码片段。

工作原理

figma-useCLI 的架构设计精巧，平衡了功能与性能：

┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│   AI 代理   │──▶│ figma-use   │──▶│   插件      │
│             │   │ CLI 代理    │   │ WebSocket   │
└─────────────┘   └──────┬──────┘   └─────────────┘
                       │ MCP ───┤ WebSocket (多人协作)
                       ▼        ┌─────────────┐
                     ┌─────────────┐   │  Figma  │
                     │             │   │  服务器 │
                     └─────────────┘   └─────────────┘
  • CLI 命令通过插件 API 访问完整的 Figma 功能
  • MCP 端点提供与 CLI 相同的功能，但使用 JSON-RPC 协议
  • render 命令使用多人协作协议（实验性），速度提升约 100 倍

常见问题解答

figma-useCLI 与标准 Figma 插件有什么区别？

figma-useCLI 是一个命令行工具，它通过代理服务器与 Figma 交互。与标准插件相比，它的最大优势在于效率和与 AI 模型的兼容性。它使用 Figma 的内部多人协作协议，比标准插件 API 快约 100 倍，同时提供了更简洁的 JSX 语法，使 AI 模型更容易生成和理解设计代码。

为什么 JSX 比 JSON 更适合 AI 模型？

大型语言模型在训练过程中接触了大量 React 代码，这使得它们对 JSX 语法非常熟悉。JSX 提供了更直观、更简洁的方式来表达设计结构，减少了 token 使用量。例如，创建一个带有样式的帧，JSX 可能只需 47 个 token，而等效的 JSON 可能需要 200 个 token。随着操作数量增加，这种差异会显著影响 AI 生成设计的效率和成本。

如何解决 Figma 内部协议变更导致的问题？

figma-useCLI 使用 Figma 的内部多人协作协议以获得最佳性能，但这确实带来了一定风险。如果 Figma 更新其内部协议，工具可能暂时失效。开发团队会密切关注 Figma 更新，并尽可能快地提供修复。对于生产环境，建议同时了解传统的插件 API 方法作为备选方案。

可以在团队环境中使用这个工具吗？

是的，figma-useCLI 适合团队环境。它支持 Figma 的所有协作功能，包括变量、组件库和样式。团队成员可以共享 JSX 组件定义，确保设计一致性。此外，工具生成的设计完全兼容标准 Figma 功能，团队成员无需安装任何特殊工具即可查看和编辑结果。

这个工具如何帮助建立设计系统？

figma-useCLI 通过几个关键功能帮助建立和维护设计系统：

  1. 组件定义：使用 defineComponent 创建可复用的主组件
  2. 组件变体：使用 defineComponentSet 创建带有多维变体的组件集
  3. 变量绑定：将颜色、排版等属性绑定到 Figma 变量
  4. 版本控制：通过 diff 功能跟踪设计变更
  5. 代码化设计：将设计表示为代码，便于版本控制和团队协作

这些功能使设计师和开发者能够用代码方式定义和维护设计系统，提高一致性和效率。

如何处理复杂的矢量图形？

figma-useCLI 提供了全面的矢量路径操作命令：

  • 创建矢量：figma-use create vector --path "M 0 0 L 100 100 Z"
  • 读取路径：figma-use path get <id>
  • 修改路径：figma-use path set <id> "新路径数据"
  • 转换路径：支持移动、缩放、翻转等操作

这些命令允许你精确控制矢量图形，适合创建自定义图标和复杂图形。

是否支持导出设计资源？

是的，figma-useCLI 支持多种导出选项：

  • 导出特定节点：figma-use export node <id> --output file.png
  • 导出当前视口截图：figma-use export screenshot --output viewport.png
  • 导出当前选择：figma-use export selection --output selection.png

这些命令支持不同格式和质量设置，适合生成设计资源和文档。

如何与现有设计工作流集成？

figma-useCLI 设计为补充而非替代现有设计工作流：

  1. 设计探索：使用 AI 生成初始设计概念
  2. 组件创建：将常用 UI 元素定义为可复用组件
  3. 设计系统维护：通过代码更新确保一致性
  4. 自动化任务：批量创建或修改元素
  5. 设计审查：通过命令行添加评论和注释

工具的灵活性允许它适应不同的工作流需求，无论是设计师主导还是开发主导的团队。

未来展望：代码与设计的融合

figma-useCLI 代表了设计工具演进的一个方向：将代码与视觉设计更紧密地结合。通过提供高效的命令行接口和 JSX 支持，它降低了自动化设计的门槛，使 AI 能更有效地参与设计过程。

这种工具不会取代设计师，而是增强他们的能力，处理重复性任务，让设计师专注于创意和用户体验。随着技术发展，我们可能会看到更多类似工具出现，进一步模糊代码与设计之间的界限，创造更高效的产品开发流程。

对于希望提高设计系统一致性和开发效率的团队，figma-useCLI 提供了一个值得探索的选择。它的命令行特性使其易于集成到现有工作流和自动化系统中，而 JSX 语法则为 AI 辅助设计打开了大门。

无论你是设计师、开发者还是产品经理，理解这些新兴工具的能力和限制，将帮助你在快速变化的技术环境中保持竞争力。设计工具的进化不仅改变了我们的工作方式，也重新定义了创意过程本身的可能性。

退出移动版