👨‍💻 Figma 协作设计工具：前端开发者视角快速上手指南

oil欧哟
4,348 阅读18分钟

前言

Figma 一开始是以设计师为主要用户群体。但是，随着前端技术的发展和交互设计的重要性日益凸显，越来越多的前端开发者或者产品经理也开始使用 Figma 进行协作设计。

然而，对于刚开始接触 Figma 的前端开发者来说，可能会觉得有些难以上手。这是因为 Figma 本身设计得极为贴近设计师工作流程，在一些地方可能不太符合前端开发者的习惯和需求。

恰好最近我也在学习产品方面的知识，开始深度的去使用 Figma ，总结了一些从前端角度出发的使用技巧，如果你是一名前端开发者，那么这篇文章对于使用 Figma 一定会有所帮助。

Figma 介绍

Figma 是一款在线协作设计工具，能够帮助设计师、开发者和其他团队成员共同协作，创建和编辑应用程序和网站的交互式界面设计、图标、插图、页面和原型等，可以用于用户体验 (UX) 设计、用户界面 (UI) 设计和产品设计等。

Figma 具有以下主要特点：

  1. 在线协作：Figma 可以与其他人实时协作，创建和编辑设计图和原型。
  2. 跨平台：Figma 是跨平台的，可在 Mac、Windows 和 Linux 系统上运行。
  3. 代码生成：Figma 允许用户生成 CSS、iOS 和 Android 代码。
  4. 团队库：Figma 可以创建和共享团队库，让整个团队访问和编辑设计图。
  5. 接口设计：Figma 可以用于创建 Web 和移动应用程序的交互式界面设计图。

前端开发者学习 Figma 除了可以深入理解设计方案的细节和实现方式，在实现一些独立开发的项目时，也可以先用 Figma 快速实现一个 UI Demo 看看效果如何，在后续开发时也可以将注意力集中在逻辑上，提升开发效率。

基础操作

首先介绍一下 Figma 的基础操作，项目相关的部分比较简单，按照页面提示来就能创建项目了，当我们进入一个项目后，可以看到页面中有五个分区，如下图：

image.png

这五个分区的功能如下：

  • 页面区域：用于创建新的页面，当然我们可以不以实际项目中的页面那么细颗粒度的去区分，我们可以以项目中的某一个功能模块进行区分，因为在一个 page 可以创建很多个前端中对应的实际页面。

  • 图层区域：图层区域可以看到当前我们页面中的所有图层，由于在页面中我们常常会有多个图层相互覆盖的场景，因此我们可以通过图层区域进行一些精细化的操作。类比于前端开发中通过图层去快速选中某一个 dom 节点。

  • 实际操作区域：在实际操作区域中我们可以看到当前图层组合出来的效果，在这里我们可以通过拖拽去修改图层的位置，也可以进行图层的增删，或是选中一个具体的图层进行属性的修改。

  • 图层属性编辑区：当我们在实际操作区域或图层区域选中了某一个图层后，可以在图层属性编辑区调整图层的样式，例如图层位置、大小，字体颜色，背景颜色，阴影等等

  • 工具栏区域：工具栏区域主要用于为当前页面中添加图层，例如 frame ，text，group ，评论等等，在实际使用中比较少手动去点击，而是通过快捷键去操作。

关于一些简单操作，其实 Figma 非常符合直觉，也与 PS，PPT 这类工具差不多，进来一看大部分功能都能了解如何使用，因此基本操作在这里就不赘述了。

实现 flex 布局

Flex 布局我相信是前端开发最常用的布局方式之一，这种布局方式几乎可以实现大部分页面的功能。但如果问是第一次使用 Figma ，大概率会手动去对齐图层中的各个元素，这种方式看似自由自在，但存在以下两个问题：

  1. 布局不够精确：手动调整设计元素的位置和大小，容易出现位置和大小不够精确的情况，特别是在涉及到复杂的设计布局时更加明显。

  2. 耗费时间和精力：手动调整每个设计元素的位置和大小需要更多的时间和精力。对于大型项目，这可能成为一个瓶颈，因为会消耗很多不必要的时间。

类比于前端，如果我们所有的元素都使用 relative 和 absolute 布局，那么页面将没有任何响应式，而且实现起来也很痛苦。

在 Figma 中，这种 flex 布局叫做 autol ayout。我们可以通过选中图层后 右键->Add auto layuout 将 frame 设置为 auto layout 布局，当然我更推荐咱们用快捷键 shift+A 去操作，因为这是一个很高频的操作。

