选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

在 Figma 中设置排版变量

Figma 自去年 6 月开始就一直在向我们暗示,现在终于支持排版变量了。在 4 月的“Framework by Figma”活动中,他们宣布了多项功能,让它感觉就像一个迷你配置。

尽管我对 Figma 的新功能总是感到兴奋,但我可能需要花一点时间才能坐下来学习如何使用它们。当我需要改变对基础样式结构的想法时尤其如此。

1u6D-Xvk0-plK2YO2oEBgWA
Figma 中的排版变量

学习如何应用排版变量并不难。经过一些初步的尝试和错误后,我开始看到排版变量带来的价值。

只需单击几下,您就可以控制和批量编辑排版。您是否需要将所有文本样式的字母间距更改为 0.25px?排版变量让您能够在一个地方进行更改,而不必单独更改每种样式。然后,它会在所有情况下生效。

让我们深入研究设置一些排版变量,以便您可以获得这种能力并节省一些时间。

目录:

  1. 设置文本样式(如果尚未设置)
  2. 字体系列变量
  3. 字体粗细变量
  4. 字体大小变量
  5. 字体行高变量
  6. 排版模式
  7. 变量作用域

1. 设置文本样式(如果尚未设置)

我不想告诉你,但是如果没有现有的文本样式,你就无法创建排版变量。在本地变量弹出窗口中本地创建所有颜色变量后,我以为我可以对排版做同样的事情。(Figma 告诉我“不,你不能。”)

因此,在开始创建排版变量之前,您必须创建一些文本样式。如果您有设计系统,您可能已经有了文本样式,可以跳过此步骤。

脚步

1A.创建文本层并修改字体系列、粗细、大小等。

15NRpGulYGkXUbXGC1VyMJA
设计文本样式

1B.选择“文本”属性旁边的网格图标 → 在“文本样式”弹出窗口中选择加号 (+) 图标

1N2GV3-4kNc0eWzOWO6Hjkg
创建文本样式

1C.命名样式并给出描述(如何使用样式)

1wf8t4Iv54DvKMLbISC-QMQ
命名并描述文本样式

1D.对所有需要的文本样式重复 1A 至 1C

注意:您将能够在文件的设计面板中看到所有创建的文本样式。

1jYn1wGCUk1s5znVr9v4fqQ
本地样式出现在设计面板中

2. 字体系列变量

对于已建立的设计系统或公司来说,更改字体系列的情况非常罕见,但如果发生这种情况,这将加快这一过程。

如果有的话,最好将字体系列记录在局部变量中,以便所有文本属性都由变量控制。

脚步

2A.打开局部变量弹出窗口 → 选择“创建变量” → 选择“字符串”

注意:由于字体系列是命名值,因此请使用字符串变量。

10mxRVVuPg8HRgdLISeUyDA
选择“字符串”作为变量类型

2B.命名变量(IE、字体/系列/标题)

注意:正斜杠 (/) 在 Figma 中创建自动组。

1hwMyiNEp8TL8Xm3DM6Qr0Q
命名字体系列

2C.对所有字体系列重复 2A 至 2B(您可能只需要一个)

提示:使用“Shift+Enter”复制变量,这样您不必每次都输入“字体/系列/标题”。

1lIY9wPLdOEDdlLXx0_342Q
标题和正文的字体系列

2D.将字体系列变量链接到文本样式

选择文本样式旁边的“编辑样式”→选择字体系列→选择“应用变量”按钮→选择字体系列变量

注意:带有变量名称的灰色药丸将替换文本样式中的字体系列名称。

1rk7mlILNF8Ly99GDdDPUVg
将字体系列变量应用于文本样式

2E.对所有文本样式重复 2D

要更改局部变量中的字体系列,您必须手动逐字输入字体名称。此外,请确保设计文件包含字体系列,否则更改不会产生任何效果。

^返回目录

3. 字体粗细变量

字体粗细可以使用“字符串”或“数字”变量,具体取决于您如何命名它们。如果使用数字命名,例如 100 到 800,请使用数字变量。如果使用别名命名,例如 Thin 到 Black,请使用字符串变量。对于此演示,我使用了字符串变量。

脚步

3A.创建一个“字符串”变量并命名(IE,字体/粗细/粗体)

1fZMzpJUTW_-Bz1y73tqGZQ
为字体粗细创建字符串变量

3B.对所有字体粗细变量重复 3A

注意:确保命名一致且创建清晰的层次结构。

3C.将字体粗细变量链接到文本样式

选择文本样式旁边的“编辑样式”→选择字体粗细下拉菜单→选择底部的“应用变量”→选择字体粗细变量

1TFWwvydpP4L7Z6DVKt-Ug
将字体粗细变量应用于文本样式

3D.对所有文本样式重复 3C

