15 分钟上手 Penpot：从创建组件到演示原型

15 分钟上手 Penpot从创建组件到演示原型【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpotPenpot 是开源的产品设计平台覆盖画布、组件、交互原型和开发标注。本文带你用 15 分钟做出一个可点击、可交付的 Penpot 小作品。先弄清它适合谁、适合做什么UI 设计场景界面绘制、排版、交互原型都在同一个文件里完成不用切换多个工具评审协作场景产品经理和设计师共用一个画布评论直接挂在图层上前端交接场景开发在 Inspect 模式里读间距、属性直接复制 CSS/SVG 片段自托管场景仓库自带 docker 编排文件可以把整套 Penpot 部署到自己服务器第一次动手15 分钟完成第一个小作品跟着做全程只用鼠标和 3 个快捷键打开 Penpot新建团队与文件进入 Workspace 画布用矩形和文本工具搭一个按钮一个圆角矩形加一段文字选中按钮按Ctrl K或右键选 Create component它变成组件到右侧Assets面板把组件拖出两份副本排成一个列表选中组件按Shift A加 Flex Layout副本自动纵向排开图选中图层后按 Ctrl K普通图层变成可复用的组件。第 5 步完成后右侧 Design 面板会出现方向、对齐、间距gap、内边距padding等参数它们与 CSS Flexbox 一一对应先不用逐个理解保持默认即可。让作品更好用挑 2 项进阶能力讲透画布跑通后下面两件事决定这个作品是一次性的图还是能持续维护的设计。复用组件一次修改处处生效先说结论组件由主组件 副本构成主组件是唯一数据源。改一次主组件全文件所有副本同步更新某个副本想例外用Ctrl Shift K把它从组件断开成普通分组。按钮、导航、输入框这类反复出现的元素都值得按这个模式处理。图副本上可以覆盖文字等属性其余样式仍跟随主组件。打开 Flex 布局让结构跟随内容伸缩Penpot 的 Flex 布局直接对应 CSS Flexbox 标准direction、justify、align、gap 参数与网页开发一致开发接手时不用翻译。子元素默认是静态定位参与自动排列某个元素需要压在内容上方时单独把它切成 absolute 定位脱离排布。卡片、侧栏、页面骨架这类结构最该用它。图在检查视图里查看 Flex 容器的间距与对齐效果。交付与协作把设计交给开发和团队作品搭好后剩下的动作都发生在文件外面演示、交接、拉人进来。演示原型流程选中图层从右侧Prototype面板拖一条连线到目标 Board设置触发器点击、鼠标进入、延时和切换动画。完成后点右上角播放按钮进入 View mode 点击预览流程还可以直接生成链接分享无需导出任何文件。图把原型流程打包成一条可点击的分享链接。给开发看规格右侧切到Inspect标签页即进入只读模式开发不会误改你的图层。选中图层后悬停能看到它与相邻元素、板边缘的精确距离Info 面板列出填充、描边、圆角等属性代码标签页直接展示可复制的 CSS/SVG 片段。图选中元素后查看对应样式代码复制即用。拉团队进来实时协作邀请同事进入同一文件光标位置实时可见修改即刻同步选中任意元素即可发起评论也可以把文件分享给没有账号的访客。权限分查看、评论、编辑三档在团队设置里维护成员即可。少走弯路3 个常见坑删主组件后副本全散误删 Assets 里的主组件画布上所有副本都会变成孤立图层。处理选中任一副本右键 Restore main component 恢复主组件。Flex 里的元素不跟随排布它多半被切成了 absolute 定位脱离了流。处理确认元素处于静态定位再回 Design 面板检查父级 gap 与对齐参数。连线拖出来了View mode 里点不动先确认触发器设置比如鼠标进入需要悬停而非点击再到 Prototype 面板看这条连接实际挂在哪个图层上。下一步用户指南docs/user-guide/组件专页在 docs/user-guide/design-systems/components.njk插件目录与 API 说明plugins/docs/今天就能做打开 Penpot 新建文件搭一个按钮组件再给它加一条指向第二屏的原型连线。走到这里你已经完成了从画布、组件到原型演示的闭环。Penpot 把设计、标注和协作放在同一个文件里剩下的就是往里装真实项目。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考