尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
开源设计工具 Penpot:3 步搭好设计与前端协作流
开源设计工具 Penpot3 步搭好设计与前端协作流【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot设计稿标的是 16px 间距前端切出来是 14px改了三轮稿子工程师拿到的还是第二版的截图——这类事做过产品协作的人多半都遇到过。Penpot 是一款免费、开源、跑在浏览器里的设计工具它把颜色、间距、圆角这些视觉属性写成符合 W3C DTCG 标准的 Token把布局直接对应到 CSS Flexbox 和 Grid设计文件本身就是 SVG、HTML、JSON 这类开放格式从源头上减少翻译损耗。设计稿和代码对不上问题出在哪大多数设计工具存的是私有二进制文件导出代码要么靠插件硬猜要么靠设计师手动标注。Penpot 反着来它从一开始就用 Web 的开放标准建数据模型一个矩形存的就是 SVG布局属性存的就是 Flexbox/Grid 的字段所以复制 CSS这种操作不需要二次换算。同时它是完全开源的——代码、数据格式都可以读团队不用为某天平台停服或涨价担心文件也随时能带走。如果你在意数据归属这一点和主流 SaaS 工具差别很大后者你的稿件锁在别人的数据库里而 Penpot 支持把整套服务部署在自己服务器上。怎么搭出一套可复用的设计系统一套能长期维护的设计系统靠的不是画得漂亮的组件而是单一事实来源。Penpot 的做法是把三层东西串起来Token、组件、主题。用设计标记统一管理颜色和间距颜色、字号、间距、圆角、阴影这些在 Penpot 里都以 Token 的形式存在格式遵循 W3C DTCG 的规范可以直接导出 JSON 给前端用不用做格式转换。Token 之间还支持别名引用和简单运算比如定义spacing.small为 2再让spacing.medium等于{spacing.small} * 2调一次基准值整套间距跟着变。组件实例自动跟随母版更新组件这一层Penpot 支持变体和属性覆盖一个按钮组件可以衍生出大/中/小、主/次多种状态页面里放置的都是实例改了母版所有实例同步刷新只覆盖过个别属性的地方会保留自定义值。颜色面板和主题切换也挂在同一套 Token 上做深色模式时改的是 Token 集而不是几百个图层。设计稿交给前端需要几步Penpot 的协作链路是设计端建好 Token 和 Flex/Grid 布局开发端打开同一份文件进 Inspect 模式量距离、看属性、复制 CSS 或 SVG 代码。因为布局属性名和 CSS 同名复制出来的gap、justify-content可以直接粘进样式表改设计时开发看到的是同一份数据而不是截图。实际操作中比较省事的一点是Inspect 模式是只读的工程师可以在画布里自由点选量尺寸不用担心手滑改坏图层要导出切图时用之前设好的导出预设批量出 PNG 或 SVG 即可。数据不想放云端能自己部署吗可以而且只需要基础的 Docker 知识。仓库里的 Docker 部署配置 提供了完整的 compose 编排起一套私有 Penpot 通常十几分钟的事PostgreSQL、Redis、对象存储都有对应容器。私有部署之外还有团队权限、Webhook、访问令牌这些管理入口适合有数据合规要求的组织。如果只是想先试试官方也提供免安装的云端版本浏览器打开就能用。新手最常问的 3 件事和 Figma 是什么关系定位类似但 Penpot 文件用开放格式存储布局直接对齐 CSS 标准且整个平台可以自托管如果你已经在用 Figma可以先把导出文件导入对比一下工作流。学习成本高吗画布、图层、组件的交互逻辑和主流工具接近基本上一天能上手真正要花时间的反而是理解 Token 和 Flex 布局这部分官方文档里有专门的交互教程。想参与开发从哪入手仓库可以直接 clone 下来git clone https://gitcode.com/GitHub_Trending/pe/penpot之后按 CONTRIBUTING.md 起开发环境。代码主要分几块前端源码 是 ClojureScript 写的画布和界面WebAssembly 渲染引擎 是 Rust 实现的负责把设计数据高速画到屏幕上。接下来可以做什么先把一个小页面登录页或列表页就够用 Token Flex 布局完整做一遍再让前端同学用 Inspect 模式取一次代码你就知道这套流程在自己团队里跑不跑得通。跑通了再考虑私有部署和组件库迁移顺序反过来容易在没验证价值之前就把时间耗在运维上。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

