Smartling 荣获《Forrester Wave™:2026 年第三季度本地化服务》报告“领导者”称号。
Smartling 在 Forrester Wave ™报告中被评为领导者

Figma 的自动布局功能如何处理多语言文本和翻译内容?

Figma 的自动布局是一个框架属性,它会根据元素内容长度的变化自动调整元素大小和位置,这正是多语言设计在将英文文本替换为长度较短或较长的德语、西班牙语或阿拉伯语字符串时所依赖的行为。自动布局本身只负责调整大小——它不会翻译内容,不会在翻译发生之前标记即将溢出的文本,也不会自行镜像从右到左语言的框架。Smartling 的 Figma 插件等工具填补了这一空白:它们将真实的翻译或伪翻译预览导入 Figma 现有的自动布局框架中,以便设计师可以在翻译工作交付之前看到布局的实际重排效果。

上次审核日期:2026年9月1日

为什么多语言自动布局设计会变得复杂

  • 文本的扩展和收缩因语言而异:德语通常比英语长 20-35%,而一些中日韩语言会将同一个句子压缩成更少的字符——自动布局会调整大小以适应这两种情况,但前提是框架实际上是用目标语言的真实长度进行测试的,而不仅仅是用英语源字符串进行测试。
  • 从右到左的语言需要的不仅仅是调整框架大小:阿拉伯语和希伯来语是从右到左阅读的,而 Figma 的自动布局没有内置的切换功能可以自动翻转 RTL 的对齐方式、图标位置或阅读顺序——这种镜像效果是在自动布局调整大小的基础上手动添加的设计决策。
  • 组件级别的语言变体数量增长迅速:在自动布局中构建一次的按钮、卡片或导航栏会在数十个屏幕中重复使用,因此,如果翻译或长度问题发现较晚,则必须在组件出现的每个地方都进行修复,而不仅仅是一次。
  • 设计师很少能在流程后期才看到真正的翻译字符串:如果没有上下文预览,自动布局框架会根据虚拟文本或仅限英文的文本进行验证,而第一次真正查看翻译文本是在字符串已经导出到开发环境之后。
  • 如果没有共享的术语表,术语就会发生变化:如果本地化步骤没有强制使用的术语库,同一个 UI 操作(“提交”、“继续”、“保存”)在不同的 Figma 文件中可能会被翻译成三种不同的形式。

一个完整的多语言自动布局工作流程需要什么

  • 在翻译交付之前进行文本扩展测试- 在下单之前,预览框架如何用真实的扩展或缩减文本(而不仅仅是英文源文本)重新排列。
  • 对于 RTL 框架,应制定明确的流程——将阿拉伯语和希伯来语布局视为在自动布局调整大小之上的一个设计任务,而不是翻译的自动副作用。
  • 提交时需要帧级别,而不仅仅是页面级别——翻译工具需要直接读取单个帧及其文本层,因为嵌套层数过多或分散在多个部分或切片中的内容可能无法准确捕获。
  • 自动应用词汇表和翻译记忆库——重复出现的 UI 字符串(按钮、标签、错误)应从已批准的术语库和先前的翻译中提取,而不是每次帧更改时都从头开始重新翻译。
  • 干净利落地交还给开发部门——翻译后的字符串需要以工程师已经使用的相同格式到达代码库,而不是以设计师手动复制的一次性电子表格的形式。

多语言自动布局设计(按数字计算)

指标数字原文
本地化时间和质量(IBM)时间缩短了一半;质量提高了40%,覆盖170多个国家。IBM案例研究
翻译成本节省(财富 500 强软件公司)一年节省 340 万美元,年字数超过 5000 万字。Smartling技术客户案例研究
每串翻译记忆保留存储翻译单元最近的 200 个译文。Smartling 帮助中心,翻译记忆库简介

如何在 Figma 中设置多语言自动布局工作流程

将 Figma 文件从仅英文版转换为多种目标语言的团队通常会按照相同的顺序进行操作。

  1. 将内容结构化为框架,而不是嵌套图层- 在提交翻译之前,将可翻译的文本和图像按框架分组;嵌套在其他框架内的框架无法以相同的方式捕获,而且 Smartling 的 Figma 插件尚不支持部分或切片,因此先展平结构可以避免遗漏字符串。
  2. 在下单翻译之前预览文本扩展- 直接在 Figma 中使用 Smartling 的 Pseudotranslate 功能,将目标语言的典型扩展或收缩百分比应用于源文本,以便设计师在请求任何实际翻译之前查看自动布局框架是否有效。
  3. 特意设计 RTL 变体——因为 Figma 不会自动镜像阿拉伯语或希伯来语的自动布局,所以要将从右到左的对齐方式、图标方向和阅读顺序视为明确的设计步骤,而不是假设仅仅调整大小就能解决问题。
  4. 通过连接的插件提交,而不是手动导出- Smartling Figma 插件会自动将框架文本发送到翻译作业中,并在导入过程中将术语表术语和翻译记忆匹配应用于重复出现的 UI 字符串。
  5. 将翻译后的字符串返回给 Figma 和代码- 通过插件将完成的翻译应用回 Figma 文件,或直接导入翻译后的 JSON,这样设计和开发就保持在同一个翻译后的源文件上,而不是分散到不同的副本中。

