如何使用 Figma 的新变量来构建我的设计系统

I will walk you through how I used Figma’s new variables to create smart Design Tokens for a comprehensive design system in just a few days.

我将带你了解我如何利用Figma的新变量，在短短几天内为一个全面的设计系统创建智能设计标记。

Announced in June, Figma released a series of new features that greatly improves the way we build and use design systems, lowering our dependancy on third-party plugins.

Figma在六月份宣布推出了一系列新功能，大大改善了我们构建和使用设计系统的方式，减少了对第三方插件的依赖。

Figma clearly understand the power and success of Design Tokens, and have now made it possible for us to create them using Variables. For a more comprehensive explanation, read Figma’s release notes here.

Figma清楚地了解到设计令牌的力量和成功，并且现在使我们能够使用变量来创建它们。要了解更详细的解释，请阅读Figma的发布说明。

In this article, I will demonstrate how I’ve organised a design system using these Variables. I will also explain how these Variables will be used throughout my daily design process.

在本文中，我将展示我如何使用这些变量来组织一个设计系统。我还将解释这些变量将如何在我的日常设计过程中使用。

Variable Collections 变量集合

Collections are Figma’s name for grouping Variables of the same type. This is the main way your Variables will be organised.

集合是Figma对相同类型变量进行分组的名称。这是组织变量的主要方式。

I created the following collections of Variables:

我创建了以下变量集合：

Base Colors 基本颜色(edit: Figma suggests naming these ‘Primitive Colors’ or ‘Primitive Tokens’) （编辑：Figma建议将其命名为“原始颜色”或“原始标记”）

Color Tokens 颜色代币(edit: Figma suggests naming these ‘Semantic Colors’ or ‘Semantic Tokens’) （编辑：Figma建议将其命名为“语义颜色”或“语义标记”）

Number Tokens 数字令牌

Devices 设备

Color Variables 颜色变量

Creating Variables for color styles allows us to style components in a smart way, making the most of the capabilities of Variables.

The Relationship Between Base Colors and Color Tokens

基本颜色与色彩标记之间的关系

To create Variables that resemble the structure of design tokens, I’ve create two collections:

为了创建类似设计令牌结构的变量，我创建了两个集合：

