Penpot 设计系统配置指南：令牌、组件与原型交互实战
【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot
前端拿到设计文件，主按钮 #4A90D9、次按钮 #4A90EA，圆角有 8 有 9，间距全靠肉眼对。想改个主色，得翻遍每个图层。Penpot 的解法是把颜色、间距沉淀成设计令牌，把按钮沉淀成组件：改一处，处处生效，交付还能直接导出 JSON。
有和没有设计系统，日常差别大概是这样：
| 日常工作 | 没有设计系统 | 有设计系统 |
|---|---|---|
| 更换品牌主色 | 翻遍所有文件逐个重刷 | 改一个颜色令牌，全文件联动 |
| 统一一批按钮 | 复制粘贴，再手动检查是否同步 | 用实例，覆盖文案，需要时一键还原 |
| 与前端对值 | 口头报色值、目测间距 | 导出令牌 JSON，再给一个原型链接 |
Penpot 设计令牌怎么配：别名、算式与主题
先说最常被用到的别名。在 Tokens 面板新建一个 dimension 令牌，值填 8；再建一个 spacing 令牌，值写 {spacing.base} * 2，后者就永远等于前者的两倍。数字类令牌支持加减乘除和 round、max 这类函数，字号阶梯、间距阶梯都能从一两个基础值推出来。
操作上，在 Tokens 面板点类型旁的 + 就能建令牌，填名称和值保存；选中图层后点令牌即应用，右键则是指定作用到哪个属性。令牌集可以用 Light/Colors 这种带斜杠的命名自动归组，主题按 Mode、Brand 分组，同组只启用一个，不同组可以叠加生效。格式遵循 W3C DTCG，详细说明在 docs/user-guide/design-systems/design-tokens.njk。
这套配置直接砍掉了两类沟通成本：品牌色调整不用满文件找图层，前端也不用追着问"次级描边到底是多少"，Tools → Export 导出的 JSON 可以直接进构建。
组件的覆盖与替换在 Penpot 里怎么操作
令牌管数值，组件管结构。Penpot 的组件分主组件和实例：主组件是源，改它，所有实例跟着变；在实例上单独改文案或某个颜色叫覆盖，其余属性仍与主组件保持同步。
路径很直接：选中图层按 Ctrl+K 建组件；实例上右键选 Reset overrides 还原覆盖；点右侧边栏里的组件名会弹出替换菜单，把实例换成同组的另一个组件，按钮换成输入框这类场景用得上。文档在 docs/user-guide/design-systems/components.njk。
搭表单页时输入框、开关不用再逐个画；规范更新时也不用逐页排查，主组件一改，实例批量跟上。
原型交互怎么搭：触发、动作与动画
组件齐了，把页面连起来就可以演示。交互由三部分组成：触发（点击、鼠标进入或离开、延时）、动作（跳转、打开或关闭 overlay、返回上一屏、打开外部链接）、动画（Dissolve、Slide、Push，可选时长和缓动）。overlay 带"点击外部关闭""加黑色半透明背景"这类预设，做弹窗和 tooltip 够用。
右侧切到 Prototype 页签，选中触发图层，从图层拖一条连线到目标画板，在 INTERACTIONS 列表里逐项调触发和动作；点右上角播放键进 View mode。一个文件可以设多个 flow，每个 flow 是独立起点，有自己的分享链接，丢给产品走查时各看各的路线。文档在 docs/user-guide/prototyping-testing/prototyping.njk。
评审时不用口头描述"点这里跳到那里"，直接把 flow 链接甩给对方就行。
从零跑通最小设计系统的五步
想自己试一遍，最短路径是下面五步：
- 浏览器里注册账号、建团队和文件，参考 docs/user-guide/first-steps/cloud-selfhost.njk
- 在 Tokens 面板建颜色集和间距集，间距值写 {spacing.base} * 2 试试别名
- 画一个按钮，Ctrl+K 做成组件，复制两个实例改文案，体验覆盖
- 画两块画板，切到 Prototype 模式拖一条连线，设成 On click + Navigate to
- 用 Tools → Export 把令牌导出成 JSON 给前端
五步走完，你就有了一个能改、能查、能交付的最小设计系统。
Penpot 在开源设计工具里的位置不难描述：它以 SVG、CSS、JSON 这类开放标准为基础，设计产物可以直接被工程侧消费，不需要再绕一层导出转换。
【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
