你已经走了很长一段路！在完成第一批线框图之后，你现在已经准备好把关注点从“结构”转向“风格”了。在这一章中，你将开始塑造应用的整体观感，学习如何使用网格、色板、字体排印以及视觉效果。这些元素对于构建一个清晰、直观、且在视觉上保持一致的界面来说，都是至关重要的。
请记住：真正掌握像 Figma 这样的设计工具，并不只是知道每个功能藏在哪里。更重要的是，理解你应该在什么时候、为什么，以及如何去使用这些功能，让设计变得更好，而不是只是变得更复杂。目标从来不是把所有功能都用一遍，而是有判断地、稳定地使用那些真正合适的功能。
本章介绍的这些工具——例如网格、文本样式、颜色和效果——将构成你整个应用的视觉基础。你不仅会学到如何使用它们，还会学到如何通过 styles（样式） 来定义和复用它们，从而确保所有页面和布局之间的视觉一致性。
等到本章结束时，你的项目将具备一套扎实的设计系统。这套系统会帮助你节省时间、支持设计扩展，并在应用不断增长的过程中维持清晰与秩序。现在，就让我们开始吧！
本章将涵盖以下几个主要主题：
- 开始使用网格
- 使用排版、颜色与效果
- 引入样式
开始使用网格
随着你的项目从线框图逐步进入真正的 UI 设计阶段，精确性就变得关键起来了。在早期构思想法、梳理流程的阶段，设计允许更大的灵活性；但一旦进入视觉界面阶段，你就必须以清晰、结构化和一致性为核心去构建它。也正是在这里，设计决策开始从“凭直觉”转向“有意识地选择”。
从这一章开始，你的 frame、颜色、字体和间距都不能再是随意决定的。布局中的每一个元素，都必须遵循明确的设计逻辑。因为随着项目规模扩大，保持一致性会帮你节省时间、减少错误，也会让你的设计更容易维护。而要达到这种控制水平，最有效的工具之一，就是 layout grid（布局网格） 。
对用户来说，网格往往是不可见的；但它能为你设计的所有内容带来秩序和节奏。无论你是在首页中对齐一组卡片，还是在详情页中组织内容，网格都会帮助你在所有屏幕中保持平衡感和视觉层级。所以，接下来我们就深入看看，如何正确地使用它。
网格无处不在
网格在设计中的历史可以追溯到几百年前。远在数字屏幕出现之前，网格就已经被用来为手写稿本带来结构和均衡——那个时代，一本书的制作往往要花费数月，每一页都需要被仔细规划。其目标很简单：确保文字和插图在每一页上都呈现出一致且和谐的效果。随着时间推移，网格逐渐成为编辑设计中的标准工具，被广泛应用于印刷书籍、报纸和杂志的版面编排之中。
图 5.1 – 一本书版式网格示例
哪怕你没有立刻注意到，网格其实无处不在。从海报到产品包装，再到摄影中的视觉叙事，网格都在无声地定义内容如何排列，确保节奏、对齐和清晰度。它的力量恰恰在于：对用户来说，它是隐形的；但对设计师来说，它却至关重要。
在数字设计中，同样的原则仍然成立。无论我们是在为移动端、平板还是桌面端设计，屏幕都同样需要结构，就像印刷页面一样。一个定义明确的网格能够帮助你精确对齐元素、保持统一间距，并为整个布局带来视觉一致性。尽管屏幕尺寸各不相同，但支撑它们的底层系统始终没变：秩序、平衡与层级。
由于我们的旅行规划应用主要运行在移动设备上，所以我们会先为小屏幕建立一套布局网格。后面你会看到，如何把它扩展到更大的断点，比如平板和桌面端。但现在，先来看看网格在 Figma 里究竟是怎么工作的。
辅助线与布局网格
既然你已经理解了网格为何是优秀设计中如此基础的一部分，那么现在就来看看，在 Figma 中该如何真正创建并管理它们。网格系统会提供一个结构化框架，帮助你在所有布局中，以一致的方式对齐、留白和扩展元素。无论你是在设计移动端、平板端还是桌面端，它都能让你更容易建立视觉上的和谐感。
不过，在正式进入 layout grid 之前，先熟悉一下 guides（辅助线） 会很有帮助。它同样是 Figma 中非常实用的对齐工具。与提供完整行列结构的网格不同，辅助线更轻量，也更灵活，非常适合在某个 frame 内进行快速对齐，或者在不引入整套网格系统的前提下，检查元素之间的间距。
辅助线会以细细的水平线和垂直线形式出现，你可以在画布上自由放置它们。你可以按下面的步骤试试看：
- 先启用标尺。进入顶部菜单，选择 View | Rulers，或者直接按 ⇧ + R。这样，你就会在画布的上方和左侧看到标尺。
- 在画布上创建一个任意尺寸的临时 frame。
- 若要添加一条水平辅助线，就从顶部标尺点击并向下拖；若要添加垂直辅助线，就从左侧标尺点击并向右拖。
图 5.2 – 文本吸附到辅助线
你会注意到：当辅助线放置在某个 frame 上方时，它会自动被裁切到该 frame 的边缘范围内。要删除一条辅助线，只需把它拖回标尺区域，或者选中它后按 Delete。
你可以根据需要添加任意多条辅助线，并自由移动它们。不过，由于辅助线并不连接到响应式系统，所以它更适合用于快速检查，而不是完整的布局设计。而这正是 layout grids 发挥作用的地方。
与辅助线不同，布局网格提供的是一个更结构化、也更具扩展性的系统，特别适合在多个设备和屏幕尺寸之间进行设计。Figma 中的网格只能被应用在 frames 上（因此组件也同样适用）。要添加网格，请选中画布上的任意一个 frame，然后点击右侧边栏中 Layout guide 旁边的 + 按钮。此时会出现一个默认的方格网格。
图 5.3 – 默认布局网格
在调整任何设置之前，请先想清楚：你真正需要的是哪一种布局网格。网格配置绝不应该是随意的，它必须能够支持你的布局需求，并且与开发团队正在使用的技术体系保持一致。比如，现代前端框架中，像 Bootstrap 或 Tailwind，大多都采用 12 列网格。这种系统便于进行水平方向的划分，也能在不同断点之间灵活地放大缩小布局。
要调整 layout grid，点击右侧边栏中网格名称旁边的网格图标。你会看到三种网格类型选项：
- Grid：均匀的方格系统（适用于图标设计或像素级精度需求）
- Rows：水平分割，常常与 Columns 搭配使用
- Columns：垂直分割，用于定义内容结构
图 5.4 – 添加 Columns 布局网格
当你使用 Columns 或 Rows 时，还可以配置一些附加属性：
- Count：列数或行数
- Gutter：它们之间的间距
- Margin：网格在 frame 内部四周保留的边距
- Type：对齐方式（对于列来说是 Left、Right 或 Center；对于行来说是 Top、Bottom 或 Center），或者使用 Stretch，让你的列或行具有响应式伸缩能力
网格并不只适用于最外层容器；你也可以把它应用到嵌套 frame 中。这一点在设计卡片、按钮或图标等 UI 元素时尤其有用，因为这些组件往往也需要自己的内部对齐逻辑。你甚至还可以在同一个 frame 上叠加多个网格（例如同时使用列网格和行网格），从而获得更大的灵活性，去搭建细致而模块化的布局。
默认情况下，布局网格一旦启用，就会始终可见。这在设计时有帮助，但当你的布局逐渐复杂之后，也可能让界面显得拥挤。你可以通过 Layout guide 面板中的眼睛图标来切换网格可见性，或者直接按 ⇧ + G。
一如既往，真正熟悉辅助线和网格的最好方式，就是亲自去试。尝试不同配置，组合行和列，或者基于你自己的项目需求构建一套网格系统。你甚至可以专门在 Drafts 文件夹里建一个单独的文件，只用来练习。等你准备好了，我们就进入下一步：使用排版、颜色与效果，为你的应用定义视觉风格。
使用排版、颜色与效果
这一节聚焦于界面的视觉构件：字体、颜色和效果。这些元素赋予你的产品个性，设定整体语气，并引导用户的视觉注意力。它们看起来似乎比你之前用到的那些技术性工具更有“表现力”，而事实也确实如此——但这并不意味着它们只是装饰性的东西。
实际上，你做出的每一个视觉风格决策，都应当植根于清晰的逻辑和明确的意图之中。就像布局和结构一样，视觉选择也必须反映用户需求与产品目标。这也是为什么，在选择字体、定义颜色系统或使用阴影与模糊时，你需要回头参照前面研究阶段产出的那些成果，例如用户画像、情绪板，或品牌规范。
接下来的内容中，我们会逐一讲解这些方面，看看它们是如何工作的，以及如何在整个项目中保持一致。
Typography 很重要
字体排印（typography） 是界面设计中最关键的组成部分之一，同时也是最容易被初学者低估的部分之一。可事实上，糟糕的排版选择几乎可以瞬间让一个界面显得粗糙、难用。因为选对字体，从来都不只是“审美风格”的问题，它还直接关系到可用性、层级感、品牌一致性和可读性。真正掌握 typography，需要时间、练习，以及不断在不同情境中进行观察和积累。
如果你想更深入地了解字体世界，一个非常不错的入门读物是 Simon Garfield 的 Just My Type: A Book About Fonts。这本书既易读又富有洞察，它会让你看到：每一种字体都有自己的个性，而设计师要做的，是为自己的设计目标找到真正合适的那一种。
在选择字体时，需要考虑多个因素。举个例子，如果你设计的是一个只运行在 iOS 上的应用，那么为了与 Apple 的 Human Interface Guidelines 保持一致，使用它们的原生字体会是一个不错的选择——也就是 San Francisco（无衬线） 和 New York（衬线） 。类似地，Android 应用通常会依赖 Roboto，因为它是该平台的默认字体。
图 5.5 – 衬线体与无衬线体的区别
上下文本身同样扮演着关键角色。一般来说，无衬线字体（sans-serif） 在屏幕上通常具备更高的可读性，也更适合按钮、标签、菜单等 UI 元素。而衬线字体（serif） 有时更适合较大段落的正文阅读，因为它能够帮助读者的视线更自然地沿着长段文字流动。
另外，如果你是在为客户做设计，那么对方很可能已经在品牌手册中规定好了品牌字体，这时候你自然也需要遵循。
有时候，你可能需要在同一个产品中使用不止一种字体。如果是这样，一定要先和开发人员沟通：自定义字体会增加应用体积，也可能影响性能。 同时，你还必须确认所选的几种字体在视觉上是否能良好搭配。
如果你在寻找字体配对灵感，可以看看 Figma 提供的这个精选资源：figma.com/google-fonts。
Figma 在编辑器中直接提供了一个庞大的 Google Fonts 字体库。只要确保在 Preferences 中启用了 Show Google Fonts 即可。Google Fonts 在产品设计中尤其好用，因为它们质量高、字重和样式覆盖广，而且针对 Web 做过优化——这意味着它们加载快，也容易被开发直接实现。此外，Google Fonts 提供的字体全部都是免版权费的，并且采用开源协议发布，因此无论是个人项目还是商业项目，都可以放心使用。
如果你需要使用 Figma 中没有自带的字体，也可以通过 Figma 桌面版应用来访问本地字体。浏览器版本同样支持本地字体，但前提是你需要先从 figma.com/downloads 安装 Figma font installer。
深入理解 Text 工具
既然你已经熟悉了 Figma 中可用的字体，那么接下来，就该更深入地看看 Text 工具本身了。虽然你之前已经接触过它，但它远比表面上看起来更有深度。一个文本图层在被放到画布上之后，其行为方式其实有三种，这取决于你是如何创建它的，以及你如何设置它的缩放方式。
如果你选择 Text 工具（T） ，然后只是在画布上单击一次，那么你创建出来的会是一个 auto-width（自动宽度） 文本图层。这意味着：随着你输入内容，这个文本图层会在水平方向上自动拉长或缩短，并且始终保持在同一行中，除非你手动插入换行。这种方式最适合处理按钮文案或短标签这类短字符串。
如果你改为使用 Text 工具点击并拖拽，那么你定义的就是一个具有固定宽高的文本容器。此时，你得到的是一个 fixed-size（固定尺寸） 文本图层：Figma 会在设定宽度内自动换行，但不会自动增加高度。如果文本内容在垂直方向上超出了这个容器，它可能会溢出或被裁切，所以当你处理大段文字时，这一点尤其要留意。
此外，你还可以选择第三种行为：auto-height（自动高度） 。在这种模式下，文本会在一个固定宽度的容器中换行，但高度会随着你输入内容而自动增长。这对于段落类文本或长度会变化的内容特别有用，比如用户输入、动态文本等。
你可以随时在右侧面板的 Layout 区域（图 5.6，A）中切换任意文本图层的尺寸模式。三种尺寸选项（auto width、auto height 和 fixed size）让你能够精确控制文本如何适应布局。这种灵活性意味着：无论是一个单词的按钮，还是一个可响应的文章页面，你都能轻松设计出来。
一旦选中了某个文本图层，Design 面板中就会出现一个专门的排版控制区域，里面包含丰富的文字设置选项。
图 5.6 – 文本选项
下面是其中最主要的控制项说明（图 5.6，B）：
- Font family（字体家族） ：从大量字体中进行选择，包括 Google Fonts。你也可以直接输入字体名称进行搜索。
如果你使用的是本地字体，要确保同一个文件中的其他协作者电脑里也安装了这些字体；否则，Figma 会在缺失字体名称旁边显示一个带 A? 的黄色警告。 - Weight and style（字重与样式） ：用于选择不同字重（例如 Regular、Bold、Light），并可应用 Italic 等样式。具体可选项数量取决于该字体家族本身支持哪些字重和样式。
一种拥有多种字重和字号的字体，能帮助你建立清晰的排版层级，让用户一眼分辨出标题、正文、说明文字以及交互元素之间的区别。 - Font size（字号） ：决定文本大小。你可以通过它来强化标题、标签和正文之间的层级关系。
- Line height（行高） ：控制文本行与行之间的垂直间距。你既可以输入像素值，也可以输入百分比（比如 120%）。通常更推荐使用百分比，因为它会随着字号自动缩放。
- Letter spacing（字间距） ：控制字符之间的水平间距。它特别适合用于全大写按钮、小字号文本，或用于微调展示型排版。
- Text alignment – horizontal（水平对齐） ：控制文本在其容器内左对齐、居中或右对齐。
- Text alignment – vertical（垂直对齐） ：控制文本在容器内位于顶部、中部或底部。
这些看似细微的调整，往往会带来非常强烈的影响。间距、对齐和排版节奏，不仅会影响设计“看起来如何”，也会影响它“表达得如何”。因此，尤其在你还处于起步阶段时，必须谨慎对待这些设置。
许多广泛使用的字体，其实都是由经验丰富的字体设计师精雕细琢出来的。它们的间距与比例已经被打磨得非常成熟。过度调整这些默认值，很容易打破字体内部原本的平衡，让界面显得别扭或不够精致。
随着经验增加，你会慢慢培养出更敏锐的眼光，也会更清楚地判断：某个调整究竟是真的让设计更好了，还是其实应该保持字体原样不动。
如果你需要更多格式控制，可以进入 Advanced text options（高级文本选项） 面板。它可以通过 Design 面板 Typography 区域中的 Settings 按钮打开。在这里，你可以添加下划线、删除线、项目符号列表、编号列表，甚至可以一键把整段文字转换成全大写、小写或标题格式。内建的实时预览会帮助你在真正应用设置之前，快速理解每一个选项会带来什么效果。
图 5.7 – 高级文本选项
到这里为止，你基本已经了解了 Figma 中文本图层的绝大多数基础设置。但在字体排印领域，还有一个值得关注的新发展：可变字体（variable fonts） 。
可变字体
可变字体（variable fonts） 是一种相对较新的字体格式，如今已逐渐在包括 Figma 在内的设计工具中得到支持。与传统字体家族不同，传统字体通常需要为每种字重和样式提供单独的文件（例如 Regular、Bold、Italic），而可变字体则会把多个字重和样式打包进一个文件中。
它的主要优势包括：
- 更高的灵活性：你不再只能在 Regular 或 Bold 这种固定选项中二选一，而是可以通过滑杆连续调整字重、字宽或倾斜度。这让你更容易根据设计意图做细腻微调。
- 更好的视觉一致性：可变字体可以更自然地适应不同断点和屏幕尺寸，从而帮助你在移动端和桌面端都维持统一的排版节奏。
- 更多创意可能性：由于字体属性是连续变化的，所以可变字体非常适合用于动画、过渡效果，或更具表现力的微交互。
- 更好的可访问性支持：可以调节字重和其他轴向属性，这意味着你可以针对不同用户或使用场景去提升可读性。
在 Figma 中，你可以很容易地找到可变字体：打开 Font Family 下拉列表，然后启用顶部的 Variable fonts 筛选项。这样，列表中只会显示那些包含可变轴的字体。
一旦你选中某种可变字体，Figma 就会自动在高级 Typography 面板（图 5.7）中解锁一个专门的 Variable 标签页。在这里，你可以通过专门的滑杆调整所有可用轴，例如 weight、width 或 slant。
是不是挺令人兴奋的？可变字体确实打开了全新的灵活空间。不过你也要记住：并不是所有可变字体都支持同样的一组轴。所以在真正决定采用某一款之前，先查看它到底提供了哪些轴和可调范围，是很值得的。
当然，可变字体也并不总是最佳选择。虽然它们的设计初衷之一，是把多种样式整合到同一个文件中，从而减少文件体积，但这种优势能否真正体现出来，取决于你项目中到底会用到多少种样式。如果你的项目实际上只用到一两个固定字重，那么传统的静态字体文件反而可能更轻。
此外，有些可变字体在实际分发时，依然会拆成多个文件，尤其是在 upright（正体）和 italic（斜体）分离的情况下。所以“单文件更省”的优势，并不总能在现实中成立。
到目前为止，我们已经把文本图层自身最核心的特性都讲完了。但别忘了：你之前在形状图层上用到的很多选项——例如尺寸调整、填充和描边——同样也适用于文本。你可以在 Design 面板顶部修改文本框的位置和大小，通过 Fill 区域给文字上色，必要时甚至还可以给文字加描边。
正如你所看到的，在 Figma 中处理文本本身并不难，真正的挑战，往往是在为你的项目选择“正确的字体”时才开始出现。不过也别担心，稍后本章中，我们会一起完成一次真正的字体选择，为应用找到适合其语气与功能的字体。在那之前，我们先来看另一个同样关键的视觉语言组成部分：颜色。
选择色板
和字体一样，颜色也是任何界面设计中的核心支柱之一，并且它会直接对用户产生情感和功能层面的影响。即使你的应用提供了近乎完美的使用体验，只要颜色选得不对，它依然可能削弱信息表达、制造使用摩擦，甚至让用户离开。因为颜色从来都不是“中立”的：每一种色相都带有自己的心理重量和文化联想。选择合适的色板，可以帮助你传达产品语气、建立信息优先级，并支持可访问性。
在真正进入 UI 设计之前，你至少应该对自己想走的颜色方向有一个大致概念；更理想的情况是，你已经拥有某些数据、参考资料，或者品牌规范来支持这些选择。如果此刻还不是很清晰，也没关系——我们会在本章后面为项目正式定义出一套色板。现在先来理解：在 Figma 中，颜色究竟是如何被处理的。
在 Figma 中，用来应用和编辑颜色的核心工具，就是 color picker（取色器 / 颜色选择器） 。你其实在第 4 章《使用矢量形状，以移动优先方式进行线框设计》中，处理矢量形状时已经短暂用过它。无论你是在编辑填充、描边，还是背景，在 Design 面板中你都会看到一个颜色预览框。点击它，就会打开一个专门的颜色面板，让你可以做精细调整、从预设样式中选择，或者保存新的颜色值。
图 5.8 – 颜色选择器
如果你想进一步熟悉颜色选择器中的每个选项，可以先在画布上选中任意一个带颜色的元素，或者新建一个形状并为它添加填充或描边。然后，只要点击 Design 面板中代表该元素颜色的小方块，就可以打开扩展的颜色窗口。
A – 颜色模式
在颜色面板的顶部，你会看到一个下拉菜单，用来选择给当前图层应用哪一种填充方式。Figma 目前支持五种填充类型，分别是 Solid、Gradient、Image、Video 和 Pattern：
-
Solid（纯色） ：默认选项。它允许你通过颜色选择器为图层应用单一、平面的颜色。
-
Gradient（渐变） ：在两种或多种颜色之间进行平滑过渡。你可以选择四种类型：
- Linear（线性）
- Radial（径向，从中心向外扩散）
- Angular（角度渐变，类似环绕扫描）
- Diamond（钻石形放射渐变）
图 5.9 – 线性渐变
- Image（图片） ：把图片作为填充使用。这很适合 mockup、背景或纹理。你可以直接在填充选项中控制其适配方式、位置和缩放。
图 5.10 – 图片填充
-
Video（视频） ：你可以把循环播放的视频文件插入到形状中。视频默认自动播放，并且和图片一样，也可以设置位置、缩放和适配方式。
需要注意的是，应用 Image 或 Video fill 并不会把媒体单独放到画布上，而是把它作为当前选中形状的填充内容。这和直接把图片拖到画布中生成一个独立图像图层，是两回事。Fill 里还会提供一些附加设置，例如 Crop、Fit、Tile，以及基础调整项，如 Exposure 和 Contrast。 -
Pattern（图案） ：这是一个非常强大的选项，它允许你把画布上的另一个对象——比如某个形状、分组或 frame——作为动态图案填充的来源。
选中它之后，你可以这样操作：- 点击 Select source，然后从画布中选择一个元素作为图案源
- 调整 tile type、scale、spacing、alignment 和 opacity，以控制图案的呈现方式
Pattern 填充是动态的：如果你修改了原始来源对象，所有使用该图案的实例也都会自动更新。这使它特别适合做可复用的装饰性填充、纹理效果或品牌背景。你还可以把 Pattern 与布尔运算或变形操作结合起来，制作更复杂的自定义平铺图形。
B – 混合模式与可访问性检查器
Figma 允许你通过 blend modes（混合模式） ，精细控制某一图层与其下方图层之间的视觉交互方式。你可以在 Fill 区域颜色预览框下方的下拉菜单中找到这些模式。不同模式——例如 Multiply、Screen、Overlay——会让 Figma 以不同方式计算当前图层每一个像素与底层对应像素如何混合。它在创建视觉效果、叠加高光或阴影，以及在不真正修改内容本身的前提下优化界面质感时，非常有用。
除了混合模式之外，Figma 在颜色面板中还内建了一个 可访问性检查器。只要你给文本或形状应用了颜色，它就会自动计算该颜色与背景之间的对比度比值，并显示它是否满足可访问性标准，例如 WCAG AA 或 AAA。
这些评级代表不同级别的可访问性合规程度：
- AA 是最基础、也是最常见的标准，确保大多数用户都能获得足够对比度。
- AAA 则代表更高等级的可访问性要求，提供更强的对比和更好的可读性，对于视觉障碍用户来说尤其重要。
这些指示会显示在颜色输入值上方，并且会随着你调整颜色或背景而实时更新，从而帮助你从设计初期就确保界面保持可读、包容。
C – 颜色面板
在这个区域中，你可以通过在主颜色区域（图 5.8，C）中移动取色点，直观地选择任意颜色。下方的 色相滑杆（图 5.8，D）则允许你调整整体色调，在整个色谱范围内切换。
如果你想控制透明度，可以使用 opacity 滑杆（图 5.8，E），也可以直接在输入框中输入一个精确百分比（图 5.8，F）。当前正在使用的颜色，会始终以一个带白色描边的圆点显示出来，这让你可以一眼识别当前选中的颜色。
G – 吸管工具
Eyedropper（吸管） 是几乎所有设计软件中都会有的标准工具，而在 Figma 中，它的工作方式也完全符合预期：它允许你从屏幕上任意一个可见元素中吸取颜色，无论那是矢量对象、形状，还是一张位图。这在你想快速复用某种已经出现在布局中的颜色时，非常方便。
你可以随时按键盘上的 I 来激活吸管工具。如果你当前已经选中了一个对象——比如某个带填充或描边的形状或文本图层——那么你采样到的颜色会立即替换它原本的颜色。如果当前什么都没选中，你依然可以把鼠标悬停在画布的任意区域上，预览那里的颜色代码，而不会真正应用它。
H – 颜色模型
默认情况下，Figma 采用 HEX（十六进制） 格式来显示颜色值。这是一种在数字设计中非常常见、也尤其为 Web 开发者熟悉的字母数字颜色编码格式。但如果你更习惯别的颜色模型，也可以通过颜色输入框旁边的下拉菜单进行切换。
你可以选择 RGB，即通过红、绿、蓝三个通道（每个范围 0–255）来表示颜色。除此之外，Figma 还支持 HSL（色相、饱和度、明度） 和 HSB（色相、饱和度、亮度） 两种模型。它们不是通过原始通道数值来定义颜色，而是通过更接近人类感知的属性来描述颜色。这在你想要调整色调或对比度，同时又希望颜色在视觉上保持一致时，会特别有帮助。
不同格式各有优点，具体使用哪一种，取决于你当前是在做设计、开发，还是在为可访问性和一致性微调一套色板。
I – 颜色样式
在颜色选择器中的 On this page 区域里，Figma 会显示当前文件中已经使用过的所有颜色。这样一来，你就能快速查看当前正在使用的色板，并通过单击一键重新应用其中任意一种颜色。如果你正同时处理多个元素，这个视图会特别有助于维持一致性。
为了让颜色在整个文件中——甚至跨多个项目——都更一致、更容易管理，Figma 还允许你把颜色保存成 color styles（颜色样式） 。这些样式可以应用到任何对象上，并在需要时进行全局更新。如果你正在基于设计系统协作，还可以通过下拉菜单，从共享库中访问颜色样式。关于库和设计系统，我们会在本书后面更深入地展开。
你可能在前面几章里已经注意到，Figma 的 Design 面板本身就是上下文敏感的，它会根据当前选中内容而变化。当你选中了多个对象，而且它们共享相同的填充或描边颜色时，这个颜色会像平常一样显示在面板中。但如果这些对象拥有不同颜色，那么面板里就会出现一个叫作 Selection colors（所选颜色） 的特殊区域。在这里，你会看到当前所选元素中存在的所有填充与描边值列表。你可以直接在这里修改或替换其中任意一个，从而高效、无误地完成批量更新。
图 5.11 – Selection colors
颜色是界面设计中的基础组成部分。虽然这个话题本身可以非常复杂，但 Figma 为你提供了一套相当直观、也很容易上手的工具。只要记住一件事：在把任何颜色添加进界面之前，先确保你的选择是有意图的、并且符合上下文。
我们会在本章后面为应用正式定义出实际色板。现在，你可以先在草稿文件里多尝试一下这些工具，试着探索不同选项。别忘了，最好的学习方式，永远是亲手去试。
创建效果
在 Design 面板中，你可能已经注意到了一个叫作 Effects（效果） 的区域。这个工具允许你为元素添加各种视觉处理，比如 Drop shadow、Inner shadow、Layer blur、Background blur、Noise、Texture 和 Glass。
每一种效果都有它自己的用途。例如，Drop shadow（投影） 能为图层之间增加微妙的深度感或分离感；而 Background blur（背景模糊） 则常被用来创造磨砂玻璃式界面。较新的选项如 Noise、Texture、Glass，则可以让你为界面添加颗粒感、材质触感，或更真实的半透明效果，这对于现代视觉风格和更具表现力的界面尤其有帮助。
要修改某个效果，只需点击 Effects 区域中的太阳形图标。这样就会打开效果设置面板，在那里你可以微调诸如位置、扩散（阴影类效果）或模糊强度等参数。
图 5.12 – Drop shadow 效果
正如你可以想象的那样，Figma 中的每一个效果其实都带有相当丰富的可调参数。要在这一章里逐个详细讲完，显然会超出合理篇幅。所以，更好的做法是：自己开一个草稿文件，然后亲手去试。不断调整参数，观察它们的表现，并尝试把多个效果叠加组合，看看什么最适合你的设计。
不过，有一点非常重要：效果必须始终服务于某种目的。 它们最核心的职责，是增强清晰度、焦点和层级，而不是单纯让界面“看起来更像设计过的样子”。尤其是在你前几个项目里，最好的做法通常是遵循成熟设计规范，并且节制地使用效果。等你经验更丰富之后，你自然会慢慢建立起判断力，知道什么时候应该“打破规则”，以及该怎么打破。
到这里为止，你已经探索了 Figma 中三个最关键的视觉工具：排版、颜色和效果。如果你还没有真正把它们用到自己的界面中，也没关系。下一节里，我们会学习如何以一致且高效的方式，把它们真正应用到布局之中。
引入样式
到目前为止，你已经学会了如何处理网格、字体排印、颜色和效果——也就是构成任何界面的那些视觉基础构件。但“知道怎么用”这些工具还远远不够。真正的力量，在于你能否以一致且高效的方式把它们应用到整个项目中。而这，正是 styles（样式） 发挥作用的地方。
想象一下：如果你必须在几十个页面中的每一层文字上，手动应用同样的字体，这会是什么感觉。不仅耗时，而且风险极高：如果你后来决定更换字体，那你就必须一个一个地把所有地方全部改回来。
Figma 正是通过 styles 来解决这个问题的。它是一项非常强大的功能，允许你保存并复用诸如文本格式、颜色和效果等属性。一旦你定义好了样式，之后就可以通过一次点击，将它应用到任何元素上。最棒的是：如果你之后更新了某个样式，Figma 会自动把这个变化同步到所有使用了该样式的实例上。 如果你在使用共享库，这种更新甚至可以跨文件生效。
在这一节中，我们会学习如何创建、应用并管理这些样式，从而为你的设计工作带来清晰度、可扩展性和结构。
准备你的文件
现在，是时候把我们刚刚探索过的这些视觉工具真正用起来了。这一步标志着一个重要转折：你将从 Low-Fidelity（低保真，Lo-Fi）线框图，迈向 High-Fidelity（高保真，Hi-Fi）界面设计。为了更高效地工作，并保持结构清晰，你需要先把文件准备好。
在 Layers 面板的右上角，你会看到一个下拉区域，它会显示你当前 Figma 文件中的所有页面。此刻，你应该只会看到一个页面，默认名为 Page 1，里面装着你之前做好的线框图。
先通过双击它的名称，把这个页面改名为 Lo-Fi。
接下来，右键点击这个页面，并在上下文菜单中选择 Duplicate page。这样，下面就会出现一个与它完全相同的新页面。把这个新页面命名为 Hi-Fi，因为这就是你接下来要用来构建最终界面设计的地方。
图 5.13 – Lo-Fi 与 Hi-Fi 页面
现在，你的文件里应该已经有了两个清晰命名的页面：一个用于线框图，一个用于视觉设计。保持这样的结构，可以帮助你在“探索”与“打磨”之间轻松切换，同时也不会失去对进度的掌控。
如果你使用的是 Starter 方案，请注意：每个文件最多只能有 3 个页面。所以要合理使用它们。
创建与管理网格样式
当你复制页面并开始 Hi-Fi 版本设计时，你也同时把之前的线框图一起复制过来了。这正是我们想要的——暂时不去改动内部元素。现在，我们首先要做的是：为这些页面应用一套真正合适的布局网格，并进一步把它转换为一个可复用的样式。
让我们从 Login frame 开始：
-
选中 Hi-Fi 页面中的 Login frame。
-
在右侧面板中，点击 Layout guide 旁边的 + 按钮。
-
Figma 会默认添加一个统一方格网格。点击网格图标打开设置，然后把类型改成 Columns。
-
然后输入以下参数：
- Count：12
- Type：Stretch
- Margin：16
- Gutter：8
图 5.14 – 网格设置
这些数值并不是随便选的。12 列布局是响应式 Web 设计中最常用的结构之一，特别是在 Bootstrap 或 Material Design 等体系中尤其常见。而 Gutter 和 Margin 所使用的数值，则遵循了 8-point spacing system（8 点间距系统） ：也就是让所有数值都成为 8 的倍数。这样的方式能带来更稳定的视觉节奏，也能让间距决策更加统一和高效。
现在，Login frame 上已经有了布局网格。你当然也可以手动把同样的步骤重复到其他页面上，但那样会非常低效。更好的方式是：把这个网格保存成一个样式，这样之后你就只需要一键复用了。
具体做法如下：
- 选中你刚刚配置好 layout grid 的 Login 视图。
- 点击 Style 图标（图 5.15）。
- 在 Layout guide 面板中，点击 + ，创建一个新样式。
- 给这个网格样式起一个清晰的名字，比如 12-column-fluid，这样你一眼就能知道它是一套可伸缩的 12 列网格。
图 5.15 – 一个新的网格样式
现在，这套网格已经被保存为样式，可以在整个文件中复用了。接下来，把这个样式应用到设计中的其他 frame 上，比如 Sign Up、Home 和 Content Detail。
做法如下：
- 选中这些 frame（可以一次性全部选中）。
- 在 Layout guide 区域中，点击 Style 图标，而不是再点 + 。
- 从列表中选择 12-column-fluid 这个样式。
就这样，所有选中的 frame 都会立刻共享同一套网格，既一致又高效。从现在开始，如果你之后需要修改布局网格，只要编辑这个样式，Figma 就会自动同步更新所有使用了该样式的 frame。这样，你的设计系统就会更容易管理得多。
如果你想在某个特定 frame 中单独覆盖这套布局网格，也可以选中它，然后点击 Detach style（断开样式） 图标，也就是那个断开的链条图标。这样一来，它就会与共享样式解绑，你就可以自由地单独修改它。不过也要记住：一旦这么做，之后它的修改就不会再自动跟随共享样式更新了，除非你之后重新应用该样式。
到这里，你已经创建了自己的第一个样式，这对于建立可扩展、可维护的界面来说，是非常关键的一步。接下来，我们将为应用选择一套字体，并把它们进一步定义成 Text styles（文本样式） 。
创建与管理文本样式
既然你已经看到了网格样式带来的效率优势，那么现在，就该把同样的方法应用到 字体排印 上了。我们的应用在每一个页面中都会包含相当多的文本，所以定义文本样式，对保证整个 UI 的一致性至关重要。和之前一样，你首先会建立一套扎实的基础文本样式，后面如果需要，还可以继续扩展。而且你也不用担心：完全没有必要一开始就把所有可能用到的样式全部定义完。先从一套最小可用集开始，再随着设计发展逐步添加，这本来就是很正常的做法。
字体选择应该始终由上下文和分析结果来驱动。在这个项目里，我们会搭配使用两套平衡性很好的字体：
- Source Sans Pro：一种现代、通用的无衬线字体，非常适合界面使用，而且即便在较小字号下也依旧具备良好可读性。
- Work Sans：我们只会把它用在较大的标题上，用来为排版顶层引入更多视觉个性。
为了让一切保持整洁，建议你把所有文本样式都定义在应用实际布局之外。请在当前 Figma 文件中再创建一个新的第三页，这一次不要复制已有页面，而是创建一个空白页面，并把它命名为 Styles + Components。这会成为你所有可复用 UI 元素的“家”。
在这个页面中，再创建一个使用 Desktop 预设（1440 × 1024） 的 frame，并将它命名为 Typography。这个 frame 将用于容纳接下来定义的全部文本样式。你并不需要建立一大长串样式，只要定义出那些当前布局真正需要的就足够了。
在 Styles + Components 页面中的 Typography frame 里，创建 6 个新的文本图层。你可以使用一句 pangram（全字母句）来预览所有字符，例如：
The quick brown fox jumps over the lazy dog
把这 6 个文本图层纵向排列，然后分别应用以下样式：
- Work Sans | 32px | Bold
- Source Sans Pro | 24px | Bold
- Source Sans Pro | 20px | Bold
- Source Sans Pro | 16px | Bold
- Source Sans Pro | 16px | Regular
- Source Sans Pro | 16px | Light
为了让视觉更整齐，你可以同时选中这 6 个图层，然后在 Design 面板中点击 Align left 和 Distribute vertical spacing。如果愿意，还可以在每一行旁边加一个说明标签，标出该层的具体格式，再通过 ⌘ + G（macOS）或 Ctrl + G（Windows）把它们分组整理起来。
图 5.16 – 带标签的已样式化、已整理文本图层
现在，就该像之前处理网格那样，把这些排好版的文本图层转换成可复用的 Text styles 了：
- 选中 Large Title 这一层。
- 点击右侧边栏中 Text 区域旁边的 Style 图标。
- 在弹出的 Text styles 对话框中，点击 + 创建一个新样式。
图 5.17 – 创建文本样式
将它命名为 Title / Large。
接下来，按照同样方式，把其他文本样式命名为：
- Title / Medium
- Body / Bold Label
- Title / Small
- Body / Regular
- Body / Caption
这里我们在命名中使用了斜杠 / ，是为了让结构更清晰。在 Figma 中，这种命名方式会在样式列表中自动生成嵌套文件夹，方便你把相关样式归类到一起，让样式库保持整洁。
每一个 Text style 所包含的属性包括：字体家族、字号、字重、行高、字间距以及大小写转换等，但不包括对齐方式和颜色。这使得文本样式具备很高的灵活性：你可以在不同布局中重复使用它们，而无需为每一个细小变化都复制出一套新样式。
图 5.18 – 文本样式
在后续阶段，你还可以把这套基础系统继续扩展成一个完整的 UI kit，供未来项目复用。如果你想进一步打磨排版比例，也可以借助数学比例来获得更和谐的视觉节奏。一个很实用的工具是 https://type-scale.com，它可以自动帮你计算比例化的字号体系。
创建与管理颜色与效果样式
既然我们已经为网格和文字定义好了样式，现在就轮到第三个关键元素了：颜色。和之前一样，色板的选择应当基于前期研究和视觉参考——在我们的项目里，就是之前搭建好的 moodboard（情绪板） 。现在，让我们把那些工作转化为一组可复用的颜色样式。
首先，在 Styles + Components 页面里，在 Typography frame 旁边再添加一个新的 Desktop frame，并将它命名为 Colors。在这个 frame 里，创建 5 个 130 × 130 px 的正方形，纵向堆叠排列。借助 Figma 的自动对齐工具，让它们之间的间距保持均匀。
然后，从上到下，为这 5 个方块分别设置以下 Fill 值：
- #FF5959 – Accent color：用于 CTA 按钮和重要视觉强调
- #FF9C9C – Secondary color：用于次级操作或辅助性强调
- #FFFBF5 – Background color：浅色 UI 的主要背景色
- #B8B8B8 – Neutral Light：用于描边、占位文字，以及其他低强调度元素
- #FFFFFF – Pure Light：标准白色，适合用于深色背景上的文字，或浅色 UI 元素本身
在每个颜色方块旁边，再加上一个标签，简单说明它的用途。你也可以给每个方块加一条 1 px 的深色描边，这样浅色块在画布上会更容易被看清。
图 5.19 – 调色板
接下来，把这些颜色逐一转换成样式：
- 选中某一个方块。
- 在 Fill 区域中，点击 Style 图标。
- 在弹窗里点击 + ，并将该样式命名为与其标签一致的名称（例如 Accent color）。
图 5.20 – 创建颜色样式
对剩余颜色重复这一过程。
需要注意的是：虽然你创建的是 Fill style，但这并不意味着它只能用于填充。你同样可以把这些颜色样式用于描边、阴影，甚至叠加层。和文本一样，颜色样式集合也可以随着设计推进而不断扩充。关键在于：那些被频繁使用的颜色，最好都被关联到某个命名清晰的样式上。这样，你才能保证一致性，也能在后续修改时保持高效率。
选择一套真正合适的色板，需要大量练习和观察。随着经验积累，你会逐渐形成自己的颜色直觉；而在此之前，也有很多资源会帮助你理解颜色心理学、文化联想以及可访问性——尤其后者非常重要：请始终确保你的颜色组合满足对比度标准，并且对于视觉障碍用户依然具备可读性。
现在，让我们再创建第一个 效果样式：
-
选中 Colors frame 底部的那个 Pure Light 白色方块。
-
在右侧面板的 Effects 区域中，点击 + 。
-
选择 Drop shadow，然后点击太阳形图标，输入以下参数：
- X: 0
- Y: 4
- Blur: 15
- Spread: 5
- Color: #82B2DE
- Opacity: 22%
图 5.21 – Drop shadow 设置
将这个效果保存为一个样式，并命名为 Light Drop Shadow。
现在，你就可以把这个效果样式应用到这些颜色方块上了，并且还可以把它们原本的黑色描边去掉，让整体看起来更精致。
当然，这个效果样式并不只适用于色板预览方块——它可以应用到设计中的任何图层上。
到这里为止，你已经成功为项目建立好了所有核心样式基础：网格、排版、颜色和效果。如果你想快速查看自己定义过的所有样式，只需点击画布中的空白区域。当什么都没有被选中时，Figma 的 Design 面板会显示当前文件中所有可用样式。从这里，你可以预览、编辑或更新它们。
而且，每当你更新某个样式时，所有正在使用它的元素都会立即同步发生变化。
图 5.22 – 网格、颜色、文本与效果样式
随着项目继续推进，你将会在这些样式的基础上，逐步构建出可复用的组件。最终，它们会一起演化成你自己的设计资源库——而这套资源库，将来是可以跨多个项目持续复用和扩展的。
如果你想查看完整示例，包含全部内容的工作文件已经发布在 Figma Community，链接如下：
https://packt.link/hSHHL
你可以自由复制它，并研究其中各个部分是如何彼此衔接的。
总结
正如前面提到过的，UX/UI 设计师最核心的目标，并不只是“有创意”，而是构建出一种让用户感到有把握、被支持、且不会被干扰的界面。一个成功的设计，应当是直观且包容的，它能够预判用户需求，适应不同使用场景，并且通过每一个细节清晰地进行沟通。
在这一章中，你已经看到：这种设计理念，甚至同样适用于那些乍看之下似乎只是“视觉层面”的选择，例如字体、颜色和效果。你也学会了，如何把这些视觉决策进一步转化为可复用的样式，让一致性从设计一开始就被内建进去。
Styles 是 Figma 中最强大的功能之一，而你现在已经亲手实践过如何创建 grid styles、text styles、color styles，甚至 effect styles。从这一刻开始，你的 Styles + Components 页面会继续成长，不仅承载样式定义，也会逐步加入可复用 UI 元素和设计 token，让你的工作越来越高效，也越来越具备扩展性。
你已经取得了非常扎实的进展。而既然基础已经打好，接下来，就该进入 Figma 最强大、也最有特色的功能之一了：Auto Layout。
