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 的组件分主组件和实例主组件是源改它所有实例跟着变在实例上单独改文案或某个颜色叫覆盖其余属性仍与主组件保持同步。路径很直接选中图层按 CtrlK 建组件实例上右键选 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 试试别名画一个按钮CtrlK 做成组件复制两个实例改文案体验覆盖画两块画板切到 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），仅供参考