Flue生命周期钩子实战:useAgentStart与useAgentFinish拦截与清理

Flue生命周期钩子实战:useAgentStart与useAgentFinish拦截与清理

Flue生命周期钩子实战:useAgentStart与useAgentFinish拦截与清理 【免费下载链接】flue The sandbox agent framework. 项目地址: https://gitcode.com/GitHub_Trending/flue1/flue Flue 是一个开源的沙箱智能体框架(The Sandbox Agent Framework…

📅 2026/9/24 2:11:20
GitNexus继承与MRO机制详解:C3线性化、Ruby混入与first-wins策略一次看懂

GitNexus继承与MRO机制详解:C3线性化、Ruby混入与first-wins策略一次看懂

GitNexus继承与MRO机制详解:C3线性化、Ruby混入与first-wins策略一次看懂 【免费下载链接】GitNexus GitNexus: The Zero-Server Code Intelligence Engine - GitNexus is a client-side knowledge graph creator that runs entirely in your browser. Drop in a gi…

📅 2026/10/30 3:43:45
MiroFish 部署实战指南:3个场景,5分钟跑通群体智能预测引擎

MiroFish 部署实战指南:3个场景,5分钟跑通群体智能预测引擎

MiroFish 部署实战指南:3个场景,5分钟跑通群体智能预测引擎 【免费下载链接】MiroFish A Simple and Universal Swarm Intelligence Engine, Predicting Anything. 简洁通用的群体智能引擎,预测万物 项目地址: https://gitcode.com/GitHub_…

📅 2026/10/6 5:47:36
MORE NEWS

更多资讯

📰

汽车维修电工证补贴值不值得考?郑州人避坑全攻略

汽车维修电工证补贴值不值得考?郑州人避坑全攻略 怕考不过白交培训费?这是很多郑州初次报考汽车维修电工证的小伙伴最怕听到的。尤其是现在国家对特种作业人员的管理越来越严格, 汽车维修电工证补贴…

📰

峨眉山考电工证怎么报名?证书过期了不知道怎么复审延期别慌

峨眉山考电工证怎么报名?证书过期了不知道怎么复审延期别慌 证书过期了不知道怎么复审延期?别急,你不是一个人。很多从事特种作业的人员,尤其是像低压电工、高压电工这类岗位,证书一旦过期,不仅影响日常工作,还可能面临违规处罚。而 峨眉山考电工证…

📰

珠海电工证可以入户通过率揭秘:工地太忙根本没时间复习考试怎么办?

珠海电工证可以入户通过率揭秘:工地太忙根本没时间复习考试怎么办? 工地太忙根本没时间复习考试,这是很多一线电工的真实写照。随着珠海市对安全生产监管的逐步加强,电工证不仅是上岗的“门槛”,更是入户、积分、落户等政策中的重要加分项。但问题来了,…

📰

高压电工证模拟测试不合格别慌,内部消息教你搞定复审延期

高压电工证模拟测试不合格别慌,内部消息教你搞定复审延期 证书过期了不知道怎么复审延期,这是很多电工朋友在操作证到期前最容易踩的坑。最近有不少人私信我问高压电工证模拟测试怎么通过,但其实很多人连证书有效期和复审流程都不清楚。别急,今天就来聊聊…

📰

高压电工证打卡签到表丢了怎么补办良心建议

高压电工证打卡签到表丢了怎么补办良心建议 证书过期了不知道怎么复审延期,你不是一个人。很多高压电工证持证人因为疏忽、工作繁忙,错过了年审时间,或者不小心把【高压电工证打卡签到表】弄丢了,导致无法正常复审,甚至面临证书失效的风险。如果你也在经…

📰

中级电工证淄博补贴官方回应实操考试心里没底怕挂科怎么办

中级电工证淄博补贴官方回应实操考试心里没底怕挂科怎么办 实操考试心里没底怕挂科,这几乎是每一位准备考取中级电工证的学员最真实的感受。尤其是对于焦作的在职建筑工人来说,考试不仅关系到能不能拿到补贴,更直接影响到能不能顺利上岗、提升薪资。…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