- 前端
- 桌面应用
- AI 应用
- MCP 服务
【免费下载链接】open-pencil
AI-native design editor. Open-source Figma alternative.
本文基于 Open Pencil 官方文档 Figma 兼容性矩阵（Figma Feature Matrix），系统梳理该项目对 Figma Design 各项能力的覆盖情况：截至 2026-03-07，158 项功能项中已处理 94 项（76 项完整支持、18 项部分支持、64 项尚未实现）。文章将逐模块解读每个功能项的状态、行为细节与仓库源码依据，帮助你判断 Open Pencil 当前能做什么、不能做什么，以及哪些能力已具备与 Figma 双向互操作的实战基础。
兼容性总览：状态图例与覆盖数据
矩阵全文使用三种状态标记，含义如下：
| 状态 | 含义 |
|---|---|
| ✅ Supported | 功能端到端可用（feature works end-to-end） |
| 🟡 Partial | 核心行为已存在，部分子功能缺失 |
| 🔲 Not yet implemented | 尚未实现 |
当前整体覆盖情况：158 项 Figma 功能项中已处理 94 项 —— 76 项完整支持、18 项部分支持、64 项尚未实现。需要说明的是，这一数据是项目自评的"功能项覆盖度"，不等于像素级还原度——文档与 文件格式参考 均明确指出：复杂 Figma 文档经 Open Pencil 保存后再由 Figma 打开，可能出现视觉保真度损失（组件内容、颜色、文本可能差异或缺失），即使图层数量不变也不能保证外观一致。
界面与导航：UI3 风格布局已就位
Open Pencil 的编辑器界面刻意对齐 Figma 的 UI3 布局——底部工具栏、左侧导航、右侧属性面板，这一点在 架构文档 中有明确描述。
| Feature | Status | Notes |
|---|---|---|
| Toolbar with design tools | ✅ | Bottom toolbar (UI3 style): Select, Frame, Section, Rectangle, Ellipse, Line, Text, Hand, Pen |
| Layers panel (left sidebar) | ✅ | Tree view with expand/collapse, drag reorder, visibility toggle; resizable width |
| Pages panel | ✅ | Add, delete, rename pages; per-page viewport state |
| Properties panel (right sidebar) | ✅ | Sections: Appearance, Fill, Stroke, Effects, Typography, Layout, Position; resizable width |
| Zoom & pan | ✅ | Ctrl+ scroll, pinch,⌘+ /⌘− /⌘0 (100%) /⌘1 (fit) /⌘2 (selection),Space+ drag, middle mouse, hand tool (H) |
| Canvas rulers | ✅ | Top/left rulers with selection highlight bands and coordinate badges |
| Canvas background color | ✅ | Per-page background via properties panel |
| Canvas guides | 🔲 | Figma supports draggable guides from rulers |
| Actions menu / command palette | 🔲 | Figma's quick actions search |
| Context menu | ✅ | Right-click with clipboard, z-order, grouping, component, visibility, lock, move-to-page actions |
| Keyboard shortcuts | 🟡 | Core shortcuts + components + z-order + visibility/lock implemented; Scale, Arrow, Pencil, flip, text formatting not yet wired |
| Find and replace | 🔲 | Text search/replace across document |
| Layer outlines view | 🔲 | Wireframe view of all layers |
| Custom file thumbnails | 🔲 | Thumbnail generated on export, but no custom thumbnail picker |
| Nudge value settings | 🔲 | Default 1px/10px; Figma allows custom small/big nudge values |
| App menu (browser mode) | ✅ | File, Edit, View, Object, Text, Arrange menus; Tauri uses native menus |
| AI tools | 🟡 | 90 tools via OpenRouter + MCP server; no AI-generated images or AI-powered search yet |
值得展开说明的几个点：
- AI 工具的半程状态：90 个工具通过 OpenRouter 与 MCP 服务器对外提供，但图像生成与 AI 搜索尚未落地。从 架构文档 看，这些工具在
packages/core/src/tools/中按领域（read、create、modify、structure、variables、vector、analyze）统一定义，再通过适配器转换为 AI 聊天（valibot schema）、MCP 服务器（zod schema，stdio + HTTP 双传输）与 CLIeval三种入口。 - 桌面与浏览器的菜单差异：浏览器模式内置 File/Edit/View/Object/Text/Arrange 菜单，而 Tauri 桌面端使用原生菜单，相关实现位于 桌面端菜单模块。
- 快捷键部分实现：核心快捷键、组件、层级顺序、显隐/锁定快捷键已接通，但 Scale、Arrow、Pencil、翻转、文本格式化等尚未接线。
图层与形状：节点模型与批量编辑是亮点
| Feature | Status | Notes |
|---|---|---|
| Shape tools (Rectangle, Ellipse, Line, Polygon, Star) | ✅ | All basic shape types; polygon side count and star inner radius configurable |
| Frames | ✅ | Clip content, independent coordinate system, and Figma-style creation and resize presets |
| Groups | ✅ | ⌘G to group,⇧⌘G to ungroup |
| Sections | ✅ | Title pills, auto-adopt overlapping nodes, luminance-adaptive text |
| Arc tool (arcs, semi-circles, rings) | ✅ | arcData with start/end angle and inner radius |
| Pencil (freehand) tool | 🔲 | Figma's freehand drawing tool |
| Masks | 🔲 | Shape masks for clipping layers |
| Layer types & hierarchy | ✅ | 17 node types, flat Map + parent-child tree |
| Select layers | ✅ | Click, shift-click, marquee selection |
| Alignment & position | ✅ | Position, rotation, dimensions in properties panel |
| Copy & paste objects | ✅ | Standard clipboard + Figma Kiwi binary format; Copy as text/SVG/PNG/JSX |
| Scale layers proportionally | 🟡 | Shift-resize constrains proportions; no dedicated Scale tool (K) |
| Lock & unlock layers | ✅ | ⇧⌘L toggles lock; locked nodes can't be selected/moved from canvas |
| Toggle layer visibility | ✅ | Eye icon in layers panel +⇧⌘H keyboard shortcut |
| Rename layers | ✅ | Double-click inline rename in layers panel;Enter/Escape/blur to commit |
| Bring to front / Send to back | ✅ | ] and [ keyboard shortcuts; also in context menu |
| Move to page | ✅ | Move selected nodes between pages via context menu |
| Constraints (responsive resize) | 🔲 | Pin edges/center for parent resize behavior |
| Smart selection (distribute/align) | 🔲 | Evenly space and align multi-selection |
| Layout guides (columns, rows, grid) | 🔲 | Column/row/grid overlay guides on frames |
| Measure distances between layers | 🔲 | Alt-hover to show distances |
| Edit objects in bulk | ✅ | Multi-selection properties panel: edit position, size, appearance, fill, stroke, effects across multiple nodes; shared values display normally, differing values show "Mixed" |
| Identify matching objects | 🔲 | Find similar layers |
| Copy/paste properties | 🔲 | Copy fill/stroke/effects between layers |
| Parent-child relationships | ✅ | Full hierarchy with parentIndex, reparenting via drag |
图层与形状部分是兼容性较强的区域。底层 SceneGraph 采用"扁平Map<string, Node>+parentIndex父子引用"的混合模型（见 架构文档），支持 O(1) 查找、高效遍历、命中测试与矩形区域查询（框选），并通过 nanoevents 发布node:created/node:updated/node:deleted/node:reparented/node:reordered类型化事件——编辑器用它做渲染失效与组件实例同步，协作系统用它做 Yjs 传播。这也解释了为什么 17 种节点类型、完整层级与批量编辑能做到"端到端支持"。
矢量工具：矢量网络模型已兼容，布尔运算缺席
| Feature | Status | Notes |
|---|---|---|
| Vector networks | ✅ | Figma-compatible model, not simple paths |
| Pen tool | ✅ | Corner points, bezier curves, open/closed paths |
| Edit vector layers | 🟡 | Creation works; advanced vertex editing (bend, delete points, join) limited |
| Boolean operations (Union, Subtract, Intersect, Exclude) | 🔲 | Combine shapes with boolean ops |
| Flatten layers | 🔲 | Merge vector paths into single path |
| Convert strokes to paths | 🔲 | Outline Stroke command |
| Convert text to paths | 🔲 | Flatten text to vector outlines |
| Shape builder tool | 🔲 | Interactive boolean tool |
| Offset path | 🔲 | Inset/outset a vector path |
| Simplify path | 🔲 | Reduce vector point count |
矢量网络（Vector Network）是 Figma 的核心矢量模型，Open Pencil 采用与之兼容的模型而非简单 path。Kiwi 协议层对此有明确约定：布尔运算载荷使用 Figma 的 Kiwi 枚举名，SceneGraph 层的EXCLUDE属于核心层概念，在调用底层编解码器前应序列化为 KiwiXOR（见 kiwi 包说明）。这一约定从侧面印证矢量数据在二进制格式层与 Figma 的一致性。
文本与排版：Paragraph API 支撑下的高完成度模块
| Feature | Status | Notes |
|---|---|---|
| Text tool & inline editing | ✅ | Canvas-native editing, phantom textarea, cursor/selection/word select, drag to select, double/triple-click, rich text style runs (⌘B / I / U,Sbutton) |
| Text on a path | 🟡 | Imports, renders, selects, resizes, edits, and exports FigmaTEXT_PATH; character editing requires the referenced font's outlines to be available locally |
| Text rendering (Paragraph API) | ✅ | CanvasKit Paragraph for shaping, line-breaking, metrics |
| Font loading (system fonts) | ✅ | Inter default, font-kit in Tauri with OnceLock cache + preloading, queryLocalFonts in browser |
| Font family & weight | ✅ | FontPicker with virtual scroll, search, CSS preview; weight selection in properties panel |
| Font size & line height | ✅ | Editable in typography section |
| Text alignment | 🟡 | Basic alignment; Figma has vertical alignment and auto-width/height modes |
| Text styles | 🟡 | Per-selection bold/italic/underline/strikethrough (⌘B / I / U,Sbutton); not yet reusable named text style presets |
| Text resizing modes (auto, fixed, hug) | 🔲 | Figma's auto-width, auto-height, fixed-size text modes |
| Bulleted & numbered lists | 🔲 | List formatting in text |
| Links in text | 🔲 | Hyperlinks within text content |
| Emojis & smart symbols | 🔲 | Emoji rendering and special characters |
| OpenType features | 🔲 | Ligatures, stylistic alternates, tabular figures |
| Variable fonts | 🔲 | Adjustable font axes (weight, width, slant) |
| CJK text support | 🔲 | Chinese, Japanese, Korean text rendering |
| RTL text support | 🔲 | Right-to-left text layout |
| Icon fonts | 🔲 | Special handling for icon font glyphs |
文本渲染依托 CanvasKit 的 Paragraph API 完成字形塑造（shaping）、断行（line-breaking）与度量计算，与 Figma 同为 Skia 渲染引擎（见 技术栈文档）。文字沿路径（Text on a path）是一个典型的"部分支持"功能：能完整走通导入、渲染、选择、缩放、编辑与导出 FigmaTEXT_PATH的链路，但逐字符编辑要求被引用字体的轮廓（outlines）在本地可用——从源码看，文本渲染模块 derived.ts 维护了一个字形轮廓缓存（glyph silhouette cache，上限 512 条），这正是"字符级编辑依赖本地字体轮廓"这一限制的实现背景。字体加载采用双通道：Tauri 桌面端用 font-kit 配合OnceLock缓存与预加载，浏览器端用queryLocalFontsAPI，默认字体为 Inter。
颜色、渐变与图像
| Feature | Status | Notes |
|---|---|---|
| Color picker (HSV) | ✅ | HSV square, hue slider, alpha slider, hex input |
| Solid fills | ✅ | Hex color with opacity |
| Linear gradient | ✅ | Gradient stops, transform handles |
| Radial gradient | ✅ | Rendered via CanvasKit shaders |
| Angular gradient | ✅ | Sweep/conic gradient support |
| Diamond gradient | ✅ | Four-point diamond gradient |
| Image fills | ✅ | Decoded from blob data with scale modes (fill, fit, crop, tile) |
| Pattern fills | 🔲 | Repeating image/pattern fills |
| Blend modes | 🔲 | Layer and fill blend modes (multiply, screen, overlay, etc.) |
| Add images & videos | 🟡 | Image fills rendered; no drag-and-drop image import or video support |
| Image property adjustment | 🔲 | Exposure, contrast, saturation, etc. |
| Crop an image | 🔲 | Interactive image cropping |
| Eyedropper tool | 🔲 | Sample colors from canvas |
| Mixed selection color editing | 🔲 | Adjust colors across heterogeneous selection |
| Color models (RGB, HSL, HSB, Hex) | 🟡 | HSV + Hex in picker; no HSL or RGB mode toggle |
颜色体系通过 culori 库做 HSV/RGB/hex 色彩空间转换（见 技术栈文档）。四种渐变（线性、径向、角向、菱形）均已支持，其中径向/角向等复杂渐变由 CanvasKit shader 直接渲染。图像填充支持从 blob 数据解码，并提供 fill/fit/crop/tile 四种缩放模式。
效果与属性：描边系统是完成度最高的部分
| Feature | Status | Notes |
|---|---|---|
| Drop shadow | ✅ | Offset, blur radius, color via CanvasKit filters |
| Inner shadow | ✅ | Inset shadow effect |
| Layer blur | ✅ | Gaussian blur on layer |
| Background blur | ✅ | Blur content behind layer |
| Foreground blur | ✅ | Blur in foreground |
| Stroke weight | ✅ | Configurable in properties panel |
| Stroke cap (round, square, arrow) | ✅ | NONE,ROUND,SQUARE,ARROW_LINES,ARROW_EQUILATERAL |
| Stroke join (miter, bevel, round) | ✅ | All three join types |
| Dash patterns | ✅ | Dash-on/dash-off stroke pattern |
| Stroke alignment | ✅ | Inside/Center/Outside with clip-based rendering matching Figma behavior |
| Individual stroke weights per side | ✅ | Top/Right/Bottom/Left with side selector dropdown |
| Corner radius | ✅ | Uniform and per-corner radius with independent toggle in properties panel |
| Corner smoothing (iOS-style) | 🔲 | Figma's continuous corner rounding |
| Multiple fills/strokes per layer | 🔲 | Figma allows stacking fills and strokes |
四类投影/模糊效果全部基于 CanvasKit filters 实现。描边系统的完成度值得注意：不仅支持粗细、cap（含箭头线型与等边箭头）、join、虚线模式，还实现了Inside/Center/Outside 三种描边对齐（基于裁剪渲染、对齐 Figma 行为）与四边独立描边粗细；圆角同时支持统一值与四角独立设置。这是"端到端支持"定义最扎实的模块之一。
Auto Layout：Yoga WASM 引擎，含 CSS Grid 分支
| Feature | Status | Notes |
|---|---|---|
| Horizontal & vertical flow | ✅ | Yoga WASM flexbox engine |
Toggle auto layout (⇧A) | ✅ | Toggle on frame or wrap selection |
| Gap (spacing between children) | ✅ | Configurable in properties panel |
| Padding (uniform & per-side) | ✅ | All four sides independently |
| Justify content | ✅ | Start, center, end, space-between |
| Align items | ✅ | Start, center, end, stretch |
| Child sizing (fixed, fill, hug) | ✅ | Per-child sizing modes |
| Wrap | ✅ | Flex wrap for multi-line layout |
| Grid auto layout flow | ✅ | CSS Grid via Yoga fork — column/row tracks, gaps, spans |
| Combined flows (nested) | ✅ | Nested auto-layout frames with different directions |
| Drag reorder within auto layout | ✅ | Visual insertion indicator |
| Min/max width and height | 🔲 | Figma supports min/max constraints on auto-layout children |
Auto Layout 是 Open Pencil 与 Figma 能力对齐最深的模块之一。底层采用 Meta 维护的 Yoga WASM flexbox 引擎（React Native 同源），并通过 Yoga fork 扩展了 CSS Grid 支持（依赖yoga-layout即@open-pencil/yoga-layout@3.3.0-grid.3，见 技术栈文档）。架构文档给出了 Figma 属性到 Yoga 的映射关系：
| Figma Property | Yoga Equivalent |
|---|---|
stackMode: HORIZONTAL | flexDirection: row |
stackMode: VERTICAL | flexDirection: column |
stackSpacing | gap |
stackPadding | padding |
stackJustify | justifyContent |
stackChildPrimaryGrow | flexGrow |
这也意味着⇧A 快捷切换、间距/内边距（含四边独立）、主轴/交叉轴对齐、子项 fixed/fill/hug 尺寸模式、换行、嵌套组合流向（Combined flows）以及基于 Grid 的自动布局流都已可用。
组件与设计系统：覆盖最完整的进阶模块
| Feature | Status | Notes |
|---|---|---|
| Create components | ✅ | ⌥⌘K creates from frame/group or wraps selection; component properties UI supports text, visibility, instance swap, and variants |
| Component sets | ✅ | ⇧⌘K combines components; multidimensional sparse variant authoring with duplicate validation and top-left default |
| Component instances | ✅ | Assets browsing, insertion, editable component properties and overrides, variant switching, live sync, and update review |
| Variants | ✅ | Multidimensional sparse combinations, authoring, instance switching, duplicate validation, and top-left fallback |
| Component properties | ✅ | Authoring and instance editing for boolean visibility, text, and instance-swap properties |
| Override propagation | ✅ | Changes to main component propagate to all instances; overrides preserved |
| Variables (color, number, string, boolean) | 🟡 | COLORfull UI (dialog, TanStack Table, inline editing, undo/redo, demo collections);FLOAT/STRING/BOOLEAN defined but no editing UI |
| Variable collections & modes | 🟡 | Collections, modes, activeMode switching work; no variable-driven theming UI yet |
| Styles (color, text, effect, layout) | 🔲 | Reusable named style presets |
| Libraries (publish, share, update) | ✅ | Immutable local/storage revisions, selective publication, enablement, scoped update review, offline materialization, and.figpersistence |
| Detach instance | ✅ | ⌥⌘B converts instance back to frame |
| Go to main component | ✅ | Navigate to source component, cross-page |
组件体系是完整支持项最多的进阶模块：创建、组件集、实例、变体、组件属性、覆写传播、脱离实例、跳转主组件均已实现。尤其值得关注的是多维稀疏变体（multidimensional sparse combinations）——这是 Figma 变体系统的关键行为，Open Pencil 实现了重复校验与"左上角默认"（top-left default）回退规则。变量系统处于半程状态：COLOR类型已有完整 UI（对话框、TanStack Table、内联编辑、undo/redo、示例集合），而FLOAT/STRING/BOOLEAN虽已定义但尚无编辑 UI；变量集合与 mode 的切换可用，但缺少变量驱动的主题化 UI。库（Libraries）支持不可变本地/存储版本、选择性发布、启用控制、作用域更新审查、离线物化与.fig持久化。
原型设计：整体未实现
| Feature | Status | Notes |
|---|---|---|
| Prototype connections | 🔲 | Not supported yet |
| Triggers (click, hover, drag, etc.) | 🔲 | Not supported yet |
| Actions (navigate, overlay, scroll, etc.) | 🔲 | Not supported yet |
| Animations & transitions | 🔲 | Not supported yet |
| Smart animate | 🔲 | Auto-animate matching layers |
| Overlays | 🔲 | Modal/popover prototyping |
| Scroll & overflow behavior | 🔲 | Scrollable frames in prototypes |
| Prototype flows | 🔲 | Named starting points |
| Variables in prototypes | 🔲 | Conditional logic with variables |
| Easing & spring animations | 🔲 | Custom animation curves |
| Present & play prototypes | 🔲 | Fullscreen prototype viewer |
原型设计的全部 11 项功能均为"尚未实现"状态，是矩阵中唯一整体空白的模块。这与 架构文档 的路线图一致：当前"预览（Preview）"能力聚焦于把带行为的组件作为 Reka UI 控件以实时孤岛（live islands）形式叠加渲染到画布上，原型交互（帧间转场、交互触发器、遮罩/Overlay）被列为 Next 阶段规划。
导入与导出：.fig 双向互操作的实现基石
| Feature | Status | Notes |
|---|---|---|
| .fig file import | ✅ | Full Kiwi codec: 194 definitions, ~390 fields perNodeChange |
| .fig file export | ✅ | Kiwi encoding + Zstd compression + thumbnail generation;COMPONENT/COMPONENT_SET mapped toSYMBOLfor round-trip |
| Save / Save As | ✅ | ⌘S /⇧⌘S; native dialogs (Tauri), File System Access API (Chrome/Edge), download fallback (Safari) |
| Figma clipboard (paste) | ✅ | Decode Kiwi binary from Figma clipboard |
| Figma clipboard (copy) | ✅ | Encode Kiwi binary that Figma can read |
| Sketch file import | 🔲 | .sketch file parsing |
| Image/SVG/PDF export | 🟡 | PNG/JPG/WEBP/SVG export ✅; PDF export 🔲 |
| Version history | 🔲 | Browse and restore previous versions |
| Copy assets between tools | ✅ | Figma clipboard (Kiwi binary), Copy as text/SVG/PNG/JSX |
导入导出是 Open Pencil 兼容性的根基——它直接复用 Figma 的 Kiwi 二进制编解码器。结合 文件格式参考 与 kiwi 包说明，这一层的实现细节非常扎实：
- .fig 文件结构：
.fig实为 ZIP 归档，内含fig-kiwi魔数头（8 字节）、版本（4 字节 uint32 LE）、schema 长度、压缩的 Kiwi schema、消息长度、压缩的 Kiwi 消息（NodeChange[]，即整个文档）以及 blob 数据（图像、矢量网络、字体）。 - Kiwi 编解码器：覆盖 Figma 的 194 条 message/enum/struct 定义，核心类型
NodeChange约 390 个字段；Figma 的 schema 使用不连续字段 ID（如 1、2、5、10 之间有空洞），kiwi-schema 解析器对此做了正确处理。 - 压缩策略：
.fig的 schema 与消息载荷均使用 Zstd 压缩；桌面端由 Tauri Rust 命令离线执行压缩（性能更好且帧头正确），浏览器端以 fflate 的 deflate 作为回退。 - 导出管线：SceneGraph →
NodeChange[]→ Kiwi encode → 压缩 → 构建 ZIP（header + schema + message +thumbnail.png）。缩略图对 Figma 预览是必需的：Open Pencil 优先使用名为Cover（不区分大小写）的页面，其次选择名字包含Cover的页面。 - 剪贴板双向互操作：复制时将选中节点的
NodeChange[]编码为 Kiwi 二进制并压缩，以application/x-figma-designMIME 类型写入剪贴板；粘贴时反向解码并创建节点。编码在 copy 事件处理函数中同步完成（而非异步 Clipboard API），以保证浏览器兼容性——这使 Open Pencil 与 Figma 之间的双向剪贴板成为现实。 - 导出格式：
packages/core/src/io/formats.ts中的BUILTIN_IO_FORMATS列出了完整内置格式：.fig、.pen、.png、.jpg、.webp、.svg、.pdf、.pptx、.jsx、tailwind-jsx、.html。注意矩阵中标注 PDF 导出尚未实现，与源码中 pdf 适配器的实际状态需要以运行版本为准。
插件 API 与脚本：Headlesseval暴露 Figma 插件面
| Feature | Status | Notes |
|---|---|---|
| Eval command with Figma Plugin API | ✅ | Headless JavaScript execution with figma global object matching Figma's plugin surface |
这是矩阵中单列的功能项，却代表着 Open Pencil 与 Figma 生态对齐的一条重要路径：CLI 的eval命令提供无头 JavaScript 执行环境，注入与 Figma 插件 API 表面一致的figma全局对象（另有openpencil全局暴露 Open Pencil 扩展能力，如组件行为与 slots）。CLI 命令集（见 CLI 包说明 与 命令源码目录）涵盖info、tree、find、export、analyze、node、pages、variables、eval等，且支持--json输出以对接自动化。一个最小示例：
openpencil eval design.fig -c "return figma.currentPage.children.length"协作与开发者模式：P2P 实时协作是独特能力
| Feature | Status | Notes |
|---|---|---|
| Comments (pin, thread, resolve) | 🔲 | Not supported yet |
| Real-time multiplayer | ✅ | P2P via Trystero + Yjs CRDT, cursors, follow mode; no server required |
| Cursor chat | 🔲 | Inline chat bubbles at cursor |
| Branching & merging | 🔲 | Version branches for design files |
| Dev Mode (inspect) | 🟡 | Code tab shows JSX representation of selection; no CSS properties or handoff specs |
| Code Connect | 🔲 | Link design components to code |
| Code snippets | 🟡 | JSX export with syntax highlighting and copy; no CSS/Swift/Kotlin snippets |
| Tailwind CSS v4 export | ✅ | Export as HTML with Tailwind utility classes from Code panel, CLI, or programmatically |
| Figma for VS Code | 🔲 | Editor plugin integration |
| MCP server | ✅ | @open-pencil/mcp with stdio + HTTP transports; 87 core tools + 3 file management tools = 90 total |
| CLI tools | ✅ | Headless CLI: info, tree, find, export, analyze, node, pages, variables, eval; MCP server with stdio + HTTP |
实时多人协作是 Open Pencil 相对 Figma 的差异化能力：通过 Trystero（WebRTC）+ Yjs CRDT 实现纯 P2P 协作，无服务器中继——信令走 MQTT 公共 broker，STUN/TURN 负责 NAT 穿越，支持实时光标、跟随模式与 y-indexeddb 本地持久化（见 架构文档）。这与 Figma 的服务器端多人协作架构完全不同，是开源方案特有的部署优势。
开发者模式方面：代码面板可显示当前选区的 JSX 表示并支持语法高亮与复制（缺 CSS/Swift/Kotlin 片段）；Tailwind CSS v4 导出是完整支持项——源码 formats.ts 中tailwindJSXFormat适配器通过@open-pencil/dom-css/export的sceneNodesToTailwindJSX将选中节点转换为带 Tailwind 工具类的 HTML/JSX，可从代码面板、CLI 或程序化调用导出。MCP 服务器（@open-pencil/mcp）提供 stdio 与 HTTP 双传输，共 90 个工具（87 个核心工具 + 3 个文件管理工具）。
Figma Draw：专项绘图工具尚未跟进
| Feature | Status | Notes |
|---|---|---|
| Illustration tools | 🔲 | Figma Draw's specialized drawing tools |
| Pattern transforms | 🔲 | Create repeating patterns with transforms |
Figma Draw（Figma 的插画专项功能集）的两项能力均未实现。
兼容性边界与实战建议
综合矩阵与仓库文档，使用 Open Pencil 处理 Figma 文件时有几条值得注意的边界：
- 圆环回写保真度有限：复杂 Figma 文档经 Open Pencil 保存后再由 Figma 打开，组件内容、颜色、文本可能差异或缺失。文件格式参考 给出的建议是：保留原始
.fig，用Save As另存 Open Pencil 副本，在替换原件前先在 Figma 中检查导出副本。 - 两类能力的"半程"属性：文本沿路径的字符级编辑依赖本地字体轮廓可用；变量系统仅
COLOR具备完整 UI。这两处都需要根据实际工作流评估是否可接受。 - 原型设计整体空白：如果你的项目高度依赖 Figma 原型交互（触发器、动画、Smart Animate、Overlay），当前版本无法承接，需要继续使用 Figma 或等待路线图中的原型功能落地。
- 强项明确：图层/形状、组件体系、Auto Layout、效果/描边、.fig 双向导入导出与 Kiwi 剪贴板、Tailwind v4 导出、P2P 协作是当前最值得投入的切入点——这些能力覆盖了"从 Figma 迁移设计稿 + 代码导出 + 多人实时编辑"的主流场景。
附：兼容性矩阵的查看方式
上述全部数据来自仓库内的官方矩阵文档 packages/docs/reference/figma-compatibility.md（另有 de/es/fr/it/pl/ru 五个语言版本位于 packages/docs 对应语言目录下）。该文档以"逐功能项对照表 + 状态图例"的形式维护，标注了最后更新日期（2026-03-07），是判断 Open Pencil 当前能力边界的第一手权威依据；如需深入某个功能模块的实现细节，可按文中给出的源码路径继续追读。
- 前端
- 桌面应用
- AI 应用
- MCP 服务
【免费下载链接】open-pencil
AI-native design editor. Open-source Figma alternative.
相关推荐
OpenPencil Figma 兼容性矩阵全解析：158 项功能逐项对照与实现现状
OpenPencil Figma 兼容性矩阵全解析：158 项功能逐项对照与实现现状 本文基于开源仓库 packages/docs/reference/figm
前端桌面应用AI 应用MCP 服务OpenPencil 与 Figma 功能兼容性矩阵：94 项特性逐项对照与实现深度解析
OpenPencil 与 Figma 功能兼容性矩阵：94 项特性逐项对照与实现深度解析 OpenPencil 是一个开源的 AI 原生设计编辑器（Figma
前端桌面应用AI 应用MCP 服务OpenPencil 的 Figma 兼容性全景：158 项功能逐项对比与实现现状解析
OpenPencil 的 Figma 兼容性全景：158 项功能逐项对比与实现现状解析 本文档（ packages/docs/es/reference/figm
前端桌面应用AI 应用MCP 服务
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
