将本地化融入设计系统的实战指南

设计系统的多语言挑战

SAS产品设计师Rebecca Hemstad和Mark Malek分享了他们在构建全球化设计系统时的经验。作为SAS Filament设计系统的核心成员，他们发现传统以英语为中心的设计流程会导致：

• 布局错位
• 文本溢出
• 右向左(RTL)语言支持不足

技术架构解析

设计令牌体系

1. JSON文件管理：

   • 使用"Token Depot"应用管理企业GitHub上的JSON文件
   • 通过Tokens Studio插件(专业版)转换为Figma库
   • 令牌值直接对应CSS属性

2. 分层结构：

   1 2 3 4 5 6 7

   { "core": "基础令牌", "brand": { "theme1": "主题配置", "languages": "本地化覆盖" } }

多维度切换实现

1. 主题/密度/语言三维模型：

   • 主题：影响颜色、字体等视觉属性
   • 密度：控制字号、间距等密度参数
   • 语言：管理字体家族、排版等本地化需求

2. 语言分类策略：

   • 西欧/斯拉夫语系
   • 中文简繁体
   • 中东/东亚语言
   • 全球多样性语言

Figma实现难点

1. 排版变量限制：

   • 行高仅支持像素值(不支持CSS百分比)
   • 手动计算并创建数百个本地变量
   • 字体栈预览受限(无法模拟系统字体回退)

2. 幽灵变量问题：

   • 通过"Swap Variables"插件清理残留变量
   • 组件级变量映射检查

多语言组件设计规范

1. 自动布局原则：

   • 禁用固定宽度文本容器
   • 支持RTL布局镜像
   • 动态间距调整

2. 字体处理技巧：

   1 2 3

   /* 中文字体栈示例 */ font-family: 'AnovaUI', '微软雅黑', 'Microsoft YaHei', sans-serif;

经验总结与未来方向

1. 核心教训：

   • 语义化令牌命名降低维护成本
   • Figma变量尚需功能增强
   • 真实内容测试不可替代

2. 优化路线图：

   • RTL布局自动化工具
   • 行高百分比支持倡导
   • 本地化测试框架搭建

查看完整案例研究 | 设计系统文档