FigCraft · 开源、洁净室、纯 Rust 的界面设计工具

编辑器一览

下面每一张都是 FigCraft 自己的界面，不是在浏览器里套壳：没有 Electron，没有 Web 视图。

Ridgeline UI 设计系统已打开，左侧资源面板显示按钮、难度、搜索框、开关与图标组件的实时缩略图；选中了一个由九种变体组成、以三乘三网格自动布局排布的按钮组件集，设计面板列出其样式（Primary、Tonal、Outline）与状态（Default、Hover、Disabled）变体属性

01.

组件与变体

组件集、变体属性与资源面板：按钮组件集由九种变体以三乘三网格自动布局排布，样式与状态都是变体属性。

示例文件examples/ridgeline-design-system.figcraft

原型标签页中四块引导注册的手机屏幕，由蓝色连接曲线从 Get started、Continue、Allow location 与 Not now 按钮连向下一屏；选中了 Get started 按钮，原型面板显示其 On click、Navigate to 2 Interests 交互

02.

原型制作

连接线、触发器、转场与流程：四块引导注册的手机屏幕由蓝色连接曲线连向下一屏。

示例文件examples/ridgeline-onboarding.figcraft

03.

开发模式

就绪待开发状态、标注与代码：组件的属性直接成为生成代码的形参。

示例文件examples/ridgeline-app.figcraft

一段带渐变、锥形可变宽度描边的波浪路径的矢量编辑模式：可见其锚点、贝塞尔控制柄以及选中点的变换框，底部是矢量编辑工具栏；其上方是一个由布尔运算构建的山形标记，以及一个由排除环组成的角向渐变结

04.

矢量网络

锚点与控制柄、可变宽度描边、保持可编辑的布尔运算。

示例文件examples/glass-and-vectors.figcraft

浅色 UI 主题下一个虚构徒步运营商的网站分析仪表盘：深色侧边栏、带迷你走势图的 KPI 卡片、分组柱状图、环形图、热门路线表格与面积图，画框的 12 列布局网格显示为淡色列

05.

布局网格与样式

12 列网格、填充 / 文本 / 效果 / 网格样式，全部由图形绘制的图表。

示例文件examples/ridgeline-studio-dashboard.figcraft

06.

实时协作会话

光标、选区、光标聊天与聚焦：在一个 figcraft-server 文件上的三个应用。

三种入口，同一条命令

每一个菜单项、工具与手势都来自一个拥有 400+ 条命令的注册表。你在界面上点到的任何效果，命令行与 MCP 服务器同样能做到。

能力

界面点击

命令行

MCP / JSON

新建画框

工具栏取画框，在画布上拖出尺寸

figcraft-cli run make-frame.json

frame.create 带上宽高与名字

设置自动布局

设计面板里选方向、间距与内边距

figcraft-cli commands --filter autoLayout

autoLayout.set 支持 fr 轨道与换行

建组件与变体

右键建组件集，拖出九个变体

figcraft-cli run build-card.json

component.createVariant 批量铺开

绑定变量

在变量表里改模式，画布跟着换

脚本改一处，全文件生效

variable.bind 绑到填充与描边

画矢量路径

钢笔、铅笔与矢量编辑模式

按坐标描点，可复现

vector.path 逐点写入

布尔运算

并集、减去、相交、排除

操作数保持可编辑

boolean.union 结果实时更新

加原型交互

拖一条连接线，选 On click

写成脚本，一次接通十屏

interaction.add 含条件变量

导出资源

选中图层，按倍率导出

figcraft-cli export -o out/ --format svg

export.run 无界面批量出图

跑一个插件

插件菜单里点一下

沙箱内计量执行，算一步撤销

plugin.run 权限限于清单

新建画框

界面点击工具栏取画框，在画布上拖出尺寸

命令行figcraft-cli run make-frame.json

MCP / JSONframe.create 带上宽高与名字

设置自动布局

界面点击设计面板里选方向、间距与内边距

命令行figcraft-cli commands --filter autoLayout

MCP / JSONautoLayout.set 支持 fr 轨道与换行

建组件与变体

界面点击右键建组件集，拖出九个变体

命令行figcraft-cli run build-card.json

MCP / JSONcomponent.createVariant 批量铺开

绑定变量

界面点击在变量表里改模式，画布跟着换

命令行脚本改一处，全文件生效

MCP / JSONvariable.bind 绑到填充与描边

画矢量路径

界面点击钢笔、铅笔与矢量编辑模式

命令行按坐标描点，可复现

MCP / JSONvector.path 逐点写入

布尔运算

界面点击并集、减去、相交、排除

命令行操作数保持可编辑

MCP / JSONboolean.union 结果实时更新

加原型交互

界面点击拖一条连接线，选 On click

命令行写成脚本，一次接通十屏

MCP / JSONinteraction.add 含条件变量

导出资源

界面点击选中图层，按倍率导出

命令行figcraft-cli export -o out/ --format svg

MCP / JSONexport.run 无界面批量出图

跑一个插件

界面点击插件菜单里点一下

命令行沙箱内计量执行，算一步撤销

