Penpot 实战全解1 小时跑通从空画布到标注交付的 5 个场景【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot周五下午五点需求确认了前端明天上午要标注团队预算里却只给到开源工具的钱。别慌这种活 Penpot 一个人就能干完——它是开源设计平台覆盖组件、设计令牌、交互原型和开发标注授权费为零自部署也能跑画到一半不会弹出升级解锁。打开画布先做三件事第一次进工作区先花两分钟认位置最左列是画笔、矩形、椭圆、文本这些工具紧挨着的图层和 Assets 面板管结构中间是画布右侧属性区填尺寸、位置、填充。认完这三块剩下的功能你自己点两下就会找到。顺手记两条快捷键CtrlG 组合选中对象CtrlZ 撤销。后面每一步都省点鼠标。画完一个登录页组件、Token 与导出的正确顺序拿一个登录页开刀它麻雀虽小五脏俱全正好把组件和设计令牌全用上。先拉框再精修选矩形工具在画布上拖出 375x812 的手机画板再拖一个大卡片矩形。接着把卡片换成圆角补两条输入框矩形、一个按钮矩形各拖一段文本进去。到此为止布局已经能看。三处细节顺手改掉圆角填 12按钮改成品牌色两条输入框间距拉齐。把按钮做成组件按钮是复用率最高的东西。在 Assets 面板把选中的按钮存成组件之后每个页面都从这儿拖。哪天要把按钮圆角从 12 改成 8你改主组件一次全项目 20 个实例一起动。主色绑上设计令牌别把品牌色直接填进按钮。新建一个颜色令牌取名 primary值填#fabada再把按钮填充指向它。下次品牌色调整改令牌一处所有引用它的填充、描边全部跟上——重复改色的活从十几分钟缩到一分钟以内。导出与交付画完之后选中画板走导出流程生成 PNG 或 PDF 发给团队。登录页到此闭环布局、组件、令牌、导出一条线串完。让页面动起来跳转、过渡与三端适配静态稿只能说明长什么样交互稿才说明怎么用。加跳转和状态切换切到 Prototype 面板给登录按钮加一个点击交互目标选成功页过渡方式选 slide。播放预览时页面真的会滑过去。评审会上你就再也不用口头解释点这里之后会怎样。一套稿子适配手机、平板、桌面选中卡片在右侧 Constraints 里把水平约束设成 Right、垂直设成 Top。之后你把画板从 375 拖到 1440卡片和按钮自动跟到边角不会悬在原地。手机、平板、桌面三套稿子同一批组件适配工作量直接减半。复制 CSS / SVG 甩给前端切到 Inspect 模式点任意元素右侧直接给出 CSS 代码块尺寸标注也在旁边列好。前端全选复制拿到的全是真实数值不用再猜色值和间距。人多了以后协作与交付的分工设计师只关心实时状态谁正在这张画板上动手光标位置一眼可见改动同步落盘不会等半天再合并。PM 关心能点吗把文件切到 view mode丢一个只读链接出去他从头点到尾看跳转对不对不用装软件也不用动你正在改的稿。前端关心值准不准标注、字号、间距都在 Inspect 里现成躺着交付物就是设计文件本身不再多传一份 Figma 插件导出的 PDF。另外文件的版本记录一直在跑。谁在哪个时间点改了什么翻历史就能看见改坏了回退一步就行。往更深处走文档、插件与源码每个方向都有现成的入口按需翻就行界面、组件、令牌、原型的完整用法在 docs/user-guide/ 下按主题分好了目录想让 Penpot 自己干活去 plugins/apps/ 看示例配色转令牌、对比度检查、表格生成都是可直接参考的实现部署和配置细节看 docs/technical-guide/。Penpot 的渲染核心是 Rust 写的 WASM 模块源码就在 render-wasm/想折腾到底的人有得玩。它把从空画布到标注交付的整条流程都放进了开源代码没有功能门禁。今晚就能做一件小事打开 Penpot新建文件把你最常用的 App 的登录页按尺寸临摹一遍——两个输入框、一个按钮、一行忘记密码。画完顺手把主色抽成第一个令牌。明天你手里就有了一份带组件、带令牌、能点、能交付的稿子。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考