3步跑通 Penpot 多语言界面适配【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot一个真实的坑德语的加入购物车比中文长出一倍切换语言后按钮文字直接溢出换成阿拉伯语整个界面还得从右到左重排。这就是多语言设计最贵的成本。Penpot 是一个免费开源的设计协作平台它用一套 47 种语言的翻译机制加组件变体把通常几天的本地化工作压到半天以内。一张图看懂这是 Penpot 的设计工作区画布在中间图层树在左样式属性在右。所有多语言工作都在这个界面完成——切语言、管文本、调布局不需要装任何额外插件。最小可行路径跑起来执行git clone https://gitcode.com/GitHub_Trending/pe/penpot然后进入目录运行./manage.sh start。这条命令会用 Docker 拉起完整服务栈不需要你手动装数据库。切换界面语言打开站点后进入右上角设置在 Language 里选简体中文整个界面立即切换无需重启。看翻译存哪了打开frontend/translations/目录随便翻一个zh_CN.po界面上的每条中文都来自这里。语言切换的底层逻辑见下文拆解。核心能力拆解翻译文件界面如何切换 47 种语言UI 文案全部以 PO 文件gettext 格式msgid 是原始键msgstr 是译文管理frontend/translations/下共 47 种语言。核心逻辑在frontend/src/app/util/i18n.cljs启动时读取浏览器语言偏好能匹配就用匹配不到回退英文代码里调用tr函数按键取当前语言的文本。好处是翻译流程与开发流程彻底解耦社区翻译更新不影响代码。操作要点使用者在设置里切换语言即可企业私有化部署可以通过window.penpotTranslations全局变量注入自己的覆盖译文。组件变体一处修改全语言同步变体Variants把一组相似组件合并成一个组件按属性值分组。给按钮组件加一个语言属性就得到中文/英文/德文/阿文等多个变体变体间共享的图层自动建立连接改主组件的圆角、配色所有语言变体跟着同步各自覆写的文字不受影响。操作要点在现有组件上按 CtrlK 创建变体。每个语言一个独立组件的做法等更新一次配色你就会后悔。字体与排版任何语言的文字都不破版不同语言的字符宽度和阅读方向差异很大。Penpot 的文本框支持自动宽度/高度弹性布局Flex Layout按内容自动排列的容器会随文本长度自动重排阿拉伯语这类 RTL从右到左语言可以整体镜像对齐。操作要点多语言界面的文本框尽量保持自动尺寸别手动锁死像素宽度——这是后文那个德国按钮事故的根源。一个完整场景电商 App 适配 6 国语言以中、英、德、阿、日、西六种语言为例按我们实际会走的顺序第 1 步先做德语版。德语词最长先把按钮按最长文本定好尺寸其余 5 种语言往里套。这一步最容易踩坑先做中文版再适配结果每个德语按钮都溢出全部返工。第 2 步把 6 个按钮合并成变体。对按钮组件 CtrlK 建变体属性名用语言值填中文/德文/阿文……。此后改主组件一处6 个变体同步只有文字是各语言自己的覆写。第 3 步处理阿拉伯语的 RTL。阿拉伯语页面整体镜像用弹性布局反转排列方向颜色、间距这些样式属性继续引用同一份设计标记Design Tokens集中管理颜色与尺寸的令牌集不要为 RTL 单独复制一套样式。第 4 步统一文字样式。各语言的标题、正文字号放进设计标记的文本样式集换语言时字号、行高从同一来源取值不会出现德语版标题比英语版小一号的细节事故。第 5 步导出。选中 6 个语言的画板批量导出开发一次拿齐所有语言的切图。结果新增一种语言时你只需要再加一个变体、填一组文字从原来的 3 天缩到 4 小时左右。避坑清单先做中文版再本地化→ 长文本语言全部溢出整套返工 → 先做最长的德语其他语言往内收缩。每个语言建一套独立组件→ 6 套按钮改一次圆角要改 6 遍 → 合并成一个组件用语言做变体属性。手动锁死文本框宽度→ 换语言即破版 → 保持自动宽度加弹性布局让文字撑开容器。把文案写死后转曲描边化→ 无法复用、无法随语言切换 → 文本图层始终保留可编辑。手改翻译文件的 msgid 键→ 键和代码对不上界面直接显示一串英文 key → 只改 msgstr 译文键保持原样。延伸与行动翻译贡献指南如何新增一种语言、提交后走什么审核流程这里讲清楚了。弹性布局文档文本长度自适应的官方教程RTL 适配也靠它。设计标记指南文字样式与颜色的集中管理入口。现在就打开你的项目做第一步给主按钮组件加一个语言变体属性——这是所有多语言适配的地基。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3步跑通 Penpot 多语言界面适配
3步跑通 Penpot 多语言界面适配【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot一个真实的坑德语的加入购物车比中文长出一倍切换语言后按钮文字直接溢出换成阿拉伯语整个界面还得从右到左重排。这就是多语言设计最贵的成本。Penpot 是一个免费开源的设计协作平台它用一套 47 种语言的翻译机制加组件变体把通常几天的本地化工作压到半天以内。一张图看懂这是 Penpot 的设计工作区画布在中间图层树在左样式属性在右。所有多语言工作都在这个界面完成——切语言、管文本、调布局不需要装任何额外插件。最小可行路径跑起来执行git clone https://gitcode.com/GitHub_Trending/pe/penpot然后进入目录运行./manage.sh start。这条命令会用 Docker 拉起完整服务栈不需要你手动装数据库。切换界面语言打开站点后进入右上角设置在 Language 里选简体中文整个界面立即切换无需重启。看翻译存哪了打开frontend/translations/目录随便翻一个zh_CN.po界面上的每条中文都来自这里。语言切换的底层逻辑见下文拆解。核心能力拆解翻译文件界面如何切换 47 种语言UI 文案全部以 PO 文件gettext 格式msgid 是原始键msgstr 是译文管理frontend/translations/下共 47 种语言。核心逻辑在frontend/src/app/util/i18n.cljs启动时读取浏览器语言偏好能匹配就用匹配不到回退英文代码里调用tr函数按键取当前语言的文本。好处是翻译流程与开发流程彻底解耦社区翻译更新不影响代码。操作要点使用者在设置里切换语言即可企业私有化部署可以通过window.penpotTranslations全局变量注入自己的覆盖译文。组件变体一处修改全语言同步变体Variants把一组相似组件合并成一个组件按属性值分组。给按钮组件加一个语言属性就得到中文/英文/德文/阿文等多个变体变体间共享的图层自动建立连接改主组件的圆角、配色所有语言变体跟着同步各自覆写的文字不受影响。操作要点在现有组件上按 CtrlK 创建变体。每个语言一个独立组件的做法等更新一次配色你就会后悔。字体与排版任何语言的文字都不破版不同语言的字符宽度和阅读方向差异很大。Penpot 的文本框支持自动宽度/高度弹性布局Flex Layout按内容自动排列的容器会随文本长度自动重排阿拉伯语这类 RTL从右到左语言可以整体镜像对齐。操作要点多语言界面的文本框尽量保持自动尺寸别手动锁死像素宽度——这是后文那个德国按钮事故的根源。一个完整场景电商 App 适配 6 国语言以中、英、德、阿、日、西六种语言为例按我们实际会走的顺序第 1 步先做德语版。德语词最长先把按钮按最长文本定好尺寸其余 5 种语言往里套。这一步最容易踩坑先做中文版再适配结果每个德语按钮都溢出全部返工。第 2 步把 6 个按钮合并成变体。对按钮组件 CtrlK 建变体属性名用语言值填中文/德文/阿文……。此后改主组件一处6 个变体同步只有文字是各语言自己的覆写。第 3 步处理阿拉伯语的 RTL。阿拉伯语页面整体镜像用弹性布局反转排列方向颜色、间距这些样式属性继续引用同一份设计标记Design Tokens集中管理颜色与尺寸的令牌集不要为 RTL 单独复制一套样式。第 4 步统一文字样式。各语言的标题、正文字号放进设计标记的文本样式集换语言时字号、行高从同一来源取值不会出现德语版标题比英语版小一号的细节事故。第 5 步导出。选中 6 个语言的画板批量导出开发一次拿齐所有语言的切图。结果新增一种语言时你只需要再加一个变体、填一组文字从原来的 3 天缩到 4 小时左右。避坑清单先做中文版再本地化→ 长文本语言全部溢出整套返工 → 先做最长的德语其他语言往内收缩。每个语言建一套独立组件→ 6 套按钮改一次圆角要改 6 遍 → 合并成一个组件用语言做变体属性。手动锁死文本框宽度→ 换语言即破版 → 保持自动宽度加弹性布局让文字撑开容器。把文案写死后转曲描边化→ 无法复用、无法随语言切换 → 文本图层始终保留可编辑。手改翻译文件的 msgid 键→ 键和代码对不上界面直接显示一串英文 key → 只改 msgstr 译文键保持原样。延伸与行动翻译贡献指南如何新增一种语言、提交后走什么审核流程这里讲清楚了。弹性布局文档文本长度自适应的官方教程RTL 适配也靠它。设计标记指南文字样式与颜色的集中管理入口。现在就打开你的项目做第一步给主按钮组件加一个语言变体属性——这是所有多语言适配的地基。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考