Base Colors: Defining the Hexadecimal color value (#123456) of all of the colors in your team’s color palette. 基本颜色：定义团队色板中所有颜色的十六进制颜色值（#123456）。

Color Tokens: Defining the semantic colors / use cases that will be used to style objects and components. 颜色标记：定义将用于为对象和组件设置样式的语义颜色/用例。

Base Colors 基本颜色

An alias of these Base Colors are used when we define our Color Tokens.

在定义颜色标记时，我们使用这些基本颜色的别名。

Color Tokens are the variables we will use to style components and used everyday by the design team.

颜色令牌是我们用来为组件设置样式的变量，设计团队每天都在使用。

Design Tokens 设计令牌

If you’re not familiar with the power of Design Tokens, here’s a brief overview to give you context to the benefit of setting up the design system this way:

如果你对设计令牌的威力不太了解，这里有一个简要概述，以便让你了解以这种方式建立设计系统的好处

If a designer hands over a design to a developer with Hex values (i.e. #123456), or linked to a ‘Base Color’ (i.e. Yellow500 or BrandPurple), it requires the designer to provide detailed specifications to communicate to the developer what color to use for different color themes (i.e. light vs dark mode), which is time-consuming, or (more common) the developer is left without the necessary information, causing them to waste time following up with the designer, using a Hex value, or creating a new color style within their environment that has no connection to the design system.

如果设计师将设计交给开发人员时使用十六进制值（例如#123456）或链接到“基础颜色”（例如Yellow500或BrandPurple），则需要设计师提供详细规格以向开发人员传达不同颜色主题的颜色使用方式（例如浅色与深色模式），这需要耗费时间，或者（更常见的情况是）开发人员缺乏必要的信息，导致他们不得不花时间与设计师跟进，使用十六进制值或在其环境中创建与设计系统无关的新颜色样式。

To prevent this issue and support designer-developer relationship, it’s highly recommended across product teams to establish Design Tokens (a_lso known as semantic colors or use cases)_ for use within your team’s design system.

In this article, I will refer to these design tokens as Color Tokens, which are Figma Variables, that allow us to define a color for each Mode (also known as theme).

在本文中，我将把这些设计令牌称为颜色令牌，它们是Figma变量，允许我们为每个模式（也称为主题）定义一种颜色。

I will go through how to set-up Color Tokens as Variables shortly, firstly, it’s necessary to establish your design system’s Base Colors.

我将很快介绍如何设置颜色令牌作为变量，首先，建立设计系统的基础颜色是必要的。

Step 1: Create a New Collection: ‘Base Colors’

步骤1：创建一个新的收藏夹：“基础颜色”

Base colors are defined once, and rarely updated. This base color palette represents all of the colors that can possibly be used in your design system. It will contain all of your brand colors and colors used for your UI elements, to give you as much flexibility of color that your product desires. However, the less colors, the ‘better’ and more efficient your design system is. Less means less human error on both designer and develop side, especially when linking the colors, and when maintaining the design system. Most of the colors will be shades of grey that are used for different UI elements such as dividers, icons, etc.

基础颜色只需定义一次，并且很少更新。这个基础颜色调色板代表了设计系统中可能使用的所有颜色。它将包含所有品牌颜色和用于UI元素的颜色，以便为您的产品提供尽可能多的颜色灵活性。然而，颜色越少，设计系统就越“好”和更高效。较少的颜色意味着在设计师和开发人员两方面都减少了人为错误的可能性，尤其是在链接颜色和维护设计系统时。大多数颜色将是用于不同UI元素（如分隔线、图标等）的灰色阴影。

Base colors are: 基本颜色有：

Only used within the Design System Figma File 仅在设计系统Figma文件中使用

Not to be used to style components within the design system 不要用于设计系统中的样式组件

Should not be used by your design team to avoid them ending up in developer handover. 不应该由你的设计团队使用，以避免它们最终落入开发人员的交接中。

Should not used by developers as there’s no defined link between different themes (light and dark, for example) 不应该被开发者使用，因为不同主题之间没有明确的链接（例如，浅色和深色）

This is what it looks like adding a color variable to my new collection called ‘Base Colours’.

这就是在我的新收藏品“基础颜色”中添加一个颜色变量的样子。

Once I’ve added all of the colors I want available in my color palette, it should look something like this:

一旦我将我想要的所有颜色添加到我的调色板中，它应该看起来像这样：

There’s one last step for the Base Colors. It’s highly recommended that the base colors themself should not be used everyday by your design team, nor should they be used when defining colors for components, screens.

基本颜色还有最后一步。强烈建议设计团队不要每天使用基本颜色本身，也不要在定义组件和屏幕颜色时使用它们。

For this reason, before publishing these to your team libraries, I highly advise you to select ‘Hide from publishing’ on all of these Base Colors.

因此，在将这些内容发布到您的团队库之前，我强烈建议您在所有这些基本颜色上选择“隐藏发布”。

Tip: Figma will soon release an update which gives the entire collection a ‘Hide from publishing’ checkbox. Until then, you can add “.” or “\” before the collection name to hide the entire collection from publishing.

提示：Figma即将发布一个更新，为整个收藏集添加一个“隐藏发布”复选框。在此之前，您可以在收藏集名称前添加“.”或“\”来隐藏整个收藏集的发布。

This prevents these colors from being visible when your design team is working on a feature in another file linked to this design system.
这样可以防止设计团队在与该设计系统链接的另一个文件中开展工作时看到这些颜色。

With the above Base Colors set-up, you will eventually link these Base Colors to ‘Color Tokens’ which will be used for the components within your design system, and by your design team everyday.

通过上述的基本颜色设置，您最终将把这些基本颜色与“颜色令牌”关联起来，这些颜色令牌将用于设计系统中的组件，并由您的设计团队每天使用。

Step 2: Create a New Collection: ‘Color Tokens’

步骤2：创建一个新的收藏夹：“颜色代币”

Also known as semantic colors, use cases, design tokens, etc. 也被称为语义颜色、使用案例、设计标记等。

Colour Tokens are: 颜色代币是：

Used to style components in the design system 用于设计系统中的组件样式

Used to reduce the amount of design specifications needed in design handover 用于减少设计交接中所需的设计规范数量

Makes it possible to quickly preview designs in different color modes/themes 可以快速预览不同颜色模式/主题的设计

Shared and used by the entire design team 由整个设计团队共享和使用

Used by developers 开发者使用

Setting up for Light & Dark Mode 设置亮暗模式

When setting up a Color Token, you define The colors that the element should be in each ‘Mode’, for example, light and dark mode, and any other themes your product has.

设置Color Token时，您定义了元素在每个“模式”中应该呈现的颜色，例如，明亮模式和暗模式，以及产品所具有的其他主题。

Defining colors for Light and Dark mode, for example, gives designers (and developers!) the ability to quickly preview how a design will look, with very little effort:
为浅色和深色模式定义颜色，例如，使设计师（和开发人员！）能够快速预览设计的外观，几乎不费力气：

*Linking back to the Base Colors

回溯到基本颜色**

When setting the color variable, it’s important that you don’t use Hex values, instead link the Base Colors to form an alias between the Color Token and the Base Color. This step is critical, as it makes sure:

设置颜色变量时，重要的是不要使用十六进制值，而是将基本颜色链接起来，形成颜色令牌和基本颜色之间的别名。这一步骤至关重要，因为它确保：

You are only using the colors your team has already defined, preventing ‘new’ random colors from being used. 你只能使用团队已经定义的颜色，防止使用“新的”随机颜色。

You are creating a link between the Color Token and the Base Color. Which means if the Base Color needs to be updated throughout the product (for example maybe the branding team wants to change the brand color) then you do this in one place, which update all of the linked Color Tokens and components using these Color Tokens. 您正在创建颜色令牌和基础颜色之间的链接。这意味着如果基础颜色需要在整个产品中进行更新（例如，品牌团队想要更改品牌颜色），您只需在一个地方进行更新，即可更新所有使用这些颜色令牌和组件的链接。

You should end up with a list of Color Modes that might look something like this:

你应该最终得到一个颜色模式列表，可能看起来像这样：

The amount of Color Modes will depend on your team and product. You will notice I have used a Hex values for the iOS Status Bar — this is because I don’t want to use my design system colors for native elements I don’t have control over (however, I could create an iOS white and iOS black Base Color, but since they will only be used once, I don’t yet find it necessary).

颜色模式的数量将取决于您的团队和产品。您会注意到，我在iOS状态栏中使用了十六进制值，这是因为我不想为我无法控制的本机元素使用我的设计系统颜色（但是，我可以创建一个iOS白色和iOS黑色的基础颜色，但由于它们只会被使用一次，我还不觉得有必要）。

Step 3: Create a New Collection: ‘Number Tokens’

步骤3：创建一个新的集合：'数字令牌'

Here, I’ve created variables to define rules for Spacing and Radius for use throughout the design system. Note that these are a different type of variable to the Color variables used above, here we use Number variables.

在这里，我创建了变量来定义间距和半径的规则，以便在整个设计系统中使用。请注意，这些变量与上面使用的颜色变量是不同类型的变量，这里我们使用数字变量。

This is extremely useful for improving consistency and increasing the speed at which a design team can design, as they don’t need to go too far to search for rules and guidelines, as the variables can be defined to be available in the exact location they will be used.

这对于提高一支设计团队的一致性和设计速度非常有用，因为他们不需要费太多力气去寻找规则和指南，变量可以被定义为在将要使用的确切位置可用。

This can be achieved by limiting where the variable can be used. Open the variable’s settings and defining the appropriate Number Scoping that relates to the Token’s use:

这可以通过限制变量的使用范围来实现。打开变量的设置，并定义与令牌使用相关的适当的数字范围。

You can use this to limit a variable in the following locations:

您可以在以下位置使用此功能来限制变量：

Corner Radius 圆角半径

Width and Height 宽度和高度

Gap and Padding 间隙和填充

Text

Create a New Collection: ‘Devices’

创建一个新的收藏：‘设备’

Honestly this is a great hack for quickly previewing design responsiveness on different devices within Figma. It means you only need to produce one design, making it much more efficient to manage, as there’s one source of truth.

老实说，这是一个非常棒的技巧，可以在Figma上快速预览设计在不同设备上的响应性。这意味着你只需要制作一份设计，更加高效地管理，因为只有一个真实的来源。

To achieve this, create a new collection called ‘Devices’, and add Modes for each device type your product and team design for (mobile, tablet, desktop, etc.) and create Number Variables for each device’s width and height.

为了实现这一目标，创建一个名为“设备”的新集合，并为您的产品和团队设计的每种设备类型（移动设备、平板电脑、台式机等）添加模式，并为每种设备的宽度和高度创建数字变量。

When to use 何时使用

Use these variables wherever you create a frame for a specific device size, i.e. screens in your design system, and during everyday designing.

在您的设计系统和日常设计中，无论您为特定设备尺寸创建框架，例如屏幕，都可以使用这些变量。

Whenever you create a new frame that should represent a device, set the frame’s width and height using the Device variables, like the following:

每当您创建一个应该代表设备的新框架时，请使用设备变量设置框架的宽度和高度，如下所示：

Once you’ve linked the device variables to the screen’s width and height, Next, put that frame into a section.

一旦将设备变量与屏幕的宽度和高度关联起来，接下来，将该框架放入一个部分中。

Finally, to auto-size the section’s children to a specific device, link the section to the Device mode of choice. Do this by selecting the section and on the ‘Layer’ panel in the right sidebar, tap on the variable icon and select a device mode you want the children frames to auto-size to.

最后，要将该部分的子元素自动调整为特定设备，请将该部分链接到所选设备的设备模式。方法是选择该部分，在右侧边栏的“图层”面板上点击变量图标，然后选择要将子框架自动调整为的设备模式。

Note: You can’t add a mode to a section unless there’s an object in the section that has a mode applied to it. 注意：除非在部分中有一个已应用模式的对象，否则无法向部分添加模式。

Using Variables for Min and Max

使用变量来表示最小值和最大值

As you can spot, I’ve gone even further with device variables and used them to define Min and Max column widths for different breakpoints. This improves the responsiveness of content when it changes between different devices.

正如你所看到的，我在设备变量方面更进一步，使用它们来定义不同断点下的最小和最大列宽。这样可以提高内容在不同设备之间切换时的响应性。

Example of where I’ve used Min and Max width for small columns:

我使用最小和最大宽度来定义小列的示例：

Example of where I’ve used Min and Max width for default columns:

我使用最小和最大宽度来设置默认列的示例：

This results in auto-responsive designs:

这导致了自动响应式设计

Text Styles 文本样式

As of the date of this article, Text Styles aren’t yet connected to Variables. However, Figma have outlined that they are working on adding this in the near future.

截至本文发布日期，文本样式尚未与变量相连接。然而，Figma已经明确表示他们正在努力在不久的将来添加此功能。

Conclusion 结论

This is how I’ve structured a fairly simple design system, in less than a few days. I’m sure I will improve it over time, and as the system grows, but for now it’s allowing me to build components extremely quickly, with constraints that make sure my system maintains consistency.

这是我在几天内构建的一个相当简单的设计系统的结构。我相信随着时间的推移，随着系统的发展，我会不断改进它，但目前它让我能够以极快的速度构建组件，并通过约束确保我的系统保持一致性。

Please give your feedback in the comments section so I can improve this article over time ♥.

请在评论区提供您的反馈，这样我就可以随着时间的推移改进这篇文章 ♥。

Big shoutout to iOS developer and incredible human

for working with me on this and providing a developer’s perspective.

非常感谢iOS开发者和了不起的人类David Jangdal与我合作，并提供了开发者的观点。

This design system is based on a hobby project ‘The Good Guide’, and is not yet a live product, which gives me a lot of flexibility to experiment with new Figma functionality such as Variables. 这个设计系统是基于一个业余项目“好指南”，目前还不是一个正式的产品，这给了我很大的灵活性来尝试新的Figma功能，比如变量。