好名字

要使名称有效，它必须符合某些基本特征：它必须是可识别的，并且可以识别它所指的内容。即使似乎将该组保留为“Copy 23”，在创建后花几秒钟设置一个正确的名称，也将有助于提高设计过程的速度和秩序。那么，除了使用它的地方之外，名称应该如何命名？

它有一个逻辑结构

使用一些逻辑来构建名称很重要，它是可预测的并且将始终保持不变 - 不会经常根据情况而改变。也许这在组件中更为重要，这些组件通常具有长而复杂的结构。

它与视觉属性无关

我们之前提到的这个逻辑意味着使用上下文、函数或层次结构来命名某些东西。但不是随着时间的推移可能会改变的视觉属性，从而使名称变得无用。如果您根据元素颜色或其边框半径命名某些内容，一旦这些属性之一被修改，它将不再有用。但像往常一样，总会有例外，我们稍后会看到。

很短，但很有意义

在组件中，遵循结构的逻辑使我们以通常很长的名称结尾。一旦我们使用了一个实例（意味着组件的副本，而不是可编辑的），我们可以简化名称以尽可能减少它。这将使图层列表更容易在简单的视线中扫描。这里的重要一点是，只是为了使内容更短，我们不会牺牲名称的目的，即轻松识别它所指的内容。

很短，大家都知道

你知道“干杯”是每个人都知道你名字的酒吧吗？在团队中，所有团队成员都应该知道、同意和使用命名约定。不可能是从一个项目到另一个项目，从设计师到设计师（甚至在同一个产品内部）有不同的命名方式。

附带说明：如果您有一个分布式团队或有国际设计师，最好使用英文名称。这将使您的文件更容易理解，而无需考虑其他人所在的位置。

尺寸

一个界面充满了不同的大小，从文本到断点，或者元素之间的间距。最简单、最可升级的方式与我们在现实世界中使用的服装尺码系统有关。这是一个被广泛理解的非常普遍的概念。从小到大，它会是这样工作的：

xs = Extra small
sm = Small
md = Medium
lg = Large
xl = Extra large
2xl = Extra, extra large

或者，我们可以使用“xxl”而不是“2xl”，但我发现当大小开始增长时，如果我

原文地址

Figma 的两个最强大的功能是components和styles。它们让您可以重用 UI 对象和属性，以便您可以大规模系统地维护设计。当您需要更改某些内容时，例如您品牌的链接颜色或主页图标，您可以进行一次更改 — 在原始主要组件或样式中 — 并观察它在您所有设计中的更新。

您可以使用组件和样式：

1. 在 Figma免费层的一个单独文件中
2. 跨Figma Professional 层中的不同文件和项目
3. Figma 组织层中的跨团队

在创建、命名和管理您的组件和样式时，需要考虑的事情数不胜数，因此我们整理了一份最佳实践指南来帮助您。喝杯咖啡，参加 101 大师班。

快速说明：在 Figma 中制作组件之前，我们建议您弄清楚哪个 Figma 计划对您最有意义。如果您注册了 Figma 组织，请阅读这篇关于在 Figma 中设置团队的最佳实践文章，因为该结构将构成您的组件组织的基础。

什么是组件和样式？

如果您已经了解组件、样式和库的所有基础知识，请跳至下一部分。

组件：这些是设计中可重用的对象。它们可以像单个按钮一样简单，也可以像整个导航标题一样复杂（由徽标、头像、按钮和菜单项等其他组件的实例组成）。您会发现组件的工作方式与 Sketch 或其他设计工具中的“符号”类似，但有一些独特的区别。稍后会详细介绍。

以下是人们变成组件的常见事物列表：

• 用户界面组件
• 公司标志和品牌资产
• 图标
• 设备模型
• 平台操作系统组件（Android、iOS、Linux、OSX 等）
• 光标
• 红线和注释组件
• 用于运行协作设计冲刺的便利贴和投票“贴纸”
• 绘制“助手”，如流程箭头和流程图形状

组件实例：一旦您将某物变成组件，您就可以创建它的实例，这些实例本质上是该组件的连接副本——因此，如果您更新原始组件的设计，实例将反映该更改。例如，如果您将按钮组件的颜色更改为红色，然后发布这些更改，则任何使用该按钮实例的文件都会收到通知。然后他们可以选择是否将他们的实例更新为红色。

样式：这些是可重用的属性集合，您可以轻松地将其应用于设计中的元素。在 Figma 中，您可以为文本、颜色、网格以及阴影和模糊等效果创建样式。如果组件是可重用的对象，请将样式视为可能应用于这些对象的属性。

库：在 Figma 中，您可以通过发布来共享组件和样式。这会将您的文件变成一个库，因此您可以在其他文件中使用

关于交互式组件

