Figma-use：用CLI让AI agents自动设计界面

⚠️ Figma 126+ 阻止了远程调试。figma-use 仍然可以通过 figma-use daemon start --pipe 工作。或者完全跳过 Figma，使用 OpenPencil——一个开源设计编辑器，可以读写 .fig 文件，内置 AI 和 P2P 协作。

用于 Figma 的 CLI。从终端控制它——使用命令或 JSX。

# Create and style
figma-use create frame --width 400 --height 300 --fill "#FFF" --layout VERTICAL --gap 16
figma-use create icon mdi:home --size 32 --color "#3B82F6"
figma-use set layout 1:23 --mode GRID --cols "1fr 1fr 1fr" --gap 16

# Or render JSX
echo '<Frame style={{display: "grid", cols: "1fr 1fr", gap: 16}}>
  <Frame style={{bg: "#3B82F6", h: 100}} />
  <Frame style={{bg: "#10B981", h: 100}} />
</Frame>' | figma-use render --stdin --x 100 --y 100

Figma 官方的 MCP 插件可以读取文件，但无法修改。这个可以。

LLM 知道 CLI。LLM 知道 React。这个结合了两者。

CLI 命令很紧凑——易于阅读、易于生成、易于链式调用。当一个任务涉及数十个操作时，每一个节省的 token 都很重要。

JSX 是 LLM 已经思考的 UI 方式。他们已经看过百万级别的 React 组件。将 Figma 布局描述为 <Frame><Text> 对他们来说很自然——无需特殊训练、无需冗长的 schema。

▶️ Tailwind UI 日历

npm install -g figma-use

或直接运行而不安装：

npx figma-use status

启动 Figma 并启用远程调试：

# macOS
open -a Figma --args --remote-debugging-port=9222

# Windows
"%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222

# Linux
figma --remote-debugging-port=9222

figma-use status

就这么简单。无需安装插件。

命令式——逐个命令执行：

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

或声明式——用 JSX 描述结构并渲染：

echo '<Frame style={{p: 24, gap: 16, flex: "col", bg: "#FFF", rounded: 12}}>
  <Text style={{size: 24, weight: "bold", color: "#000"}}>Card Title</Text>
  <Text style={{size: 14, color: "#666"}}>Description</Text>
</Frame>' | figma-use render --stdin --x 100 --y 200

stdin 模式仅接受纯 JSX——没有变量、没有逻辑。对于组件、变体和条件，使用 .figma.tsx 文件。

元素：Frame、Rectangle、Ellipse、Text、Line、Star、Polygon、Vector、Group、Icon、Image

按名称从 Iconify 插入任何图标。无需下载、导入、清理。

figma-use create icon mdi:home
figma-use create icon lucide:star --size 48 --color "#F59E0B"

<Frame style={{ flex: 'row', gap: 8 }}>
  <Icon icon="mdi:home" size={24} color="#3B82F6" />
  <Icon icon="lucide:star" size={32} color="#F59E0B" />
</Frame>

浏览 150k+ 图标：icon-sets.iconify.design

从 URL 加载图像：

<Image src="https://example.com/photo.jpg" w={200} h={150} />

将任何 Figma 节点转换回 JSX：

figma-use export jsx 123:456 --pretty

import { Frame, Icon, Text } from 'figma-use/render'
export default function SaveButton() {
  return (
    <Frame name="SaveButton" w={120} h={44} bg="#1FAFBB" rounded={8} flex="row" gap={8}>
      <Icon name="lucide:save" size={18} color="#FFFFFF" />
      <Text size={16} color="#FFFFFF">
        Save
      </Text>
    </Frame>
  )
}

自动将矢量形状匹配到 Iconify 图标：

npm install whaticon  # Optional dependency
figma-use export jsx 123:456 --match-icons --prefer-icons lucide

比较两个节点作为 JSX diff：

figma-use diff jsx 123:456 789:012

导出到 Storybook（实验性功能）

将组件导出为 Storybook stories：

figma-use export storybook --out ./stories
figma-use export storybook --out ./stories --match-icons --prefer-icons lucide

生成包含来自组件属性的类型化 props 的 .stories.tsx。

组件和 ComponentSet