重要提示:字体粗细变量名称必须与字体系列的给定粗细名称匹配。例如,假设我将字体粗细变量名称从“Bold”更改为“XBold”。字体系列的字体粗细名称为“Bold”,而不是“XBold”。

选择与字体系列匹配的字体粗细的变量名称

变量更改不会对文本样式产生任何影响,因为它未正确映射到字体系列的命名法。因此,在命名变量时,请确保它们与字体系列的粗细相匹配。

^返回目录

4. 字体大小变量

现在让我们创建一些数字变量。与字体粗细类似,字体大小可以根据您的排版需求而有不同的名称。对于此演示,我将使用 T 恤尺寸。

脚步

4A.创建一个“数字”变量并命名(IE,字体/大小/ XXL)

4B.使用正确的字体大小更新变量的值

1PkKsZeyShimxKI9jK8AQSg-1
为字体大小变量创建 T 恤尺寸

4C.对所有字体大小变量重复 4A 至 4B

4D.将字体大小变量链接到文本样式

选择文本样式旁边的“编辑样式”→选择字体大小下拉菜单→选择底部的“应用变量”→选择字体大小变量

1QDdyze_sD2uihMYBHjY41w-1
将字体大小变量应用于文本样式

4E.对所有文本样式重复 4D

5. 字体行高变量

设置 line-height 变量可能感觉与字体大小相同……因为它就是如此。无论为字体大小选择哪种命名约定,都应将其用于 line-height 以保持一致性。所以,我将继续使用 T 恤尺寸。

脚步

5A.创建一个“数字”变量并将其命名为 (IE、Font、Line-height、XL)

5B.使用正确的行高更新变量的值

10FQJOhhFwLyK4673bEKelQ-1
为行高变量创建 T 恤尺码

5C.对所有行高重复 5A 至 5B

5D . 将字体行高变量链接到文本样式

选择文本样式旁边的“编辑样式”→选择行高值旁边的“应用变量”→选择字体行高变量

1GCkt1QMnYC0pkoMPIvKzPg-1
将字体行高变量应用于文本样式

5E.重复所有文本样式

6. 排版模式

创建变量后,可能需要模式来实现响应式排版样式。例如,桌面屏幕上的字体大小通常比移动屏幕上的字体大。您可以创建模式,让变量为您完成工作。

对于这个演示,我将变量的现有模式命名为“桌面”,将新模式命名为“移动”。

脚步

6A.在局部变量弹出窗口中,选择“新变量模式”或加号 (+) 图标以创建新模式

1FeEXyLLtmthNDCBTPWMvNg
在局部变量弹出窗口中创建一个新的变量模式

6B.在新模式下对变量的值进行必要的更改

注意:某些变量在不同模式下将保持不变。

1uKrGIW1fPoQNw11PRsboXQ
在新模式下做出各种改变

6C.将变量模式应用于画布中的框架

选择框架→转到设计面板中的图层属性→选择“更改变量模式”→选择变量集合然后选择模式

1ysx4v5oXnas-0MPIhi6Jdw
将变量模式应用于框架

6D.对画布中的移动设备大小的框架重复步骤 6C

6E.测试变量映射

排版模式有助于自动更新字体样式

7. 变量作用域

排版变量的范围最近于 5 月底发布。因此,如果您已经在 Figma 框架之后创建了一些排版变量,那么现在是时候返回并为它们添加范围了。

范围界定可防止误用并有助于特定变量的可查找性。例如,您不会想将行高变量用于字体大小,反之亦然。

脚步

7A.打开局部变量,并为一个变量选择“编辑变量”

1z_xyqmYmYyRhsuJekPs0hg
在局部变量弹出窗口中编辑变量

7B.在出现的编辑菜单中切换到“范围”选项卡

1X4_JYgV9PTY0DpT2AJ67Yg
查看“范围”选项卡以查看已应用的属性

7C.取消选择变量不适用的属性

(即,字体粗细不适用于字体系列。)

1pjROFKaTbjhzOMh6V4rOGg
取消选择变量不适用的属性

7D.对所有变量重复 7C

注意:数字变量可应用更多属性,因此必须取消选择更多属性。

1v9Tlv2wWSIuLBURZWDFPBA
范围所有排版变量

7E.检查变量作用域

为行高选择变量时,只会出现行高变量。

仅作用域变量会出现在其对应的属性中 

以上就是使用排版变量可以做的一些事情!功能很强大,对吧?

我演示了字体系列、粗细、大小和行高的变量,但您可以做更多。字母和段落间距的变量也可以按照相同的步骤使用数字变量创建。

我敢打赌,排版变量还会有更多变化。也许我们可以添加更多属性,比如字母大小写或对齐方式?现在是六月,所以 2024 Config 即将到来。

不到两周我们就能知道结果了。敬请期待!

翻译:云瑞设计

原文:uxdesign

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。