交互式组件允许您在组件集中的变体之间创建原型交互。任何时候您向设计添加实例时，这些交互都已设置并准备就绪。这可以节省您创建原型的时间并防止不必要的面条汤。

• 创建可在变体之间自动切换的交互元素，例如从悬停状态变为按下状态的按钮。
• 在组件级别设置默认交互，并在构建原型时消除猜测。
• 减少原型输入字段所需的框架和连接数量，例如一组复选框或切换。

前

在下面的示例中，我们为具有三个复选框的原型添加了所有可能的连接。我们已经将同一帧复制了八次，它们之间总共有 24 个连接，以创建所有可能的组合。

后

对于交互式组件，我们只需要在我们的设计中添加一个复选框实例，它的变体交互就可以开始了。当我们查看原型时，Figma 会自动在选中和未选中的变体之间切换。

创建交互式组件

您只能使用来自同一组件集的变体来创建交互式组件。如果您没有设置要使用的组件，则需要先创建一个。了解如何创建变体 →

创建变体交互

交互式组件引入了一个新的原型操作：更改为.

1. 从组件集中选择交互的起始变体。
2. 导航到右侧边栏的原型选项卡。
3. 点击 在框架的边界框右侧，将其拖动到目标变体。您也可以点击在原型面板的交互部分，将操作设置为更改为，然后使用下拉菜单选择目标变体。
4. 建立连接后，使用交互详细信息面板调整触发器和操作。

使用交互式组件

像任何其他组件一样，将交互式组件的实例添加到您的设计中。唯一的区别是实例已经将交互应用于原型设计。

要使用交互式组件：

1. 将交互式组件的实例添加到设计中的框架中。
2. 当您准备好对设计进行原型设计时，导航到右侧边栏的原型选项卡。
3. 构建您的原型。
4. 在 Presentation View 中预览设计和交互。

在我共同创立Figma之前，我的背景是游戏开发，而不是设计。我记得当我第一次遇到现代矢量编辑工具时感到非常惊讶。许多互动都感觉破碎了。为什么不能直接操作呢？为什么连接和断开连接有时才起作用？这是我们能做的最好的事情吗？

我们今天所知的钢笔工具最初是在 1987 年推出的，从那时起基本保持不变。当我们开始为 Figma 构建矢量编辑工具集时，我们决定尝试一些新的东西。Figma 不像其他工具那样使用路径，而是建立在我们称之为矢量网络的东西上，它与路径向后兼容，但提供了更多的灵活性和控制：

在我们第一次实现矢量网络之后，我们进行了一系列用户研究来完善这个概念。我们惊讶地发现很多人甚至没有注意到矢量网络和路径之间的区别。该工具只是按照人们期望的方式工作。然而，当他们回去尝试使用其他工具时，他们确实注意到了差异。看着特别痛苦，并向我们证实我们发现了一些特别的东西。

笔画

要了解矢量网络，首先了解路径很有用。路径是从一个端点到另一个端点的一系列直线和曲线。您可以将路径视为笔式绘图仪等设备可能遵循的指令序列。放下笔，拖动它，然后将其抬起。

矢量网络通过允许任意两点之间的直线和曲线而不是要求它们全部连接以形成单个链来改进路径模型。这有助于提供两全其美；它结合了可以在纸上连接点的轻松性以及一旦绘制后可以轻松操纵几何体的轻松性。使用矢量网络拆分和重新组合几何图形要自然得多。删除任何内容，任何地方。将任何东西连接到其他任何东西。描边帽和连接样式在矢量网络中自然地工作，即使对于具有三条或更多条线的点也是如此。路径不是这种情况，因为不可能使用路径来表示在一个点上将三条线连接在一起。

弯曲

我们想要改进现有矢量编辑工具的另一种方法是添加对直接操作的支持。今天的矢量图形基于三次贝塞尔样条曲线，它是带有两个额外点的曲线，称为控制手柄，这些点远离曲线本身并控制它的弯曲程度，有点像磁铁如何将电线向它弯曲。更改曲线的形状涉及在空间中拖动控制手柄，而不是直接拖动曲线。

我们最初尝试了一些强大的曲线类型，它们可以提供更好的控制和塑造能力，但最终保持与现有矢量数据向后兼容是最有意义的。这就是路径和矢量网络使用相同类型曲线的原因。除了拖动控制手柄外，Figma 的弯曲工具（OS X 上的命令键）可让您直接拖动曲线。编

原文地址

矢量网络是 Figma 中最独特的功能之一。大多数钢笔工具以定义的方向循环绘制路径，总是希望重新连接到它们的原始点。矢量网络没有方向，可以在不同方向分叉，而无需创建单独的路径对象。然后可以在同一个对象中创建具有相同属性的复杂对象，比使用传统矢量路径工具绘制它们的速度要快得多。

创造

您可以使用钢笔工具或任何形状工具来创建新的矢量图层。 

