Penpot 使用指南从画板、组件到交付开发的完整工作流【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpotPenpot 是一款免费开源的设计与原型工具覆盖矢量绘制、组件复用、交互原型和代码交接适合刚上手的设计师也适合需要统一管理样式的多人团队。第一次使用先建文件再画下第一块画板进入 Penpot 后会看到 Dashboard工作台首页这里管理你的团队、项目和文件。新建一个文件并打开就进入了 Workspace设计工作区。左侧工具栏从上到下依次是画板、矩形、椭圆、文本、图片、路径和手绘工具。建议第一次就完成两个动作用矩形和椭圆画出一个简单界面骨架熟悉选中、移动、缩放的手感选中这些图形按Ctrl Alt GmacOS 为Cmd Option G把它们收进一块画板Board。画板是 Penpot 的基本组织单位按页面归档、导出、做原型交互都以画板为范围。把界面变成顺手的工作区Workspace 可以拆成三个区域理解左侧图层面板和资产面板Assets管理当前文件里的图层结构、组件与样式中间无限画布配合标尺和网格进行对齐右侧属性面板选中什么就编辑什么——位置、尺寸、填充、描边、阴影都在这里。顶部还有一排常用入口历史History可以回看和撤销最近改动评论Comments支持在画板上留言分享按钮用于邀请成员。右侧切换 Design / Prototype / Inspect 三个模式分别对应画图、连交互、看标注这是后文所有操作的主线。快捷键不用死记在 Workspace 顶部菜单能直接看到每个命令对应的按键。先熟悉撤销、组合、对齐这几个其余用到再查。把常用元素沉淀成组件同一个按钮画到第五遍还长得不一样说明该建组件了。选中按钮图层按Ctrl KmacOS 为Cmd K它就变成一个可复用组件出现在左侧资产面板中。之后在画布任意位置插入改一次主组件所有实例同步更新。组件还能加差异覆盖比如首页的主按钮换成红色只改这一个实例的填充色其他实例不受影响需要还原时重置覆盖即可。多人项目里更关键的是共享库把存放组件的文件通过主菜单发布为 Shared Library团队内其他文件就能连接使用。你在库里更新组件后使用方会收到更新提示确认后样式统一生效——这是避免三版按钮并存的主要手段。用设计变量统一管理颜色和间距组件解决的是结构复用设计变量Design Tokens解决的是数值统一。在左侧面板切到 Tokens 页签可以创建颜色、尺寸、圆角、阴影等变量并按 Set 分组例如把color、dimension分成不同集合。实际用法是选中某个填充色或间距值后将其替换为变量引用。这样调整品牌色时只改变量本身所有引用处一起更新。再配合主题Themes功能同一套变量可以对应浅色模式和深色模式两套取值切换主题即可预览不同外观。变量也可以随共享库分发对方连接库后在 Libraries 面板选择 Import tokens就能把整套变量导入当前文件注意导入会覆盖当前文件的变量先导出备份更稳妥。让静态稿可以点连接画板做原型右侧面板切到 Prototype 模式就能把多块画板串成可点击的流程。选中触发元素比如播放按钮从元素上拖出一条连接线指向目标画板再选择交互类型和动效。连完之后点右上角的播放按钮进入 View Mode从入口画板开始走一遍完整流程。发现问题后直接点编辑文件回到 Workspace 修改不用来回切浏览器标签页。View Mode 还能生成分享链接发给开发和 stakeholders他们不登录账号也能查看页面、走交互流程。评审前自己先在 View Mode 完整走查一遍是发现死胡同和断链最便宜的方式。从设计稿拿到开发可用的信息右侧切到 Inspect 模式Workspace 内是只读视角开发同学打开不会误触改动选中任意图层后可以看标注悬停其他图层即时显示间距和尺寸复制属性对单个属性或整组布局属性点复制按钮直接贴进文档取代码在 Code 页签查看该图层的 CSS、SVG 或 HTML 片段导出素材在 Info 面板底部按预设导出 PNG、SVG 等资源。这套流程把切图 标注文档合并成了查看器里的一次操作设计师和开发看的是同一份数值沟通成本明显下降。更完整的说明见 docs/user-guide/dev-tools/。几个容易卡住的点画布元素和画板内元素不是一回事画板外的图层不会被导出、不参与原型。画散了就选中它们用Ctrl Alt G收进画板。文件库 ≠ 共享库每个文件自带库File Library只在本文件可用想让别的文件引用必须显式发布为 Shared Library。响应式靠约束Constraints右侧属性面板可为图层设置固定、填充、居中、钉边等约束画板拉伸时元素按规则重排做不同尺寸的适配前先把约束配好。改动没生效组件或变量改了却没更新通常是对方文件没点更新确认检查 Libraries 面板的更新提示。接下来可以做的三件事用组件加变量完整重画一个你熟悉的产品界面只允许从资产面板取用样式把这套组件发布为共享库新建第二个文件连接它验证更新链路是否通畅给核心流程连上交互生成 View Mode 分享链接发给一位开发同学走查标注和代码页签。走完这三步绘制、复用、协作、交接四个环节就都跑过一遍了再深入阅读 docs/user-guide/ 里的各章节会具体很多。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考