MCP / JSONplugin.run 权限限于清单

01.

自行构建的布局

两个方向的自动布局，支持换行与网格（固定、包裹和 fr 轨道，可跨列的单元格）、内边距、间距、包含文字基线的对齐方式、包裹 / 填充 / 固定尺寸、最小与最大尺寸、绝对定位，以及画布上直接拖动调整内边距与间距的操作手柄；用方向键可以让子元素在流式布局、网格单元与嵌套画框之间移动。其余情况交给约束与布局网格。

02.

可扩展的组件

主组件、带可保留覆盖的实例、带变体的组件集、属性、交换实例、分离、重置覆盖与跳转主组件，以及带实时缩略图、可搜索并拖拽到画框与自动布局中的资源面板。本地样式与变量（颜色、数字、字符串、布尔）支持模式、别名与作用域，可在变量表中编辑，并绑定到填充、描边、效果、布局网格与实例属性。

03.

毫不妥协的矢量

真正的矢量网络：钢笔与铅笔工具，带专属工具的矢量编辑模式（可延伸并分叉路径的钢笔、弯曲、油漆桶、套索、裁剪），带控制柄镜像与逐点圆角的点面板。布尔组（并集、减去、相交、排除）的操作数在画布上保持可编辑，结果随每次拖拽实时更新。还有扁平化、描边转轮廓、箭头、虚线、逐边描边与可变宽度描边。

04.

填充与效果

纯色、线性、径向、角向与菱形渐变（带画布手柄）、图像填充（填充、适配、裁剪、平铺）、多重填充与描边、全部混合模式、投影与内阴影、图层与背景模糊（均匀或渐进）、噪声（单色、双色、多色）、纹理与玻璃（折射、色散、磨砂、光照）、蒙版。文件采用 sRGB 或 Display P3，导出时标记色彩配置。

05.

精美的文字排版

在画布上就地编辑文字（支持内联输入法合成），段落内混排样式，自动宽度与自动高度，行高、字距与段间距，装饰、大小写、列表、OpenType 特性、可变字体轴与文字样式。从右到左与混合方向文字（阿拉伯语、希伯来语）遵循 Unicode bidi 算法，由 HarfRust 塑形。

06.

原型与交付

连接、触发器、操作与 Smart Animate 式转场，带条件变量的变量（交互编辑器内置 if / else if / else，以及 count + 1 这类表达式），流程，带设备边框的演示视图与实时预览窗格。按住 Alt 在画布上测量距离与内边距；就绪待开发列表与比较更改；代码输出 CSS、HTML、React、Leptos、SwiftUI、Compose。评论线程与具名版本历史。

为智能体而打造

界面、命令行、JSON 控制通道与 MCP 服务器调用的是同一批命令。所以脚本和 AI 智能体能做到的，和你用鼠标做到的，是同一件事。

桌面应用还提供仅回环的控制通道figcraft --control <port>，可检查界面状态、用指针与按键事件驱动工具，以及截图。

MCP 文档 ↗CLI 文档 ↗控制通道 ↗

figcraft-cli · zsh

400+ 条命令


                  # 无界面：渲染与导出
                

                  figcraft-cli render landing.figcraft -o landing.png --scale 2
                

                  figcraft-cli export landing.figcraft -o out/ --format svg
                

                   
                

                  # 不带窗口地运行一段命令脚本
                

                  figcraft-cli run build-card.json --out card.figcraft
                

                   
                

                  # 列出每条命令及其参数
                

                  figcraft-cli commands --filter autoLayout
                

                   
                

                  # 让智能体通过 MCP 驱动它（无界面，或附加到正在运行的应用）
                

                  figcraft-cli mcp
                

                  figcraft-cli mcp --attach 47800

一屏走完三步

01 / 03

先画好一屏。

自动布局决定间距，组件决定复用，变量决定颜色。两万个节点的文件里新建一个节点，不到一毫秒。

02 / 03

再接上交互。

从按钮拖一条连线到下一屏，选 On click ▸ Navigate to。条件逻辑直接写在交互编辑器里。

03 / 03

最后交出去。

标注、测量、就绪待开发列表，以及 React、SwiftUI、Leptos 代码——组件的属性就是形参。

ridgeline-app.figcraft

9:41Ridgeline

Lake Louise8.4 km

Moraine Ridge6.1 km

尺寸362 × 168

自动布局包裹 · 垂直 · 间距 10

填充变量color/pine-600

变量模式

9:41Ridgeline

Lake Louise8.4 km

Moraine Ridge6.1 km

9:41Ridgeline

Lake Louise8.4 km

Moraine Ridge6.1 km

触发器On click · 点按「Start hike」可预览跳转

目标画框Navigate to · 2 Interests

转场曲线Smart animate · cubic-bezier(0.16, 1, 0.3, 1) · 300ms

import { TrailRow } from "./TrailRow";

export function Home() {
  return (
    <TrailRow
      title="Lake Louise"
      detail="8.4 km · 爬升 420 m"
      difficulty="中等"
    />
  );
}
// 组件的属性即形参