使用形状工具时，您可以按住修饰键以特定方式绘制它们：

• 如果⇧ (Shift)在创建形状时按住，则会将形状的纵横比锁定为 1:1。
• 如果⌥ (Option/Alt)在创建形状时按住，则会相对于其中心而不是其左上角创建该形状。
• 如果Space在创建形状时按住bar，它会移动整个形状而不是单个点。

编辑

如果您选择一条路径  并按 ENTER 键 ，您将进入矢量编辑模式，在该模式下您可以选择、调整或更改单个点、线或整个形状的属性。您还可以使用工具栏中的“ 编辑对象” 按钮进入“矢量编辑”。要退出，只需  再次按ENTER或按  工具栏中的DONE。

编辑对象时，您可以与现有点及其之间的线进行交互。您还可以使用钢笔工具绘制其他点并对其进行操作。 

点之间的路径可以是直线，或者您可以使用弯曲工具将它们弯曲以激活贝塞尔曲线。

贝塞尔曲线

要访问点的贝塞尔控制柄，请进入编辑模式。如果是曲线，则手柄将已显示。如果它是没有手柄的拐角，请按住 ⌘ 并单击该点以显示手柄并创建镜像曲线。

圆角

路径上的任何中间点都可以通过检查器中的角半径属性进行舍入。如果您选择整个路径，它会将所有角都圆化到相同的程度。如果您进入编辑模式，您可以选择单个点并分别舍入它们。

开放路径上的终端点只能通过端盖圆角。

帽子

将样式添加到任何开放路径的终点。Figma 根据您选择的矢量路径类型以不同方式显示 cap 属性。

具有两个端点的矢量路径

如果选择了只有两个端点的矢量路径，Figma 将在右侧边栏中显示上限属性。您可以独立设置每个端盖。

具有两个以上端点的矢量路径

如果选择了具有两个以上端点的矢量路径，Figma 将在高级笔触菜单 ↓ 中显示帽属性。

选择整个矢量路径时，您无法独立编辑端盖。要独立编辑端盖，请在矢量编辑模式下选择单个矢量点→。

帽型

从中选择：

•  None：在路径的末尾不添加上限。路径的末端是方形的，不增加路径的任何长度。
•  线箭头：在端点的任一侧添加两条 45 度线。这使用与路径本身相同的笔画权重。您

原文链接

图标是任何设计系统或产品体验的重要组成部分。图标帮助我们快速导航。它们与语言无关。最重要的是：它们真的很小，所以它们不会占用太多的空间。图标是良好设计系统的基本组成部分，对营销材料非常有帮助。它们是插图内容的基本构建块，但它们也具有很高的技术性。

喜欢设计图标的人并不多，擅长设计的人就更少了。我编写本指南是为了帮助您成为这些人中的一员。

无论您是设计系统专家、插画家还是产品设计师，本指南都将帮助您学习如何构建图标、如何将它们与您的品牌保持一致，以及如何将它们实施到您的设计系统中。让我们从基础开始。

图标的基本元素

尺寸

一致性是图标的关键，当你构建它们时，所有的图标都应该是相同的大小。首先，您需要确保您知道您的网格是如何构建的（8 或 10 的倍数？）。从那里，您的基本图标大小应该直接与此相关。所以，如果你有一个基于 8s 的网格，你会想要在 16、24 或 32 处构建。

选择一个通用尺寸来构建您的所有图标，然后允许您的工程师缩放到其他设计师可能需要的其他尺寸。您不想以多种尺寸一遍又一遍地构建相同的图标。

当您需要字形复杂度时，这就是您想要开始添加大小的时候。你的基本产品图标可能是 24 像素，但营销图标是 80 像素，因为在使用上存在巨大差异。您需要为那些较大的尺寸添加细节。

在构建不同尺寸的相同图标时，我喜欢从最大的尺寸开始，然后向下。我发现删除细节和简化要容易得多，而不是边走边添加。在您真正将其最小化之前，它还可以让您了解对象。

颜色

对于产品图标，使用 1 种颜色：黑色。除此之外，您的组件将变得过于复杂，其他设计师难以利用。对于营销图标，如果它是您品牌的重要组成部分，您可能希望使用 2 种颜色，但我个人认为图标应该是单一颜色。任何具有 3 种或更多颜色的东西都是插图，而不是图标。

网格

该像素网格是使用最小增量的根本格：一个像素。在构建图标时，您总是希望将对象与像素网格对齐，尤其是直线。但是，您可以在像素网格上构建其他形状（如果您使用 Figma，您已经自动完成了）。你想在像素网格上构建东西，不仅仅是因为它会渲染得更好，还因为它让你的生活更轻松。当您使用网格时，均匀地间隔事物要容易得多。它可以帮助您与您的位置保持一致，并且总体上会使您的图标看起来更好。您可以在 F