在 .figma.tsx 文件中，你可以定义组件。第一次调用创建 master，其余的创建实例：

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

const Card = defineComponent(
  'Card',
  <Frame style={{ p: 24, bg: '#FFF', rounded: 12 }}>
    <Text style={{ size: 18, color: '#000' }}>Card</Text>
  </Frame>
)

export default () => (
  <Frame style={{ gap: 16, flex: 'row' }}>
    <Card />
    <Card />
    <Card />
  </Frame>
)

包含所有组合的 ComponentSet：

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

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

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

这在 Figma 中创建一个真实的 ComponentSet，包含全部 4 个变体，而不仅仅是 4 个独立按钮。

CSS Grid 布局

用于 2D 布局——日历、仪表板、图库：

<Frame
  style={{
    display: 'grid',
    cols: '1fr 1fr 1fr', // 3 equal columns
    rows: 'auto auto', // 2 rows
    gap: 16
  }}
>
  <Frame style={{ bg: '#FF6B6B' }} />
  <Frame style={{ bg: '#4ECDC4' }} />
  <Frame style={{ bg: '#45B7D1' }} />
  <Frame style={{ bg: '#96CEB4' }} />
  <Frame style={{ bg: '#FFEAA7' }} />
  <Frame style={{ bg: '#DDA0DD' }} />
</Frame>

支持 px、fr 和 auto/hug。用 colGap 和 rowGap 分别设置间距。

figma-use set layout <id> --mode GRID --cols "100px 1fr 100px" --rows "auto" --gap 16

变量

将颜色绑定到 Figma 变量（按名称）。十六进制值作为备用：

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

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

export default () => (
  <Frame style={{ bg: colors.bg }}>
    <Text style={{ color: colors.text }}>Bound to variables</Text>
  </Frame>
)

在 CLI 中，在任何颜色选项中使用 var:Colors/Primary 或 $Colors/Primary。

Diff 和 Patch

比较两个 frame 并获取 patch：

figma-use diff create --from 123:456 --to 789:012

--- /Card/Header #123:457
+++ /Card/Header #789:013
@@ -1,5 +1,5 @@
 type: FRAME
 size: 200 50
 pos: 0 0
-fill: #FFFFFF
+fill: #F0F0F0
-opacity: 0.8
+opacity: 1

将 patch 应用到原始 frame。应用时，当前状态将根据预期状态进行验证——如果不匹配，则失败。

可视化 diff 用红色突出显示更改的像素：

figma-use diff visual --from 49:275096 --to 49:280802 --output diff.png

树和导出

以可读形式显示页面树：

$ figma-use node tree
[0] frame "Card" (1:23)
    400×300 at (0, 0) | fill: #FFFFFF | layout: col gap=16
  [0] text "Title" (1:24)
      "Hello World" | 24px Inter Bold

使用一个命令导出任何节点或屏幕截图。

排列

整理画布布局——特别适合 agent 在同一位置创建多个 frame 后：

figma-use arrange                              # Grid-arrange all top-level nodes
figma-use arrange --mode row --gap 60          # Horizontal row
figma-use arrange --mode squarify --gap 60     # Smart packing for mixed sizes

使用 d3-hierarchy treemap 进行 squarify 和 binary 模式——大小感知的矩形填充。

路径

导入 SVG 或直接处理路径——读、修改、平移、缩放、翻转：

figma-use path get <id>
figma-use path set <id> "M 0 0 L 100 100 Z"
figma-use path scale <id> --factor 1.5
figma-use path flip <id> --axis x

查询

使用 XPath 选择器查找节点：

figma-use query "//FRAME"                              # All frames
figma-use query "//FRAME[@width < 300]"                # Narrower than 300px
figma-use query "//COMPONENT[starts-with(@name, 'Button')]"  # Name starts with
figma-use query "//FRAME[contains(@name, 'Card')]"     # Name contains
figma-use query "//SECTION/FRAME"                      # Direct children
figma-use query "//SECTION//TEXT"                      # All descendants
figma-use query "//*[@cornerRadius > 0]"               # Any node with radius

完整支持 XPath 3.1——谓词、函数、算术、轴。

分析

用于理解设计系统的发现工具：

# Find repeated patterns (potential components)
figma-use analyze clusters

