Penpot 使用指南：从画板、组件到交付开发的完整工作流

Penpot 使用指南：从画板、组件到交付开发的完整工作流

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot

Penpot 是一款免费开源的设计与原型工具，覆盖矢量绘制、组件复用、交互原型和代码交接，适合刚上手的设计师，也适合需要统一管理样式的多人团队。

第一次使用：先建文件，再画下第一块画板

进入 Penpot 后会看到 Dashboard（工作台首页），这里管理你的团队、项目和文件。新建一个文件并打开，就进入了 Workspace（设计工作区）。

左侧工具栏从上到下依次是画板、矩形、椭圆、文本、图片、路径和手绘工具。建议第一次就完成两个动作：

1. 用矩形和椭圆画出一个简单界面骨架，熟悉选中、移动、缩放的手感；
2. 选中这些图形，按Ctrl + Alt + G（macOS 为Cmd + Option + G）把它们收进一块画板（Board）。

画板是 Penpot 的基本组织单位：按页面归档、导出、做原型交互，都以画板为范围。

把界面变成顺手的工作区

Workspace 可以拆成三个区域理解：

• 左侧：图层面板和资产面板（Assets），管理当前文件里的图层结构、组件与样式；
• 中间：无限画布，配合标尺和网格进行对齐；
• 右侧：属性面板，选中什么就编辑什么——位置、尺寸、填充、描边、阴影都在这里。

顶部还有一排常用入口：历史（History）可以回看和撤销最近改动，评论（Comments）支持在画板上留言，分享按钮用于邀请成员。右侧切换 Design / Prototype / Inspect 三个模式，分别对应画图、连交互、看标注，这是后文所有操作的主线。

快捷键不用死记：在 Workspace 顶部菜单能直接看到每个命令对应的按键。先熟悉撤销、组合、对齐这几个，其余用到再查。

把常用元素沉淀成组件

同一个按钮画到第五遍还长得不一样，说明该建组件了。选中按钮图层，按Ctrl + K（macOS 为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 面板的更新提示。

接下来可以做的三件事

1. 用组件加变量，完整重画一个你熟悉的产品界面，只允许从资产面板取用样式；
2. 把这套组件发布为共享库，新建第二个文件连接它，验证更新链路是否通畅；
3. 给核心流程连上交互，生成 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