将本地化集成到设计系统中

挑战与机遇

Mark 和我作为 SAS 的产品设计师，负责支持 SAS Filament 设计系统的令牌包和组件库。SAS 的客户遍布全球，这意味着我们需要处理多语言、多文化的设计需求。设计师们通常使用 Figma 库创建英文版的高保真设计，却常常忽视多语言原则，导致布局问题、文本溢出和 RTL（从右到左）语言支持等挑战。

随着 Figma Variables 和设计令牌技术的发展，我们看到了构建动态切换主题、密度和语言系统的机会。

核心概念：本地化(L10n)与国际化的区别

• 本地化(L10n)：针对特定语言、地区或文化调整设计，包括：

• 文本翻译

• 调整布局以适应语言特定要求（如长短文本或 RTL 文本）

• 确保视觉元素符合目标受众文化

• 国际化(I18n)：确保设计能灵活适应不同语言和地区的准备阶段，关键考虑包括：

• 使用占位文本表示动态内容

• 设置动态调整约束以处理文本扩展/收缩

• 支持 RTL 布局的双向文本

技术实现路径

1. 设计令牌系统架构

我们的设计令牌存储在 JSON 文件中，通过"Token Depot"应用管理。使用 Tokens Studio 插件（专业版）将这些 JSON 转换为 Figma 库。令牌值直接对应 CSS 值。

令牌分组结构：

• 颜色（品牌色、基础色）

• 排版（字体、间距、样式）

• 空间（内边距、外边距）

• 尺寸（图标、边框）

• 样式（焦点状态）

• 动效（动画）

• 阴影

2. JSON 文件重构

我们按核心、主题和密度模式分组 JSON 文件：

• 核心文件夹包含不受主题或品牌影响的 JSON

• 每个品牌文件夹包含三个 JSON 文件（每个主题一个）

• 语言文件夹包含其他地区的覆盖值

语言分类优化：

• 西欧和斯拉夫语言

• 中文（简体和繁体）

• 中东和东亚语言

• 全球多样化语言

3. Figma 变量集成挑战

主要技术障碍：

• Figma 默认行高乘数 1.2 低于 WCAG 最低标准 1.5

• 不支持 CSS 百分比行高值

• 必须手动计算所有排版尺寸、语言类别和密度的像素值

解决方案：

• 创建数百个本地变量独立于设计令牌系统

• 使用"Swap Variables"插件清理幽灵变量

• 通过"Translator"插件测试多语言布局

4. 多语言符号设计

为确保符号支持语言切换：

• 将所有文本层链接到新变量（字体、字号、行高）

• 使用自动布局实现灵活调整

• 避免硬编码文本容器宽度

关键技术收获

1. 语义令牌是关键：重构令牌使其更具语义性，简化了本地化流程

2. Figma 变量的局限性：缺乏百分比行高支持等问题凸显改进空间

3. 自动化必不可少：手动计算和输入值既耗时又容易出错

4. 真实内容测试不可妥协：只有用真实翻译测试才能发现文本换行等问题

未来方向

• 开发 RTL 语言自动镜像布局工具

• 推动 Figma 增强功能（如百分比行高支持）

• 投资更强大的插件来自动化管理跨主题令牌

• 建立本地化测试框架

通过分享这些经验，我们希望促进设计社区关于在设计系统中集成本地化和国际化的讨论，帮助团队构建真正全球化的产品体验。更多精彩内容 请关注我的个人公众号 公众号（办公 AI 智能小助手）公众号二维码

办公AI智能小助手