Penpot：开源 Web 设计协作完整指南

Penpot开源 Web 设计协作完整指南【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot你刚改完一个页面产品经理说主色要换前端问圆角和间距是多少你截图、标尺、群里发图两天后设计又改了标尺图作废。Penpot 是一个 Web 设计协作工具设计文件、共享组件、开发者要用的 CSS 片段全放在同一个地方。功能全景设计、协作与交接在同一处Penpot 是一个基于 Web 的开源设计协作平台不需要装客户端浏览器里就能完成画图、组件管理、原型和开发交接。它的数据建立在 SVG、CSS、JSON 这些开放标准上文件不被锁死在某家生态里导入导出都走得通。它服务的是快速迭代的产品团队设计师画稿产品经理直接在画布上评论开发在 Inspect 模式里取尺寸和代码三种角色在同一个文件里工作实时同步让改动立刻出现在别人的屏幕上不用问哪版是最新的。说句实话它目前有个明显短板官方文档基本是英文的团队初期上手要多花点时间看材料。但工具本身的操作逻辑上手很快。下面拆三个最能打的能力。 共享库统一管理开源设计资产同一个按钮存在于五个项目文件里改一次圆角就要开五个文件挨个改漏一个线上就不一致。在 Penpot 里你先把设计系统整理进一个文件再把它发布为共享库打开左侧栏的资源面板点 Libraries 按钮选择发布这个文件里的组件、颜色、字体样式就全团队可见了。其他文件打开同一个库面板搜到目标库点连接然后直接把按钮从库里拖到画布上使用。之后组件在库里被修改所有连接了它的文件都会出现更新提示确认后全团队同步。多文件项目里这是最省心的能力设计系统住在一个文件里页面散在几个文件里一致性靠系统保证不靠人自觉。 设计交接Web 设计交接不用再量像素交接最耗时的不是画图而是来回确认间距多少、色值是 #00C38D 还是 #00C38E、描边有没有圆角。把右侧面板切到 Inspect 标签会进入只读模式开发者在里面操作不用担心碰坏设计稿。鼠标悬停在任意图层上它到选中元素和画板边缘的距离自动标出来Info 面板列出全部样式属性悬停即复制单值。选中图层右键选Copy as CSS可以直接把可用的 CSS 片段贴进代码Code 标签里还有 SVG 和 HTML 两种标记格式。对前端来说这一步把交接从对着图猜变成了从文件里直接读数。原型流程不写代码也能演示交互原型之前产品经理看到的都是静态图点了之后去哪儿只能靠嘴描述。在右上角切到 Prototype 标签选中一个按钮从它身上拖出一条连线指到目标画板再设置点击或悬停这类触发方式。右侧流程面板把入口按场景分组已登录用户、未登录用户、新用户引导各走各的路径。做完点顶部的播放键就进入可真实点击的原型直接把链接发给产品走一遍流程。需求评审用得上不用口述流程当着所有人的面点一遍问题当场就能发现。一条完整工作流从空文件到交付开发最常见的场景是一个小应用的设计从零开始最后交进前端手里。先在新文件里画出主要页面。工作区左边是图层面板中间画布右边属性面板。遇到按钮、输入框这类要复用的元素分组后注册成组件之后所有页面都用它的实例改一处处处更新。接着把页面串起来在 Prototype 标签下按交互逻辑连画板布局需要响应式的话用 Flex Layout 功能方向和代码里的 CSS flexbox 是一套逻辑方向、对齐、间距都能配交接时少解释一大段。然后交给开发他不动画布只在 Inspect 模式下核对间距、复制 CSS要取图标素材时在右侧导出区选中元素选 PNG 和 1x 或 2x 倍率点导出带走。最后产品点一遍原型确认流程有问题直接在画布上评论设计师当场改。全程在同一个文件里没人再存本地副本。如果公司要求数据不出内网Penpot 支持完整自托管拿到 docker-compose.yaml 后执行一条命令——docker compose -p penpot -f docker-compose.yaml up -d几分钟后服务就在 localhost:9001 起来部署细节见 docs/technical-guide/。因为开源所以你能做这三件事有几件事只有源码公开才成立。一是数据完全归你。自托管到自己的服务器上设计存在你自己的数据库和对象存储里没人审查也没有席位上限明天团队扩到 50 人成本不变。二是可编程。Penpot 提供开放 API 和插件系统想自动生成素材、同步公司内部的组件库可以自己写插件接进现有工作流。三是可修改。功能不合意时你能读源码、自己补上不会因为厂商改主意下个版本就没了。 最快上手路径你只需要做一步打开现代浏览器在官网注册账号一分钟后开始画图不装任何东西也没有付费档。想要自托管环境按 docs/technical-guide/ 的 Docker 章节走完整使用说明在 docs/user-guide/从界面布局到设计令牌都有。明天打开电脑就做这件事画一个按钮注册成组件把文件丢给前端看他右键复制一次 CSS 就写完样式。设计和代码坐在同一张桌子上这就是 Penpot 的感觉。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考