将本地化集成到设计系统中
挑战与机遇
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. 多语言符号设计
为确保符号支持语言切换：
- 将所有文本层链接到新变量（字体、字号、行高）
- 使用自动布局实现灵活调整
- 避免硬编码文本容器宽度
关键技术收获
- 语义令牌是关键：重构令牌使其更具语义性，简化了本地化流程
- Figma变量的局限性：缺乏百分比行高支持等问题凸显改进空间
- 自动化必不可少：手动计算和输入值既耗时又容易出错
- 真实内容测试不可妥协：只有用真实翻译测试才能发现文本换行等问题
未来方向
- 开发RTL语言自动镜像布局工具
- 推动Figma增强功能（如百分比行高支持）
- 投资更强大的插件来自动化管理跨主题令牌
- 建立本地化测试框架
通过分享这些经验，我们希望促进设计社区关于在设计系统中集成本地化和国际化的讨论，帮助团队构建真正全球化的产品体验。
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
公众号二维码
