★ FEATURED ARTICLE 前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载本文档packages/docs/es/reference/figma-compatibility.md以功能矩阵的形式逐项对比了 Figma Design 的 158 项核心能力与开源 AI 原生设计编辑器 OpenPencil 的当前实现状态。阅读本文后你可以快速掌握 OpenPencil 已覆盖的 94 项功能、18 项部分支持与 64 项待实现能力的具体边界并了解每项能力背后的仓库源码支撑Kiwi 编解码、CanvasKit 渲染、Yjs 协作、CLI 工具链等从而准确判断 OpenPencil 是否满足你的迁移、二次开发或插件兼容需求。一、功能矩阵总览与状态图例Figma 兼容性是 OpenPencil 设计能力评估的核心指标。官方以「逐功能对照表」的方式维护这份矩阵每个条目对应 Figma Design 中的一项具体能力并标注 OpenPencil 的实现程度。表格采用三种状态标识✅兼容Supported——该功能端到端可用部分支持Partial——核心行为已存在但缺少部分子功能未实现Not yet implemented——当前版本尚无对应能力。截至文档更新时间2026-03-07矩阵覆盖158 项Figma 功能条目其中94 项已纳入实现评估 —— 76 项 ✅ 完全支持、18 项 部分支持、64 项 尚未实现。这一统计口径同时体现在 packages/docs/reference/figma-compatibility.md英文原版及其西班牙语、法语、意大利语、波兰语、俄语等多语言译本中各语言版本内容保持一致。二、界面与导航Interface Navigation2.1 已完整支持的界面能力功能状态说明工具栏✅UI3 风格底部工具栏选择Select、画板Frame、分区Section、矩形、椭圆、直线、文本、手型Hand与钢笔Pen图层面板左侧栏✅树形展开/折叠视图、拖拽排序、可见性切换、可调宽度页面面板✅创建、删除、重命名页面每页独立的视口状态属性面板右侧栏✅分区包含外观、填充、描边、效果、排版、布局与位置可调宽度缩放与平移✅Ctrl 滚轮、捏合手势、⌘/⌘−/⌘0100%/⌘1适应/⌘2选中、Space 拖拽、中键平移、手型工具H标尺✅顶部与左侧标尺带选区高亮带与坐标徽标画布背景✅通过属性面板设置每页独立背景色右键菜单✅剪贴板、层级顺序、编组、组件、可见性、锁定与移动至页面等操作应用菜单浏览器模式✅文件、编辑、视图、对象、文本与排列菜单Tauri 桌面端使用原生菜单其中标尺与画布交互的实现位于 packages/core/src/canvas/rulers.ts 与 packages/core/src/canvas/ 下的渲染模块与 Figma 的选区高亮与坐标提示行为保持一致。2.2 部分支持与待实现项功能状态说明快捷键核心快捷键、组件、层级顺序、可见性/锁定已实现缩放工具、箭头、铅笔、翻转及部分文本格式尚未接线AI 工具经 OpenRouter 与 MCP 服务器提供 90 个工具尚不支持 AI 生成图片或 AI 驱动的搜索画布参考线无法从标尺拖出参考线操作菜单/命令面板缺少 Figma 的快速动作搜索查找与替换无跨文档文本搜索/替换图层轮廓视图无全图层线框视图自定义文件缩略图导出时会生成缩略图但无法自选微调步长设置默认 1px/10px不支持自定义步长三、图层与形状Layers Shapes3.1 基础形状与图层操作功能状态说明形状工具矩形、椭圆、直线、多边形、星形✅支持全部基础形状多边形边数与星形内半径可配置画板Frame✅内容裁剪、独立坐标系、Figma 风格创建与尺寸预设编组✅⌘G编组、⇧⌘G取消编组分区Section✅标题药丸、自动收纳重叠节点、随亮度自适应文字圆弧工具弧、半圆、圆环✅arcData含起始/结束角度与内半径图层类型与层级✅17 种节点类型扁平 Map 父子树结构选择✅单击、Shift 连选、框选对齐与位置✅属性面板中可调位置、旋转与尺寸复制与粘贴✅标准剪贴板 Figma Kiwi 二进制格式支持复制为文本/SVG/PNG/JSX锁定与解锁✅⇧⌘L切换锁定锁定节点无法从画布选中/移动可见性切换✅图层面板眼睛图标 ⇧⌘H快捷键重命名图层✅图层面板双击内联重命名Enter/Escape/失焦提交置前/置后✅]与[快捷键右键菜单同样可用移动到页面✅右键菜单将选中节点跨页移动批量编辑✅多选属性面板可编辑位置、尺寸、外观、填充、描边与效果相同值正常显示不同值显示Mixed父子关系✅基于parentIndex的完整层级拖拽即可换父容器「圆弧工具」所依赖的arcData解析与渲染逻辑分散于 packages/core/src/canvas/strokes.ts、packages/core/src/canvas/fills.ts 及 packages/core/src/canvas/boolean.ts并能在 SVG 导入/导出packages/core/src/io/formats/svg/paths.ts中完整往返。3.2 部分支持与待实现项功能状态说明等比缩放Shift 缩放保持比例无独立缩放工具K铅笔手绘工具无自由手绘蒙版无形状蒙版裁剪约束响应式缩放无边缘/中心锚定智能选择不提供多选均匀分布/对齐布局参考线无列/行/网格叠加参考线测量间距无 Alt 悬停测距查找相似对象不识别匹配图层复制/粘贴属性无法跨图层复制填充/描边/效果四、矢量工具Vector Tools4.1 矢量编辑现状功能状态说明矢量网络✅与 Figma 兼容的模型而非简单路径钢笔工具✅角点、贝塞尔曲线、开放/闭合路径矢量编辑可创建高级顶点编辑弯曲、删点、连接受限「矢量网络」与布尔运算底层实现在 packages/scene-graph/vector-network.ts 与 packages/core/src/canvas/boolean.ts 中采用与 Figma 一致的网络半边缘模型存储。4.2 待实现项布尔运算并集、减去、交集、排除、平整图层、描边转路径、文本转路径、形状构建器、路径偏移内缩/外扩、路径简化均为 未实现状态。注意 packages/kiwi/README.md 中的一条关键约束布尔运算负载使用 Figma 的 Kiwi 枚举名SceneGraph 层的EXCLUDE是核心层概念调用底层编解码器前应序列化为 Kiwi 的XOR——这为未来接入布尔运算保留了协议级兼容空间。五、文本与排版Text Typography5.1 已实现能力功能状态说明文本工具与内联编辑✅画布原生编辑、透明 textarea、光标/选区/词选、拖选、双击/三击、富文本样式区间⌘B/I/U、S按钮文本渲染Paragraph API✅CanvasKit Paragraph 完成字形塑造、断行与度量系统字体加载✅默认 InterTauri 端 font-kitOnceLock 缓存 预加载浏览器端queryLocalFonts字体族与字重✅FontPicker 虚拟滚动、搜索、CSS 预览属性面板可调字重字号与行高✅排版分区中可编辑文本路径TEXT_PATH可导入、渲染、选择、缩放、编辑并导出 FigmaTEXT_PATH逐字编辑需本地具备所引用字体的轮廓字体加载的浏览器分支在 packages/core/src/text/fonts.ts 中直接调用queryLocalFonts类型声明见 packages/core/src/global.d.ts桌面端则走 font-kit 的 OnceLock 缓存路径两者共同支撑了「系统字体」这一 ✅ 能力。5.2 部分支持与待实现项功能状态说明文本对齐基础对齐已实现缺少垂直对齐与自动宽/高模式文本样式支持按选区加粗/斜体/下划线/删除线无可复用命名样式预设尺寸模式无自动宽度、自动高度、固定尺寸模式列表无项目符号/编号列表超链接文本内无超链接Emoji 与符号渲染兼容性不完整OpenType无连字、风格化变体、表格数字可变字体不可调字轴字重、宽度、倾斜CJK中日韩文本渲染兼容性不完整RTL无右到左排版图标字体无字形特殊处理六、颜色、渐变与图像Color, Gradients Images6.1 填充体系功能状态说明取色器HSV✅HSV 方块、色相滑杆、透明度滑杆、十六进制输入纯色填充✅十六进制颜色 不透明度线性渐变✅渐变停靠点 变换手柄径向渐变✅经 CanvasKit shader 渲染角向渐变✅锥形/扫掠渐变菱形渐变✅四点菱形渐变图片填充✅从 blob 数据解码缩放模式含填充、适配、裁剪与平铺渐变与图片填充的实际渲染由 packages/core/src/canvas/fills.ts 与 packages/core/src/canvas/gradients/ 负责均构建于 CanvasKit 之上。6.2 部分支持与待实现项功能状态说明添加图片与视频可渲染图片填充不支持拖拽导入或视频颜色模型取色器支持 HSV 十六进制无 HSL/RGB 模式切换图案填充无重复图案混合模式无图层/填充混合模式正片叠底、滤色、叠加等图像调整无曝光、对比度、饱和度等裁剪图片无交互式裁剪吸管工具无法从画布取色混合选区调色无法跨异构选区调色七、效果与属性Effects Properties7.1 阴影、模糊与描边功能状态说明外阴影✅偏移、模糊半径、颜色经 CanvasKit 滤镜实现内阴影✅内嵌阴影效果图层模糊✅高斯模糊背景模糊✅模糊图层后方内容前景模糊✅模糊前方内容描边粗细✅属性面板可配置描边端点✅NONE、ROUND、SQUARE、ARROW_LINES、ARROW_EQUILATERAL描边连接✅斜接、斜面、圆角三类虚线✅实/空段描边图案描边对齐✅内/中心/外基于裁剪的渲染与 Figma 行为一致各边独立描边粗细✅上/右/下/左带侧边选择器圆角半径✅统一或逐角圆角属性面板独立开关阴影实现见 packages/core/src/canvas/shadows.ts模糊与描边相关逻辑分布在 packages/core/src/canvas/effects.ts 与 packages/core/src/canvas/strokes.ts。7.2 待实现项功能状态说明圆角平滑iOS 风格无连续圆角单层多填充/多描边不支持堆叠填充与描边八、自动布局Auto Layout8.1 布局引擎与完整能力功能状态说明水平与垂直流✅Yoga WASM flexbox 引擎切换自动布局✅画板或包选后按⇧A间距✅属性面板可配置内边距✅四边独立主轴对齐✅起点、居中、终点、space-between交叉轴对齐✅起点、居中、终点、拉伸子项尺寸✅固定、填充、贴合换行✅Flex wrap 多行布局Grid 自动布局✅基于 Yoga 分支的 CSS Grid——列/行轨道、间距、跨格嵌套流✅不同方向的嵌套自动布局画板自动布局内拖拽排序✅可视化插入指示器自动布局的引擎层位于 packages/core/src/layout/以 Yoga WASM 为运行时Grid 能力通过定制分支扩展出轨道与跨格语义。8.2 待实现项功能状态说明最小/最大宽高Figma 支持自动布局子项的最小/最大约束九、组件与设计系统Components Design Systems9.1 组件体系全链路功能状态说明创建组件✅⌥⌘K从画板/编组创建或包裹选区组件属性 UI 支持文本、可见性、实例交换与变体组件集✅⇧⌘K合并组件多维稀疏变体创作、重复校验、左上默认值组件实例✅资源浏览、插入、可编辑组件属性与覆盖、变体切换、实时同步、更新审查变体✅多维稀疏组合、创作、实例切换、重复校验、左上回退组件属性✅布尔可见性、文本、实例交换属性的创作与实例编辑覆盖传播✅主组件变更传播到全部实例且保留覆盖分离实例✅⌥⌘B将实例还原为画板跳转到主组件✅跨页导航到源组件资源库Libraries✅不可变本地/存储修订、选择性发布、启用、范围化更新审查、离线物化与.fig持久化9.2 部分支持与待实现项功能状态说明变量COLOR完整 UI对话框、TanStack Table、内联编辑、撤销/重做、演示集合FLOAT/STRING/BOOLEAN已定义但无编辑 UI变量集合与模式集合、模式、activeMode 切换可用无变量驱动主题化 UI样式颜色/文本/效果/布局无可复用命名样式预设十、原型Prototyping原型相关能力当前整体未实现。英文版矩阵逐项列出了 状态的功能面包括原型连接、触发器点击/悬停/拖拽等、动作导航/叠加/滚动等、动画与转场、智能动画Smart Animate、叠加层模态/弹层、滚动与溢出行为、原型流程命名起始点、原型变量条件逻辑、缓动与弹簧动画、全屏原型演示。西班牙语文档则以一句话概括连接、触发器、动作、动画、转场、叠加、滚动、流程、条件逻辑、曲线与全屏演示均尚未提供。总之原型链路是 OpenPencil 与 Figma 差距最大的模块之一适合用作后续版本规划的观察点。十一、导入与导出Import Export11.1 文件格式互操作功能状态说明导入.fig✅完整 Kiwi 编解码器194 个定义每个NodeChange约 390 个字段导出.fig✅Kiwi 编码 Zstd 压缩 缩略图生成COMPONENT/COMPONENT_SET映射为SYMBOL以支持往返保存 / 另存为✅⌘S/⇧⌘STauri 原生对话框、Chrome/Edge 的 File System Access API、Safari 下载回退从 Figma 粘贴✅解码剪贴板中的 Kiwi 二进制复制到 Figma✅生成 Figma 可读的 Kiwi 二进制图片/SVG/PDF 导出PNG/JPG/WEBP/SVG ✅PDF 跨工具搬运资源✅Figma 剪贴板Kiwi 二进制 复制为文本/SVG/PNG/JSXKiwi 是 OpenPencil 与 Figma 二进制互通的基石其协议定义存放在 packages/kiwi/src/fig/schema/fig.kiwi5623 行的 schema 源文件定义NodeChanges、MessageType、NodePhase等枚举与消息结构编解码实现见 packages/kiwi/src/fig/codec.ts、容器封装见 packages/kiwi/src/fig/container.ts。正如 packages/kiwi/README.md 所描述的该运行时基于 Evan Wallace 的 KiwiMIT License改编并保持了「不依赖核心/应用/Vue/CLI/MCP 代码」的纯净边界。完整.fig归档含图片资源的解析则由open-pencil/fig承担再经open-pencil/core/io转换为可编辑的 SceneGraph。11.2 待实现项功能状态说明Sketch 导入无.sketch解析器版本历史无法浏览与还原历史版本十二、插件 API 与脚本Plugin API Scripting功能状态说明带 Figma Plugin API 的eval✅无头 JavaScript 执行figma全局对象与 Figma 插件接口面匹配这是 OpenPencil 最具迁移价值的能力之一已接入 Figma 插件生态的脚本理论上可以通过eval命令在 OpenPencil 中无头运行。该命令的实现位于 packages/cli/src/commands/eval.tsCLI 整体入口见 packages/cli/src/index.ts。十三、协作与开发者模式Collaboration Dev Mode13.1 已实现能力功能状态说明实时多人在线✅基于 Trystero Yjs CRDT 的 P2P 协作支持光标与跟随视图无需服务器Tailwind CSS v4 导出✅从代码面板、CLI 或程序化方式导出带 Tailwind 工具类的 HTMLMCP 服务器✅open-pencil/mcp支持 stdio 与 HTTP 传输共 90 个工具87 个核心工具 3 个文件管理工具CLI 工具✅无头 CLIinfo、tree、find、export、analyze、node、pages、variables、eval实时协作的传输层与 CRDT 同步分别位于 src/app/collab/transport/trystero.ts 与 src/app/collab/yjs-sync.tsP2P 直连的架构使多人在线不需要中心服务器。CLI 各子命令与文档矩阵一一对应例如info、tree、find、export、analyze、node、pages、variables分别对应 packages/cli/src/commands/ 下的同名文件MCP 服务器实现见 packages/mcp/可通过open-pencil/mcp接入支持 MCP 的 AI 客户端。13.2 部分支持与待实现项功能状态说明开发者模式检查代码标签页展示选区的 JSX 表示无 CSS 属性或交付规格代码片段JSX 导出带语法高亮与复制无 CSS/Swift/Kotlin 片段评论无标记、线程或解决光标聊天画布上无内联聊天气泡分支与合并无版本分支Code Connect不将设计组件链接到代码Figma for VS Code无编辑器插件集成十四、Figma Draw功能状态说明插画工具无 Figma Draw 专用绘图工具图案变换无带变换的重复图案生成Figma Draw 作为 Figma 中较新的插画工具集在 OpenPencil 中尚未启动实现。十五、结论兼容边界与适用判断从 158 项对比矩阵可以得出几条务实结论核心设计编辑闭环已打通界面导航、图层形状、矢量网络、文本排版、渐变填充、效果属性、自动布局、组件体系、.fig导入导出等 76 项核心能力完全支持日常设计稿的创建、编辑与 Figma 文件往返已可端到端工作。互操作是最大差异化优势基于 Kiwi 的.fig双向编解码packages/kiwi/src/fig/与 Figma 剪贴板互通加上 90 工具的 MCP 服务器与 9 个子命令的 CLI使 OpenPencil 既能作为 Figma 的替代编辑器也能无缝嵌入 AI/自动化工作流。明确的未覆盖面原型Prototyping、布尔运算、文本高级排版列表/链接/OpenType/CJK/RTL、混合模式、样式系统Styles、版本历史与 Sketch 导入仍是 状态变量、开发者模式等 18 项能力处于「核心可用、细节待补」的部分支持阶段。如果你正在评估从 Figma 迁移或在其生态上构建工具链建议先以本矩阵中 ✅ 清单核对你的核心工作流尤其是.fig往返与插件eval兼容再针对 项做小规模验证最后将 项列入风险清单。矩阵的持续维护最近更新于 2026-03-07也意味着这份兼容边界会随版本迭代不断收窄——值得作为长期跟踪的基准文档。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 功能全景解析Figma 文件兼容、AI 设计助手与 CLI/MCP 自动化OpenPencil 功能全景解析Figma 文件兼容、AI 设计助手与 CLI/MCP 自动化 OpenPencil 是一款 AI 原生的开源设计编辑器定前端桌面应用AI 应用MCP 服务es-toolkit compat 版 dropRight 全解析从 Lodash 兼容 API 到现代实现的性能对比es toolkit compat 版 dropRight 全解析从 Lodash 兼容 API 到现代实现的性能对比 dropRight 是 es tool前端后端MicroPython 对 Python 3.5 特性支持全景PEP 逐项实现状态、语法与标准库差异深度解析MicroPython 对 Python 3.5 特性支持全景PEP 逐项实现状态、语法与标准库差异深度解析 导读 Python 3.5 是 CPython嵌入式语言运行时编程语言解释器编译器物联网系统编程上一篇FunClip终极指南3步掌握本地AI视频剪辑神器下一篇LizzieYzy你的围棋AI分析教练 - 从复盘困惑到精准提升的解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