# Color palette — usage frequency, variables vs hardcoded
figma-use analyze colors
figma-use analyze colors --show-similar    # Find colors to merge

# Typography — all font combinations
figma-use analyze typography
figma-use analyze typography --group-by size

# Spacing — gap/padding values, grid compliance
figma-use analyze spacing --grid 8

# Accessibility snapshot — extract interactive elements tree
figma-use analyze snapshot                 # Full page
figma-use analyze snapshot <id> -i         # Interactive elements only

[0] 48× frame "Header" pattern (100% match)
    1280×56 | Frame > [Frame×2, Text]
    examples: 53171:21628, 53171:21704

#303030  ████████████████████ 1840× (var)
#E5E5E5  ████████████████████ 1726× (var)
#000000  ████████ 238×

Lint

检查设计的一致性、可访问性和最佳实践：

figma-use lint                          # Recommended rules
figma-use lint --page "Components"      # Lint specific page
figma-use lint --preset strict          # Stricter for production
figma-use lint --preset accessibility   # A11y checks only
figma-use lint -v                       # With fix suggestions

✖ Header/Title (1:234)
    ✖  Contrast ratio 2.1:1 is below AA threshold (4.5:1)    color-contrast
    ⚠  Touch target 32x32 is below minimum 44x44             touch-target-size

⚠ Card/Body (1:567)
    ⚠  Hardcoded fill color #1A1A1A                          no-hardcoded-colors
    ℹ  Frame with 3 children doesn't use Auto Layout         prefer-auto-layout

────────────────────────────────────────────────────────────────
✖ 1 error  ⚠ 3 warnings  ℹ 1 info

17 条规则跨越 6 个类别。

用于 CI/CD 的 JSON 输出：

figma-use lint --json > report.json

Comment-Driven Workflow（实验性功能）

AI agent 可以等待 Figma 评论并做出回应：

figma-use comment watch --json   # Blocks until new comment
figma-use comment resolve <id>   # Mark as done

返回评论文本、作者和 target_node——评论pin下的确切元素。Agent 处理请求、解决评论，然后再次运行 watch 以等待下一个。

完整命令参考

请参阅 REFERENCE.md 获取完整的 100+ 命令列表。

MCP 集成

对于支持 Model Context Protocol 的 AI agent：

figma-use mcp serve

公开 90+ 个工具。详见 MCP.md 以了解设置。

配置

对于 Storybook 导出和 linting，创建一个配置文件：

figma-use init

创建 .figma-use.json：

{
  "storybook": {
    "page": "Components",
    "out": "./stories",
    "matchIcons": true,
    "preferIcons": ["lucide", "tabler"]
  },
  "lint": {
    "preset": "recommended"
  },
  "format": {
    "pretty": true,
    "semi": false,
    "singleQuote": true
  }
}

CLI 参数覆盖配置值。

包括 SKILL.md——Claude Code、Cursor 和其他 agent 的参考。

工作原理

┌─────────────┐            ┌─────────────┐
│   Terminal  │────CDP────▶│   Figma     │
│  figma-use  │  port 9222 │             │
└─────────────┘            └─────────────┘

figma-use 通过 Chrome DevTools Protocol（CDP）直接与 Figma 通信。只需使用 --remote-debugging-port=9222 启动 Figma，你就准备好了。

非默认端口？将 --port <N> 传递给任何命令，或设置 FIGMA_PORT 环境变量：

open -a Figma --args --remote-debugging-port=9333
figma-use get components --port 9333
# or
FIGMA_PORT=9333 figma-use get components

命令通过 Runtime.evaluate 在 Figma 的 JavaScript 上下文中执行，完全访问 Plugin API。

守护进程

可选的守护进程保持 CDP 连接热连接以加快顺序命令：

figma-use daemon start    # Background daemon (~25% faster commands)
figma-use daemon stop     # Stop daemon
figma-use daemon status   # Check if running

对于 Figma 126+ 没有管理员访问权限来修补的情况，守护进程可以使用 --remote-debugging-pipe 启动 Figma：

figma-use daemon start --pipe   # Launches Figma, connects via stdio pipes

为自定义二进制位置设置 FIGMA_BIN。守护进程保持管道连接——所有命令自动通过它路由。