设计系统

组件

组件是可复用的设计元素:修改主组件,所有实例同步更新;在实例上覆盖内容与属性,既统一又灵活。

基于 Penpot 官方文档整理汉化 更新于 2026-10-08

主组件与实例

选中任意图层或编组后按 Ctrl/⌘+K 即可创建组件。原始对象成为主组件(Main component),你复制出来的每一份都是实例(Instance)。修改主组件的结构、样式与布局,所有实例会同步更新;而实例自身的文本、图片等内容可以单独覆盖,互不影响。

典型工作流

  1. 先画好一个元素,如默认状态的按钮
  2. 选中后按 Ctrl/⌘+K 转为组件,并规范命名(如 button/primary)
  3. 把组件实例拖入页面与画板反复使用
  4. 需要调整样式时回到主组件修改,实例自动跟随
  5. 在实例上替换文案、图标等内容,不影响其他实例
  6. 不再需要同步关系时,按 Ctrl/⌘+Shift+K 脱离组件

可以在实例上覆盖的内容

  • 文本图层中的文字
  • 图片、图标等填充内容
  • 子元素的颜色、字号等样式属性
  • 显隐与尺寸(配合弹性布局可做出增删元素的实例)
  • 嵌套组件实例(在一个组件内替换另一个组件)

组件与共享库

默认情况下组件保存在当前文件的文件库中。把文件发布为团队共享库后,其他文件可以在资源面板中引用这些组件。组件更新时,引用方会收到同步提示,确认后完成升级——这正是设计系统跨文件分发的基础。

命名建议

命名建议

使用「类别/名称/状态」的斜杠命名(如 button/primary/hover、input/text/default),图层面板会自动按层级分组显示,组件数量变多后依然井井有条。

实用提示
  • 组件内善用弹性布局,实例替换长短文案时按钮与卡片会自动适应。
  • 一组相关组件(按钮的各种状态)更适合做成「变体」,而不是多个独立组件。

准备好开始设计了吗?

不限文件数、不限席位,核心功能永久免费。

免费开始使用 查看全部文档