前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载组件是 OpenPencil开源 Figma 替代方案中最核心的复用机制编辑一次主组件所有关联的实例自动更新。本篇指南以 packages/docs/ru/user-guide/components.md及同仓库英文版 packages/docs/user-guide/components.md为主线结合编辑器内核源码完整讲解组件的浏览、创建、变体组合、组件属性、插槽Slots、行为Behaviours与预览以及组件库的发布、连接、离线使用与更新验收流程。读完你可以系统掌握 OpenPencil 的组件工作流并理解其底层实现原理与快捷键体系。组件是什么组件Component是 OpenPencil 中可复用的设计元素。它的核心特性是单向同步修改主组件后文档中所有引用它的实例都会自动更新。这一机制保证了设计系统的一致性——按钮、卡片、表单控件等基础元素只需维护一个定义即可驱动整个文档。从引擎实现看组件在场景图中是独立的节点类型在 packages/core/src/editor/components.ts 中可以看到COMPONENT、COMPONENT_SET、INSTANCE是wrapSelectionInContainer支持创建的三种容器类型实例则通过createInstance从组件派生。与组件相关的全部动作创建、变体、实例、属性、插槽、行为都在该模块的createComponentActions(ctx)中统一组织并通过菜单命令selection.createComponent、selection.createComponentSet、selection.createInstance等暴露给界面见 src/app/shell/menu/schema.ts。浏览组件资源Assets 面板打开左侧面板的Assets标签页可以浏览本地组件与已启用的组件库资源。面板提供网格视图 / 列表视图两种展示方式按组件名进行搜索点击选中组件后查看其详细信息。添加资源到画布有三种方式单击、按Enter键、或直接拖拽到画布上。本地资源按来源页面分组来自库的资源只要对应修订版本revision已下载即使在远程提供方暂时离线时也仍然可用。Assets 面板的前端实现位于 src/components/assets-panel/AssetsPanel.vue其中通过libraryService.enabledAssets读取已启用库的远端资源并合并展示本地与远端两类资源remoteAssets携带libraryId、libraryName、revisionId、asset字段资源按所在页面归类见 src/components/assets-panel/page.ts 的findAssetPage。创建组件选中一个帧Frame或组Group按下快捷键macOS⌥⌘KWindows / LinuxCtrlAltK选区即变成一个可复用组件。若选中多个对象OpenPencil 会把它们放入一个新组件中新组件的边界取所有对象的公共包围盒。创建后组件上方会显示一个紫色标签 菱形图标始终可见。引擎层的行为packages/core/src/editor/components.ts区分两种情况只选中一个节点且该节点可转化为组件becomesComponent(node)为真典型如 FRAME时直接将该节点的类型原地改为COMPONENT并作为一步可撤销操作undo.push记录选中多个节点时通过wrapSelectionInContainer(COMPONENT, ...)将选区包裹进新的COMPONENT容器。菜单中对应的命令是Object → Create Componentselection.createComponent快捷键注册于 src/app/shell/keyboard/registry.ts。组件集与变体Component Sets Variants组件集用于组织多维变体。选中两个及以上组件按下macOS⇧⌘KWindows / LinuxShiftCtrlKOpenPencil 会把这些组件合并为一个组件集——一个带紫色虚线边框的容器内部有 20 像素的内边距行为与 Figma 一致。测试 packages/core/tests/editor/components/combine-variants.test.ts 验证了画布命令的具体表现组件集向外扩展 20 像素、cornerRadius 5、描边weight: 1、align: INSIDE、虚线模式dashPattern: [10, 5]。而通过插件 API 的figma.combineAsVariants()见 packages/core/src/figma-api创建的组件集则与 Figma 插件 API 一致恰好包裹各组件而不加内边距。每个组件集内的组件可以定义多个变体维度的取值组合例如SizeSmall StateHover ThemeDarkOpenPencil 支持稀疏组合sparse combinations即无需为每个维度值都创建穷举组合左上角的变体是默认变体当某次更新后不存在某个精确组合时它作为回退替身使用在组件属性面板中可以添加、重命名、重新排序、删除变体维度及其取值重复的组合会被拒绝源码 packages/core/src/editor/components/variants/definitions.ts 中的addPropertyDefinition、renamePropertyDefinition、removePropertyDefinition、reorderPropertyDefinitions、renameVariantValue、setVariantPropertyValue以及hasDuplicateCombination校验完整实现了这些操作。引擎侧的创建流程packages/core/src/editor/components.ts要求选区中每个节点都必须是COMPONENT类型少于两个直接返回然后以COMPONENT_SET类型包裹并通过applyVariantProperties应用变体属性。组件属性Component Properties组件与组件集支持可复用属性包含四种类型类型说明文本TEXT绑定到子对象的文本字段实例中可独立修改文字布尔可见性BOOLEAN控制子对象的显示/隐藏实例替换INSTANCE_SWAP在实例中替换嵌套的组件实例插槽SLOT允许实例替换/增减插槽内容见下文用法把一个属性绑定到子对象descendant的某个字段之后在任意实例上都可以直接修改该值而无需分离实例。属性定义与赋值都会保存在.fig文件中重新打开后保持。实现上属性赋值与恢复的逻辑集中在 packages/core/src/editor/components/properties.ts文本属性读取节点的TEXT字段INSTANCE_SWAP类型通过swapTargetId解析目标组件并写入赋值相关测试见 packages/core/tests/editor/components/properties.test.ts。插槽Slots插槽是一个主组件内部的帧frame每个实例都可以改变其内容。创建方式选中主组件内部的某个帧在右键菜单或 Slots 区域选择Create slot或选中其他图层将它们包裹进一个新的插槽帧中见 packages/scene-graph/src/slots/authoring.ts 与 packages/core/src/editor/components/slots/authoring.ts 的createSlotAuthoringActions。插槽设置可以指定描述description偏好的组件preferred components可容纳条目的数量上限/下限limits——实例内容超出限制时会显示警告。在实例中可以添加、重排、删除插槽条目也可以重置回主组件的内容。插槽的层级规则在 packages/scene-graph/src/slots/content.ts 中定义得非常清晰用SlotScope区分三种状态free组件定义之外、可自由增删图层slot位于实例某个插槽内实例拥有或可认领其内容locked实例内其他位置图层必须来自组件本身。行为Behaviours与实时预览行为让主组件或组件集像一个真正的控件那样工作其底层借鉴 Reka UI 的原语设计。目前支持的控件种类定义于 packages/scene-graph/src/behaviours/kinds.ts 的BEHAVIOUR_KINDSbutton, textField, textarea, numberField, toggle, switch, checkbox, radio, radioGroup, toggleGroup, slider, progress, tabs, collapsible, accordion选中组件后在Behaviour区域点击选择一个行为。行为绑定面板会列出该控件需要的内容Values值——承载每个值的属性布尔/变体属性用于 On、Checked、Pressed、Open、Filled、Disabled并指定哪些变体值表示开/关文本属性用于输入框的文字滑块则有自己的最小、最大、步进与默认值Parts部件——绘制每个部件所用的插槽如开关的滑块thumb、滑块的轨道/范围/滑块、标签页列表等组的 items 插槽承载其 radio、toggle 或 collapsible 实例States状态——一个变体属性其取值分别绘制默认rest、悬停hover、按下pressed、聚焦focus、禁用disabled五种状态INTERACTION_STATES定义于 packages/scene-graph/src/behaviours/kinds.ts。名称与这些状态相似的取值会被自动匹配。控件必需的绑定行排在前面其余归入More options。当组件还没有可绑定的内容时面板会主动提供一键创建文本图层 文本属性、Off/On 两个变体、或一个插槽States区提供Add state variants自动为组件添加 Default、Hover、Pressed、Focus、Disabled 五个变体。注意单独的主组件若通过此方式获得变体会自动升级为组件集给组件集添加插槽则会在每个变体中都出现。在控件可用之前其名称下方会显示一行提示还缺少什么点击即可跳转。进入预览有三种方式快捷键⌥⌘↩Windows/LinuxCtrlAltEnter菜单View → Preview点击 Share 旁边的▶按钮。预览时画布上每个包含控件的顶层图层都会作为实时的 Reka UI 组件运行由组件的变体绘制外观开关可拨动、滑块可拖拽、标签页与手风琴可展开、文本框是带浏览器光标/选区/粘贴能力的真实输入框。预览绝不会改动文档或其历史记录点击Reset可以把所有控件恢复到设计状态按Esc或关闭按钮返回编辑分屏视图下每个画布独立预览。实现上预览仅运行“包含行为的实例”所在的顶层图层且排除组件/组件集本身——playIslandRoots在 packages/core/src/editor/play/islands.ts 中通过containsControl递归查找持有behaviour的节点将它们作为“岛”island交给真实组件渲染画布本身不再绘制这些图层。行为保存在.fig文件中并会随库组件一起发布。组件库Component Libraries组件库把可复用组件发布为不可变修订版本immutable revision。每个已发布资源都有稳定的库标识library ID、资源标识asset key与修订标识revision ID因此不同实例可以停留在不同修订上直到你显式更新。这一点在测试 packages/core/tests/editor/components/library-capabilities.test.ts 中体现为librarySource.identity: { libraryId, assetKey, revisionId }的完整身份结构。发布库先创建好要共享的组件与组件集打开Assets → Manage libraries选择Publish library输入一个稳定的库 ID 与显示名称——库 ID 在首次发布后即被锁定无法更改可选搜索变更列表为本次修订填写修订描述勾选要包含的新增、修改、重命名或删除的资源确认发布位置后点击Publish library。后续再发布时未勾选的变更会保持 pending 状态未变更的资源沿用之前的已发布定义已删除的定义只要仍有文档引用其历史修订就继续可用。连接与插入库资源打开Assets → Manage libraries启用某个已发布库其组件会出现在 Assets 面板中与本地组件并列。插入方式同本地资源单击、键盘或拖拽。发布后的定义在使用文档中是只读的——想改定义必须编辑源文档并发布新修订。引擎通过getNodeEditCapability与ReadOnlyLibraryDefinitionError强制这一约束见 packages/core/tests/editor/components/library-capabilities.test.ts库定义的子节点不可编辑reason 为library-definition但挂接到这些定义的实例仍完全可编辑可通过组件属性与覆盖继续调整。检查与接受更新打开Manage libraries → Updates可以发现更新的修订。注意仅仅是发现/搜索本身不会修改文档。审查时可以并排对比当前实例与更新后的实例在受影响的实例之间跳转然后选择更新范围选中的实例、某个资源的所有实例、当前页所有实例、所有页面的全部实例。OpenPencil 会尽力保留兼容的文本、可见性与实例替换赋值如果精确变体已不存在接受前会先显示左上角回退变体已应用的更新会生成一条撤销记录可以撤销。库服务层src/app/libraries/service.ts内部维护#revisionCache缓存修订并通过materializeLibraryAsset物化资源定义、readLibraryPriority/writeLibraryPriority管理库优先级。本地存储与离线模式库可以存放在浏览器本地目录也可以使用已配置的存储提供方。远程发布使用不可变修订对象 有条件更新的“最新版本”指针两个发布者不会互相静默覆盖。已下载的修订会缓存在本地即使断网文档仍能渲染并插入已下载的定义。完整性校验失败会明确报错而不会被缓存数据掩盖。保存使用文档库连接与物化后的定义会保存在.fig文档内部。重新打开使用文档时关联实例与修订标识保持原位即使远程库不可用也不受影响。创建实例右键点击组件选择Create instance。新实例出现在源组件右侧 40 像素处外观完全一致。注意该命令只在右键菜单中提供工具栏没有独立按钮菜单项selection.createInstance见 src/app/shell/menu/schema.ts。分离实例选中实例按macOS⌥⌘BWindows / LinuxCtrlAltB实例会变成一个普通帧与主组件失去关联所有覆盖overrides被烘焙为普通属性值。跳转到主组件右键点击实例选择Go to main componentselection.goToMainComponent。编辑器会导航到源组件必要时自动切换页面并选中它。实时同步Live Sync编辑组件时所有实例自动更新。同步的属性包括宽度与高度填充、描边与效果不透明度与圆角半径布局参数自动布局设置内容裁剪Clips content设置。同步在组件内部子对象发生新增、移动、调整大小后自动触发。同步引擎位于 packages/scene-graph/src/instances/sync.ts其核心是匹配子对象并应用覆盖状态InstanceOverrideState通过sourceComponentId关联实例子节点与组件子节点再按组件节点刷新内容。覆盖Overrides实例可以覆盖个别属性而不断开同步链接。一旦某个属性在实例上被覆盖下一次同步时该属性被跳过其余属性继续从主组件更新。可覆盖的属性子对象级名称、文本、字号、字重、字体族以及全部视觉与布局属性——填充、描边、效果、不透明度、圆角半径、尺寸。新子对象向组件添加一个子对象后它会自动克隆到所有现有实例中实例内的子对象顺序始终与主组件一致。子对象选择命中测试组件与实例是不透明容器单击子对象时选中的是整个组件/实例而不是子对象本身。双击组件或实例可以进入内部并选中其内容。插槽是个例外——插槽区域内的图层属于实例自有内容可以直接编辑参见前文SlotScope的slot分支。画布标识元素外观组件Component紫色标签 菱形图标始终可见实例Instance紫色标签 菱形图标始终可见组件集Component Set紫色虚线边框快捷键速查表操作macOSWindows / Linux创建组件⌥⌘KCtrlAltK创建组件集⇧⌘KShiftCtrlK分离实例⌥⌘BCtrlAltB进入预览⌥⌘↩CtrlAltEnter这些快捷键的注册与“预览时不接受编辑键”的守卫逻辑都在 src/app/shell/keyboard/registry.ts预览状态下仅保留toggle-preview等标记了preview: true的快捷键其余编辑快捷键会被忽略防止预览时误改设计。实用建议在实例内部修改文本会创建覆盖——之后即使组件文本变了也不会覆盖实例里的这段文字组件集适合组织多维变体尺寸 × 状态 × 主题配合稀疏组合避免穷举从源文档发布可复用资源——发布后的定义在使用文档中刻意保持只读保证设计系统单一事实来源接受修订前务必先审查尤其是新版本删除了某个精确变体组合时确认左上角回退是否符合预期所有组件相关动作创建实例、创建插槽、跳转主组件、分离实例等都汇总在右键菜单中完整列表见 packages/docs/user-guide/context-menu.md。相关组件动作的端到端行为还可以在引擎测试中进一步验证例如创建与变体组合packages/core/tests/editor/components/create-component.test.ts、combine-variants.test.ts、变体管理variants.test.ts、行为behaviours.test.ts与库能力library-capabilities.test.ts。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战 组件Components是 OpenPencil 中最核心的复用机制把一组设计元前端桌面应用AI 应用MCP 服务OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析 OpenPencil 是一款开源的 AI 原生设计编辑器Figma 替代方案。本文前端桌面应用AI 应用MCP 服务OpenPencil 组件系统实战指南主组件、实例、变体与组件库的完整工作流OpenPencil 组件系统实战指南主组件、实例、变体与组件库的完整工作流 OpenPencil开源 Figma 替代品、AI 原生设计编辑器的组件系统前端桌面应用AI 应用MCP 服务上一篇5分钟搭建你的大麦网抢票自动化系统告别手动抢票的焦虑时代下一篇三步构建B站会员购自动化抢票系统深入解析biliTickerBuy技术实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenPencil 组件系统实战指南：创建、变体、插槽、行为与组件库发布同步
前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载组件是 OpenPencil开源 Figma 替代方案中最核心的复用机制编辑一次主组件所有关联的实例自动更新。本篇指南以 packages/docs/ru/user-guide/components.md及同仓库英文版 packages/docs/user-guide/components.md为主线结合编辑器内核源码完整讲解组件的浏览、创建、变体组合、组件属性、插槽Slots、行为Behaviours与预览以及组件库的发布、连接、离线使用与更新验收流程。读完你可以系统掌握 OpenPencil 的组件工作流并理解其底层实现原理与快捷键体系。组件是什么组件Component是 OpenPencil 中可复用的设计元素。它的核心特性是单向同步修改主组件后文档中所有引用它的实例都会自动更新。这一机制保证了设计系统的一致性——按钮、卡片、表单控件等基础元素只需维护一个定义即可驱动整个文档。从引擎实现看组件在场景图中是独立的节点类型在 packages/core/src/editor/components.ts 中可以看到COMPONENT、COMPONENT_SET、INSTANCE是wrapSelectionInContainer支持创建的三种容器类型实例则通过createInstance从组件派生。与组件相关的全部动作创建、变体、实例、属性、插槽、行为都在该模块的createComponentActions(ctx)中统一组织并通过菜单命令selection.createComponent、selection.createComponentSet、selection.createInstance等暴露给界面见 src/app/shell/menu/schema.ts。浏览组件资源Assets 面板打开左侧面板的Assets标签页可以浏览本地组件与已启用的组件库资源。面板提供网格视图 / 列表视图两种展示方式按组件名进行搜索点击选中组件后查看其详细信息。添加资源到画布有三种方式单击、按Enter键、或直接拖拽到画布上。本地资源按来源页面分组来自库的资源只要对应修订版本revision已下载即使在远程提供方暂时离线时也仍然可用。Assets 面板的前端实现位于 src/components/assets-panel/AssetsPanel.vue其中通过libraryService.enabledAssets读取已启用库的远端资源并合并展示本地与远端两类资源remoteAssets携带libraryId、libraryName、revisionId、asset字段资源按所在页面归类见 src/components/assets-panel/page.ts 的findAssetPage。创建组件选中一个帧Frame或组Group按下快捷键macOS⌥⌘KWindows / LinuxCtrlAltK选区即变成一个可复用组件。若选中多个对象OpenPencil 会把它们放入一个新组件中新组件的边界取所有对象的公共包围盒。创建后组件上方会显示一个紫色标签 菱形图标始终可见。引擎层的行为packages/core/src/editor/components.ts区分两种情况只选中一个节点且该节点可转化为组件becomesComponent(node)为真典型如 FRAME时直接将该节点的类型原地改为COMPONENT并作为一步可撤销操作undo.push记录选中多个节点时通过wrapSelectionInContainer(COMPONENT, ...)将选区包裹进新的COMPONENT容器。菜单中对应的命令是Object → Create Componentselection.createComponent快捷键注册于 src/app/shell/keyboard/registry.ts。组件集与变体Component Sets Variants组件集用于组织多维变体。选中两个及以上组件按下macOS⇧⌘KWindows / LinuxShiftCtrlKOpenPencil 会把这些组件合并为一个组件集——一个带紫色虚线边框的容器内部有 20 像素的内边距行为与 Figma 一致。测试 packages/core/tests/editor/components/combine-variants.test.ts 验证了画布命令的具体表现组件集向外扩展 20 像素、cornerRadius 5、描边weight: 1、align: INSIDE、虚线模式dashPattern: [10, 5]。而通过插件 API 的figma.combineAsVariants()见 packages/core/src/figma-api创建的组件集则与 Figma 插件 API 一致恰好包裹各组件而不加内边距。每个组件集内的组件可以定义多个变体维度的取值组合例如SizeSmall StateHover ThemeDarkOpenPencil 支持稀疏组合sparse combinations即无需为每个维度值都创建穷举组合左上角的变体是默认变体当某次更新后不存在某个精确组合时它作为回退替身使用在组件属性面板中可以添加、重命名、重新排序、删除变体维度及其取值重复的组合会被拒绝源码 packages/core/src/editor/components/variants/definitions.ts 中的addPropertyDefinition、renamePropertyDefinition、removePropertyDefinition、reorderPropertyDefinitions、renameVariantValue、setVariantPropertyValue以及hasDuplicateCombination校验完整实现了这些操作。引擎侧的创建流程packages/core/src/editor/components.ts要求选区中每个节点都必须是COMPONENT类型少于两个直接返回然后以COMPONENT_SET类型包裹并通过applyVariantProperties应用变体属性。组件属性Component Properties组件与组件集支持可复用属性包含四种类型类型说明文本TEXT绑定到子对象的文本字段实例中可独立修改文字布尔可见性BOOLEAN控制子对象的显示/隐藏实例替换INSTANCE_SWAP在实例中替换嵌套的组件实例插槽SLOT允许实例替换/增减插槽内容见下文用法把一个属性绑定到子对象descendant的某个字段之后在任意实例上都可以直接修改该值而无需分离实例。属性定义与赋值都会保存在.fig文件中重新打开后保持。实现上属性赋值与恢复的逻辑集中在 packages/core/src/editor/components/properties.ts文本属性读取节点的TEXT字段INSTANCE_SWAP类型通过swapTargetId解析目标组件并写入赋值相关测试见 packages/core/tests/editor/components/properties.test.ts。插槽Slots插槽是一个主组件内部的帧frame每个实例都可以改变其内容。创建方式选中主组件内部的某个帧在右键菜单或 Slots 区域选择Create slot或选中其他图层将它们包裹进一个新的插槽帧中见 packages/scene-graph/src/slots/authoring.ts 与 packages/core/src/editor/components/slots/authoring.ts 的createSlotAuthoringActions。插槽设置可以指定描述description偏好的组件preferred components可容纳条目的数量上限/下限limits——实例内容超出限制时会显示警告。在实例中可以添加、重排、删除插槽条目也可以重置回主组件的内容。插槽的层级规则在 packages/scene-graph/src/slots/content.ts 中定义得非常清晰用SlotScope区分三种状态free组件定义之外、可自由增删图层slot位于实例某个插槽内实例拥有或可认领其内容locked实例内其他位置图层必须来自组件本身。行为Behaviours与实时预览行为让主组件或组件集像一个真正的控件那样工作其底层借鉴 Reka UI 的原语设计。目前支持的控件种类定义于 packages/scene-graph/src/behaviours/kinds.ts 的BEHAVIOUR_KINDSbutton, textField, textarea, numberField, toggle, switch, checkbox, radio, radioGroup, toggleGroup, slider, progress, tabs, collapsible, accordion选中组件后在Behaviour区域点击选择一个行为。行为绑定面板会列出该控件需要的内容Values值——承载每个值的属性布尔/变体属性用于 On、Checked、Pressed、Open、Filled、Disabled并指定哪些变体值表示开/关文本属性用于输入框的文字滑块则有自己的最小、最大、步进与默认值Parts部件——绘制每个部件所用的插槽如开关的滑块thumb、滑块的轨道/范围/滑块、标签页列表等组的 items 插槽承载其 radio、toggle 或 collapsible 实例States状态——一个变体属性其取值分别绘制默认rest、悬停hover、按下pressed、聚焦focus、禁用disabled五种状态INTERACTION_STATES定义于 packages/scene-graph/src/behaviours/kinds.ts。名称与这些状态相似的取值会被自动匹配。控件必需的绑定行排在前面其余归入More options。当组件还没有可绑定的内容时面板会主动提供一键创建文本图层 文本属性、Off/On 两个变体、或一个插槽States区提供Add state variants自动为组件添加 Default、Hover、Pressed、Focus、Disabled 五个变体。注意单独的主组件若通过此方式获得变体会自动升级为组件集给组件集添加插槽则会在每个变体中都出现。在控件可用之前其名称下方会显示一行提示还缺少什么点击即可跳转。进入预览有三种方式快捷键⌥⌘↩Windows/LinuxCtrlAltEnter菜单View → Preview点击 Share 旁边的▶按钮。预览时画布上每个包含控件的顶层图层都会作为实时的 Reka UI 组件运行由组件的变体绘制外观开关可拨动、滑块可拖拽、标签页与手风琴可展开、文本框是带浏览器光标/选区/粘贴能力的真实输入框。预览绝不会改动文档或其历史记录点击Reset可以把所有控件恢复到设计状态按Esc或关闭按钮返回编辑分屏视图下每个画布独立预览。实现上预览仅运行“包含行为的实例”所在的顶层图层且排除组件/组件集本身——playIslandRoots在 packages/core/src/editor/play/islands.ts 中通过containsControl递归查找持有behaviour的节点将它们作为“岛”island交给真实组件渲染画布本身不再绘制这些图层。行为保存在.fig文件中并会随库组件一起发布。组件库Component Libraries组件库把可复用组件发布为不可变修订版本immutable revision。每个已发布资源都有稳定的库标识library ID、资源标识asset key与修订标识revision ID因此不同实例可以停留在不同修订上直到你显式更新。这一点在测试 packages/core/tests/editor/components/library-capabilities.test.ts 中体现为librarySource.identity: { libraryId, assetKey, revisionId }的完整身份结构。发布库先创建好要共享的组件与组件集打开Assets → Manage libraries选择Publish library输入一个稳定的库 ID 与显示名称——库 ID 在首次发布后即被锁定无法更改可选搜索变更列表为本次修订填写修订描述勾选要包含的新增、修改、重命名或删除的资源确认发布位置后点击Publish library。后续再发布时未勾选的变更会保持 pending 状态未变更的资源沿用之前的已发布定义已删除的定义只要仍有文档引用其历史修订就继续可用。连接与插入库资源打开Assets → Manage libraries启用某个已发布库其组件会出现在 Assets 面板中与本地组件并列。插入方式同本地资源单击、键盘或拖拽。发布后的定义在使用文档中是只读的——想改定义必须编辑源文档并发布新修订。引擎通过getNodeEditCapability与ReadOnlyLibraryDefinitionError强制这一约束见 packages/core/tests/editor/components/library-capabilities.test.ts库定义的子节点不可编辑reason 为library-definition但挂接到这些定义的实例仍完全可编辑可通过组件属性与覆盖继续调整。检查与接受更新打开Manage libraries → Updates可以发现更新的修订。注意仅仅是发现/搜索本身不会修改文档。审查时可以并排对比当前实例与更新后的实例在受影响的实例之间跳转然后选择更新范围选中的实例、某个资源的所有实例、当前页所有实例、所有页面的全部实例。OpenPencil 会尽力保留兼容的文本、可见性与实例替换赋值如果精确变体已不存在接受前会先显示左上角回退变体已应用的更新会生成一条撤销记录可以撤销。库服务层src/app/libraries/service.ts内部维护#revisionCache缓存修订并通过materializeLibraryAsset物化资源定义、readLibraryPriority/writeLibraryPriority管理库优先级。本地存储与离线模式库可以存放在浏览器本地目录也可以使用已配置的存储提供方。远程发布使用不可变修订对象 有条件更新的“最新版本”指针两个发布者不会互相静默覆盖。已下载的修订会缓存在本地即使断网文档仍能渲染并插入已下载的定义。完整性校验失败会明确报错而不会被缓存数据掩盖。保存使用文档库连接与物化后的定义会保存在.fig文档内部。重新打开使用文档时关联实例与修订标识保持原位即使远程库不可用也不受影响。创建实例右键点击组件选择Create instance。新实例出现在源组件右侧 40 像素处外观完全一致。注意该命令只在右键菜单中提供工具栏没有独立按钮菜单项selection.createInstance见 src/app/shell/menu/schema.ts。分离实例选中实例按macOS⌥⌘BWindows / LinuxCtrlAltB实例会变成一个普通帧与主组件失去关联所有覆盖overrides被烘焙为普通属性值。跳转到主组件右键点击实例选择Go to main componentselection.goToMainComponent。编辑器会导航到源组件必要时自动切换页面并选中它。实时同步Live Sync编辑组件时所有实例自动更新。同步的属性包括宽度与高度填充、描边与效果不透明度与圆角半径布局参数自动布局设置内容裁剪Clips content设置。同步在组件内部子对象发生新增、移动、调整大小后自动触发。同步引擎位于 packages/scene-graph/src/instances/sync.ts其核心是匹配子对象并应用覆盖状态InstanceOverrideState通过sourceComponentId关联实例子节点与组件子节点再按组件节点刷新内容。覆盖Overrides实例可以覆盖个别属性而不断开同步链接。一旦某个属性在实例上被覆盖下一次同步时该属性被跳过其余属性继续从主组件更新。可覆盖的属性子对象级名称、文本、字号、字重、字体族以及全部视觉与布局属性——填充、描边、效果、不透明度、圆角半径、尺寸。新子对象向组件添加一个子对象后它会自动克隆到所有现有实例中实例内的子对象顺序始终与主组件一致。子对象选择命中测试组件与实例是不透明容器单击子对象时选中的是整个组件/实例而不是子对象本身。双击组件或实例可以进入内部并选中其内容。插槽是个例外——插槽区域内的图层属于实例自有内容可以直接编辑参见前文SlotScope的slot分支。画布标识元素外观组件Component紫色标签 菱形图标始终可见实例Instance紫色标签 菱形图标始终可见组件集Component Set紫色虚线边框快捷键速查表操作macOSWindows / Linux创建组件⌥⌘KCtrlAltK创建组件集⇧⌘KShiftCtrlK分离实例⌥⌘BCtrlAltB进入预览⌥⌘↩CtrlAltEnter这些快捷键的注册与“预览时不接受编辑键”的守卫逻辑都在 src/app/shell/keyboard/registry.ts预览状态下仅保留toggle-preview等标记了preview: true的快捷键其余编辑快捷键会被忽略防止预览时误改设计。实用建议在实例内部修改文本会创建覆盖——之后即使组件文本变了也不会覆盖实例里的这段文字组件集适合组织多维变体尺寸 × 状态 × 主题配合稀疏组合避免穷举从源文档发布可复用资源——发布后的定义在使用文档中刻意保持只读保证设计系统单一事实来源接受修订前务必先审查尤其是新版本删除了某个精确变体组合时确认左上角回退是否符合预期所有组件相关动作创建实例、创建插槽、跳转主组件、分离实例等都汇总在右键菜单中完整列表见 packages/docs/user-guide/context-menu.md。相关组件动作的端到端行为还可以在引擎测试中进一步验证例如创建与变体组合packages/core/tests/editor/components/create-component.test.ts、combine-variants.test.ts、变体管理variants.test.ts、行为behaviours.test.ts与库能力library-capabilities.test.ts。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战 组件Components是 OpenPencil 中最核心的复用机制把一组设计元前端桌面应用AI 应用MCP 服务OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析 OpenPencil 是一款开源的 AI 原生设计编辑器Figma 替代方案。本文前端桌面应用AI 应用MCP 服务OpenPencil 组件系统实战指南主组件、实例、变体与组件库的完整工作流OpenPencil 组件系统实战指南主组件、实例、变体与组件库的完整工作流 OpenPencil开源 Figma 替代品、AI 原生设计编辑器的组件系统前端桌面应用AI 应用MCP 服务上一篇5分钟搭建你的大麦网抢票自动化系统告别手动抢票的焦虑时代下一篇三步构建B站会员购自动化抢票系统深入解析biliTickerBuy技术实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考