在React项目开发流程里，设计协作工具直接决定了组件还原效率与资产安全性。当团队开始评估从Figma切换到Penpot时，核心动机往往不是界面像不像，而是代码侧能否无缝消费设计产出。Penpot作为完全开源且支持自托管的平台，其前端本身就用React写成，因此在数据结构上与React生态有天然的亲近感。
Penpot与Figma在技术架构上的差异
Figma采用闭源云服务模型，所有设计文件存储于其私有基础设施，前端通过WebSocket与远端同步。这种架构对React开发者而言是一个黑盒，只能通过官方插件API获取节点信息，且插件运行受沙箱限制，不能自由发起任意HTTP请求。Penpot则不同，它后端使用Clojure构建，前端是标准的React加Redux应用，整个项目托管在公开代码仓库。团队完全可以拉取镜像后在内部Kubernetes集群部署，设计文件以PostgreSQL行存形式落库。
这种架构差异带来一个直接好处：React开发者能够读懂Penpot前端源码，甚至给编辑器提交PR。例如其画板组件board在app/main/ui/shapes目录下导出，属性结构清晰对应SVG规范。相较之下，Figma的节点树需要通过figma.currentPage.findAll这类封装函数读取，字段命名偏内部约定，迁移时经常要写映射表。从工程可控性看，Penpot让前端团队拥有调试设计工具本身的能力。
另一个关键区别是令牌（tokens）机制。Penpot将颜色、间距、字体定义为设计令牌，并支持导出为JSON Schema。React项目可以用style-dictionary把这份JSON转成CSS自定义属性和TypeScript枚举。Figma虽有类似变量功能，但导出依赖第三方插件且格式不稳定。下面是一段Penpot令牌转React主题的简化脚本：
// 将Penpot导出的tokens.json转为React可用主题
const tokens = require('./tokens.json');
function toCssVar(obj, prefix = '--') {
const result = {};
for (const key in obj) {
const val = obj[key];
if (typeof val === 'object') {
Object.assign(result, toCssVar(val, prefix + key + '-'));
} else {
result[prefix + key] = val;
}
}
return result;
}
const cssVars = toCssVar(tokens.colors);
console.log(cssVars);
React组件如何从Penpot设计稿自动生成
在Penpot中，每个画板都可以导出为SVG，且图层名称会被保留为id或class线索。对于React项目，我们更推荐用官方penpot-exporter命令行工具批量拉取，再用SVGR转成组件。这样生成的Icon.jsx直接携带props扩展，方便在业务里复用。相比Figma必须借助付费插件才能稳定导出带命名组的SVG，Penpot的开放API显著降低了自动化门槛。
具体实践中，可以在package.json增加一条脚本：penpot-exporter sync --file my-ui --out src/assets。随后用SVGR监听该目录，输出 tsx 文件。要注意的是，Penpot默认导出的是绝对坐标，如果设计稿基于流式布局，需要人工在组件外包一层flex容器。下面展示一个由Penpot导出并经处理的按钮组件：
import React from 'react';
export const PrimaryButton = (props) => (
<button
style={{
background: 'var(--color-primary)',
borderRadius: 'var(--radius-md)',
padding: 'var(--space-sm) var(--space-lg)'
}}
{...props}
>
{props.children}
</button>
);
这种方案的优点在于设计令牌与组件样式同源，设计师在Penpot改了主色，前端只需重新跑导出脚本即可同步，避免过往Figma流程里复制色值产生的偏差。缺点是目前Penpot的自动布局算法不如Figma成熟，复杂嵌套画板有时需要手动调整flex参数，迁移初期建议先挑基础组件试点。
迁移过程中的权限与持续协作问题
切换到Penpot后，团队最关心的是评审流是否中断。Penpot内置评论与版本历史，且因为自托管，评论数据存于自有数据库，不会因供应商政策变更而丢失。React开发者可以基于其REST API写机器人，在GitLab MR里自动贴出设计对比图。Figma虽也有类似能力，但webhook出网受限，内网项目往往要绕代理。
权限模型上，Penpot支持团队、项目、文件三级粒度，并可与LDAP对接。对于使用React写内部管理系统的公司，这意味设计工具账号体系能和OA统一。我们曾遇到某团队从Figma迁过来后，用不到两天就完成了SSO配置，相比之前Figma企业版复杂的SCIM配置轻松许多。下面的表对比了二者在React团队常用维度上的差异：
| 维度 | Penpot | Figma |
|---|---|---|
| 部署方式 | 自托管或云 | 仅官方云 |
| 令牌导出 | 原生JSON Schema | 依赖插件 |
| React源码可读 | 是 | 否 |
| 内网评论同步 | 直接可达 | 需代理 |
持续协作方面，建议保留一个只读Figma归档项目，仅作历史查阅，新需求全部进Penpot。这样React工程师在改组件时，既能参考旧稿又不依赖外部服务。迁移不是一刀切，而是让开源工具承担增量生产，闭源工具退居冷备份，从组织层面消除单点风险。