image.png

当我们选中一个 auto layout 的 frame 时，在属性编辑区域就能看下图中的功能：

image.png

大家看图标应该能看出大概对应着什么功能，我简单介绍一下和前端 flex 中的对应关系:

  • 箭头代表了布局方向是垂直、水平、还是会自动换行 （flex-direction ,flex-wrap） 。

  • 中间有一条竖线的图标代表图层中不同元素的间隔大小，再往下就是图层中的左右边距和上下边距 (padding) 的大小

  • 九宫格中可以调整纵轴和横轴的布局方式（justify-content, align-items）

通过 auto layout 的 frame 相互嵌套以及设置布局方式，大部分的页面样式都可以实现，而且这种布局遵循着纵横轴的布局规则，因此当我们调整页面大小时他也能响应式的变化，下面上个例子：

如果我们要实现像图片中的这种用户信息卡片：

image.png

我们只需要嵌套一层水平，一层垂直的 auto layout frame，并在每一层中调整一下间距等内容，就能实现一个布局非常板正的卡片了，图层的信息如下：

image.png

如果我们直接将图层复制为 css 代码，可以看到 Figma 中也确实是按照 flex 来实现的：

/* User Card */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16px;
gap: 16px;

position: relative;
width: 269px;
height: 132px;

/* NEW Purple/200 */
background: #F5F0FF;
opacity: 0.2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;


/* Avatar */
width: 100px;
height: 100px;

/* Purple/600 */
background: #9034BF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* User Data */

/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
gap: 10px;

width: 121px;
height: 70px;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;


/* UserName */
width: 121px;
height: 36px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Description */
width: 88px;
height: 24px;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;

实现 absolute 布局

知道了如何在 Figma 中实现 Flex 布局，接下来我们再看看一些 Flex 布局满足不了的特殊情况。在我们的实际项目中，往往有些组件会脱离现有的文档流，例如 Tooltip 提示，Modal 弹窗，Dropdown Menu 这类组件，在前端实现这类组件时，我们通常会使用 fixed 或 absolute 布局，而在 Figma 中，我们该如何实现这种布局呢？

还是以这个用户卡片为例，如果我想在卡片的右上角添加一个小红点用作消息提示，如果我直接添加在图层中，它会根据我们目前的文档流进行布局：

image.png

此时我们选中小红点的图层，在右侧属性编辑区域有一个边框包裹着加号的图标，点击一下：

image.png

点击后，我们的小红点就变为 absolute 布局，我们适当调整它的位置，移动到卡片的右上角。在属性编辑区多出了一个 Constraints（限制条件），也就是这个小红点的位置是如何基于外层容器进行偏移的，也就是 absolute 对应的 left ,right, bottom, top 属性。

image.png

设置显示层级

在前面介绍的 auto layout 布局中，默认的层级是从后向前递减的，也就是后面添加的图层如果与前面的图层相互覆盖会将后面的图层显示出来，那就会遇到下图中的问题：

image.png

这里我在上层的 auto layout 图层中添加了一个下拉菜单，并设置了 absolute 布局，但是由于后续还有其他图层所以被盖住了。想要处理这种情况，我们可以调整图层的显示顺序，首先选中 覆盖到上次弹窗的图层的父级图层，在右侧属性编辑区域找到 auto Layout 分类，右侧有一个更多按钮，点击后可以设置一些高级属性，如下图所示：

image.png

我们可以看到默认的图层堆栈方式是后面的覆盖前面的，我们可以将其修改为 First on top：

image.png

此时我们可以看到操作区中的下拉菜单已经完整的展示出来了：

image.png

封装组件

在前端开发中，组件化可以提高代码复用性和维护性。而在设计系统中也不例外。在 Figma 中创建组件意味着我们可以将多个图层打包到一个单独的组件中，并将其复制并粘贴到不同的画布和文件中使用。我们可以快速创建许多相似或重复的元素，而不必每次都重新画一遍。此外，对组件进行更改还会自动更新其所有实例，避免设计不同步的问题。

创建组件

创建组件的方式非常简单，只需要选中一个图层，右键 -> Create Component 就能将图层创建为组件。

image.png

图层被创建为组件后，当我们复制组件再粘贴，此时就会创建组件的实例，实例会随着基础组件的改变而改变，还是以上面的卡片为例子:

image.png

这里我将卡片创建为组件，并复制了一份实例，其中四个方块的图标即为组件，而实例的图标则是一个空心的方块。

在组件实例中，我们可以修改图层的大小、间距、颜色、字体、文案等等，但是我们不能在其中添加新的图层，同时也不能删除其中的图层，只能将某个图层进行隐藏。组件中如果进行图层的修改，会将实例的一些修改进行覆盖。

假设我不想在实例中展示 description，于是在实例中进行图层的删除操作：

image.png

从图中我们可以看到图层实际上并没有被删除，而是被隐藏了，因此我们需要将所有可能出现的情况都在组件中实现，而实例中要做的仅仅是按需调整或直接隐藏。

设置组件参数

在 Figma 中，组件参数是一种可提前定义的、可重复使用的设置。通过为组件创建参数，我们可以轻松更改和调整组件的外观和功能，而无需修改组件的实际设计。

在进行组件设计时，为组件定义参数可以带来以下好处：

  1. 提高设计效率：组件参数可以帮助我们快速、精确地制作设计，并提高重用代码的效率。当您需要重复使用一个组件时，只需在参数面板中更改几个设置，而不是每次都重新创建一个新组件。
  2. 简化组件管理：组件参数可以帮助我们管理多个组件的变体和版本。通过设置参数来调整组件的外观和行为，我们可以轻松跟踪组件的变化，并保持组件的整洁和有序。

Figma 的组件参数大致分为两种形式：

布尔值参数

第一种是通过一个开关控制某些图层的显隐，例如我想通过一个参数控制我们在前面添加的小红点是否显示，我们可以这么操作：

首先，选中组件中小红点的图层，找到右侧图层编辑区的 Layer 模块，右边有一个手柄和方块组合的图标：

image.png

点击后会弹出一个确认框，让我们输入参数名称和默认值：

image.png

点击创建后，我们再次点击组件最外层，右侧图层编辑区多出了 Properties 模块，里面记录了我们组件所有的参数

image.png

此时我们再点击实例，右侧图层编辑区多了一个参数开关，我们点击开关将参数设置为 false ，可以看到实例中的小红点就隐藏了。

image.png

自定义参数

如果只能设置布尔类型的参数控制图层的显示隐藏，那么组件的灵活度其实还很差。假设我们想为组件添加一个 size 参数控制组件的大小，那我们该如何实现呢？

还是基于前面的组件，在选中组件图层后，在右侧图层编辑区 Properties 模块点击加号，我们可以看到四种类型的参数，我们选择 variant（变量）：

image.png

此时我们的组件中多了一个实心方块图标的图层，这个图标说明该图层是变量图层，意味着我们这个图层中的内容代表了变量 Default

image.png

当选中这个 Default 图层后，我们可以在右侧 Cureent variant 模块修改参数的名称和当前图层对应的变量值，我将其修改为 Size 和 sm

image.png

接下来我们在最外层 User Card 组件图层中复制两份其中的变量图层，并分别修改 Size 为 md，lg, 并调整变量图层的样式，实现的效果如下：

image.png

可以创建看到我们的组件图层下有三个变量图层，每个图层对应当前变量的样式，从小到大为 sm,md,lg。

接下来我们看看组件实例的效果，当组件存在变量时就不能直接复制粘贴组件图层进行实例创建了，因为当组件设置变量参数后这样操作会创建一个新的组件而不是创建一个实例。

此时我们应该从左上角页面区域点击 Assets(资产) 找到我们创建的组件，然后将其拖入操作区域以创建实例：

image.png

创建完成后我们点击实例图层，在右侧参数那里就能看到 Size 参数了，如果进行切换组件就会替换为变量对应的变量图层，这样我们就实现了通过参数去切换组件的大小：

image.png

image.png

使用这种方法，我们几乎可以将组件包含的所有情况都通过变量来实现。例如我们可以实现一个 icon 组件，将我们收集的图标全部以变量图层的形式放在里面， 在使用的时候只要切换 icon 组件不同的参数即可。

实现组件插槽

前面提到了，我们不能在组件实例中添加额外的图层，如果我们想实现一个 modal 弹窗或者 drawer 抽屉组件，我们想在固定样式组件中自由的替换内容该怎么做呢？

这里是我参考了一些视频和文章实现的方式，可能并不官方，但是能满足我们的需求，下面我介绍一下：

