Figma 最近发布了变量功能,这为 UI 设计师带来了极大的便利。利用变量,我们可以轻松实现设计稿的多语言切换。
通过下面这个案例，你会深入了解变量功能在多语言设计稿上的应用
首先,我们在 Figma 画板上创建两个画框,一个白色代表中文,一个灰色代表英文，分别添加自动布局约束后,我们开始设置本地变量。
点击画布空白处,在设计面板找到“Local Variables”选项卡。新建除颜色变量外,
颜色变量设置参看：Figma 最新功能Variables教程(一)丨Color颜色变量
我们还需要设置三个String字段变量,分别为”商品名称“”售价“"CTA文本"，并设定好中英文模式下，三个变量的初始值。
然后,我们分别选中商品名称、价格和CTA按钮文本,在右侧文本控制面板链接刚刚创建的String字段变量。
设定完成后,将卡片拖入白色画框应用"中文模式",
灰色画框应用”英文模式“，通过以上的操作，基础设定就制作好了。
见证奇迹的时刻到了，将商品卡片拖入中文-白色画框，会显示为白色-中文，拖入灰色画框会显示为深色-英文。随意拖放无缝切换。
通过创建字段变量,我们实现了轻松切换设计稿文本语言的功能。
这是一个使用 Figma 字段变量设计多语言系统的简单示例，快去试试吧！