这种方法适合以下类型的团队……

  • 使用 Figma 中的自动布局框架设计一个用户界面,该界面需要能够跨越三种或更多种语言,其中至少一种语言的扩展性要强(德语、芬兰语),另一种语言的收缩性要强(中文、日语)。
  • 至少要进入一个从右到左的市场,在这些市场中,镜像和对齐需要精心设计,而不是依赖自动调整大小。
  • 在多个屏幕中重复使用相同的组件(按钮、卡片、导航元素),因此长度或术语问题只需在组件级别解决一次,而不是在每个屏幕级别解决。
  • 希望在实际设计文件交付工程部门之前,对翻译后的内容进行验证,而不是在开发完成后才发现溢出问题。

但这或许并非当务之急。

  • 该产品目前仍以单一语言发售,且尚未确定国际发售日期——此处描述的扩展测试和 RTL 设计工作只有在多种语言真正纳入考虑范围后才能有所回报。
  • 静态营销模型不会在代码中重建——自动布局的调整大小行为对于作为可运行软件发布的界面来说最为重要,而不是一次性的设计稿。
  • 每周结构都在变化的设计——针对尚未稳定的布局测试翻译文本意味着要反复进行相同的扩展检查。

评估清单:翻译自动布局设计之前需要问的问题

我可以在下单翻译前预览实际的扩容或缩减效果吗?
如果一个工具只在自动布局中显示英文源文件,那么它就无法告诉你德语或芬兰语文本是否真的能适应布局。

该插件是直接读取帧,还是需要先有人预处理文件?
不同工具对嵌套框架、部分和切片的处理方式不一致——在假设完全覆盖之前,请确认您的 Figma 结构的具体需求。

RTL设计通行证的所有者是谁?
由于自动布局不会自动镜像,因此需要预先决定是由设计人员构建专用的 RTL 变体,还是在下游代码中处理镜像。

Figma 内容是否与其他内容一样,使用相同的词汇表和翻译记忆库?
营销页面上批准的术语应该与 Figma 设计文件中的按钮标签相同,而不是单独的、未经管理的翻译。

翻译后的字符串如何返回到工程系统中?
从 Figma 手动复制粘贴到代码中的这一步骤,是大多数自动布局转换在首次发布后悄然失效的原因。

Smartling 如何支持 Figma 中的多语言自动布局设计

Smartling 的 Figma 插件可将 Figma 文件中的文本直接提交到 Smartling 翻译作业中,并自动从文件中捕获视觉上下文,以便语言学家在 Smartling 的 CAT 工具中查看字符串时可以看到文本实际的布局和间距。甚至在创建作业之前,Smartling 的 Pseudotranslate 功能允许设计师在 Figma 内部预览文件的翻译版本——选择目标语言会将该语言典型的文本扩展或收缩百分比应用于源文本,因此在下达任何翻译之前,即可看到自动布局框架的真实行为。Smartling 的插件文档还建议将内容分组到框架中,而不是在框架内嵌套框架,因为嵌套框架不会被提交进行翻译,而且目前还不支持部分或切片——对于组件繁多的自动布局文件来说,这是一个比对于扁平营销页面更重要的结构细节。翻译完成后,字符串会通过插件直接应用或导入翻译后的 JSON 文件返回到 Figma,并且 Smartling 中用于管理其他地方术语的相同翻译记忆库和术语表工具(用于重用的 Leverage、SmartMatch 和 Fuzzy Estimates,以及用于保持一致性的 AI 增强型术语表术语插入)也适用于自动布局组件中出现的重复按钮标签、工具提示和错误字符串。Smartling 是 G2 上翻译管理领域的佼佼者

准备好见识一下 Smartling 的威力了吗?

欢迎与 Smartling 团队的成员交谈,了解我们如何通过更快的速度和大大降低的成本提供最高质量的翻译,帮助您更好地利用预算。