首先我们要实现一个 replacement 占位组件，它的样式可以随意，只要你能理解它是专门用来给其他组件替换的即可，例如下图：

image.png

接下来我们实现一个 Modal 组件，将中间的内容用 replacement 进行占位：

image.png

接下来我们基于 Modal 创建一个组件实例，并且选中组件实例中的 replacement 图层，此时右侧的属性编辑区有一个实例的名称下拉框：

image.png

我们点击后可以在下拉框中看到所有的本地组件，如果选中一个组件就可以将其与占位组件进行替换，也就实现了自定义内容的功能。这个功能在 Figma 中叫做 Swap Instance（实例替换），Swap Instance 功能可以帮助用户在更改组件实例时，快速切换不同的组件实例变种。

因此在实际使用中，如果我们实现一个表单弹窗，我们只需要先实现一个表单，然后将表单创建为组件，并将其替换到占位组件位置，这样就是一个完整表单弹窗了。

这里我先替换了一个头像组件给大家看看效果如何：

image.png

写注释

在 Figma 中，官方提供了评论的功能，但是并没有提供注释的功能。评论通常用于 UI review 或者问题记录，而不是对于当前 UI 功能的补充，如果我们并不是单纯将 Figma 作为一个 UI 工具，而是想作为原型展示给开发者，那么补充一定的功能描述是必不可少的。

通常我会使用一个便利贴的插件对我的 UI 进行功能补充，点击顶部操作栏插件图标，搜索 Project notes，搜索到了点击 run 启动插件 ：

image.png

启动后我们可以看到一个浮窗用于编辑注释的内容，我们输入后需要选中一个图层才能点击 Add 按钮：

image.png

点击后就会生成一张便利贴在我们选中图层的右上角，效果如下图：

image.png

此类的插件还有很多，大家选择自己觉得方便的去使用即可。

锁定版本

在 Figma 中，如果我们已经实现了一个组件库，那么肯定有碰到过不小心调整了组件的图层，导致所有的组件实例都乱了，如果这时我们还忘记了之前的文案内容，那就痛苦了，因此以版本去管理设计文件也是很有必要的。

Figma 官方其实是有提供版本控制工具的，在项目顶部的工具栏中可以点击 Show version history

image.png

如果需要更高维度的去管理 Figma 文件，Figma 也提供了按分支管理的方式，但是这个功能需要订购 Fiagma 的企业版才能使用，我还没有实践过，因此就不做介绍。

想深入了解的同学可以看看 help.figma.com/hc/en-us/ar… 这篇文章。

那么如果我们没有开通企业版，如何管理 Figma 的版本呢，这里推荐一个工具叫做 zeplin，它可以以 frame 的维度将我们的页面同步到一个单独的平台中，我们在 figma 进行任何操作都不会影响到 zeplin 中的内容。

并且每一次将图层同步到 zeplin 都会生成一个新版本，免费版只支持保存两个版本，下面讲讲如何进行同步：

  1. 首先我们需要注册一个 zeplin 的账号并创建一个项目，这一步很简单不赘述。

  2. 在 Figma 中搜索 Zeplin 插件并启动：

image.png

  1. 启动后我们可以看到一个这样的弹窗，我们需要选中 frame 或是组件进行导出：

image.png

  1. 这里顺便告诉大家一个方便快速创建 frame，选中某个图层，右键->frame-selction，这样就会在我们的图层外面在包一层 frame:

image.png

  1. 此时记得给我们的 frame 命名，因为 frame 的名称是会同步到 zeplin，是图层的区分方式，选中 frame 后就可以点击 export 将图层到我们创建的 zeplin 项目中。

image.png

这里有个注意点，zeplin 是以 frame 的名称判断是否为同一个资源的，这意味着如果我们上传了 frame 的名字叫 A，那么导出到 zeplin 中的资源名称也是 A，如果不修改 A 的名称，如果调整了 A 中的部分样式，当我们再次导出到 zeplin 时，zeplin 会为 A 创建一个新的版本。

但如果我们改名为 B 了，那么再次导出则不会创建新版本，而是生成了一个新的资源 B，那就有可能出现 zeplin 中 A 和 B 共存，但 A 实际上已经弃用的情况。

总结

希望阅读完本文后，前端开发者们能够更好地理解 Figma 的逻辑，更高效地使用 Figma 协作设计。如果文章对你有帮助，希望在收藏之余为我点赞鼓励下，respect！

avatar
文章
阅读
粉丝