完成了一个比较完整的设计规范后，才发现虽然现在的Figma越来越得心应手，但不仅仅是这些极其复杂的复制粘贴逻辑，基本上所有的功能都可以流畅使用。 放下心来，我开始反思在使用Figma过程中遇到的坑，以及这些年在设计实践中不合理的地方。

所以我打算简单梳理一下比较科学的学习路径和使用流程。 一方面可以作为想学习Figma的朋友参考，另一方面也可以作为自己的参考书，规范自己的设计流程。

首先，这篇文章对于没有使用过原型制作工具的朋友来说是非常不友好的。 很遗憾，这篇文章针对的是有一定经验的朋友。

如果你之前尝试过（）、（）、Axure等专业的原型制作工具或其他此类产品，感觉画图多了，设计体验不好，想要一个工具方便日常使用，不作为主要工作。 工具，那么绝对是值得学习和体验的，哪怕只是新鲜的味道，但你可以在一定程度上感受到Figma带来的设计变革，对于产品设计思维的提升是非常直观的。

下面将从Figma的使用、学习和实操三个方面对Figma进行介绍，主要讲解学习和使用过程中的难点和核心思想，最后提供一个简单的设计规范构建思路供参考。

1. 原型设计工具

提到，很多人都会想到在线文档。 这份结合了 Docs 和 的终极笔记声称可以在一个在线文档中收集所有知识链接。

同样受到韩国投资人追捧的Figma在设计领域。 然而，与红海中的在线协作文档市场相比，Figma自上线以来就成为了原型设计工具中最闪耀的一款。 Adobe XD 落后了。

虽然在市场接受度还不高的国外，Figma也成为了专业设计师的专属偏爱，也吸引了不少“山寨”（比如实时设计）。 究其原因，Figma真正做到了，但又足够开放，拥抱生态，拥抱设计师，不断优化自身的功能和用户体验，成为新时代设计工具的标配方案。

此外，Figma 的免费策略鼓励独立开发者几乎零成本上手。 对于小规模的团队来说，Figma 几乎是唯一能找到的免费协作工具（连 Blue Lake 都开始无限收费了。。。）这些比 友好上千元的 Adob​​e 产品，堪称良心。 对于绝大多数围观者来说，Figma 的逻辑是：通过良好的个人体验sketch输出规范，过渡到向团队推荐它。

，Figma 大杀四方的秘密工具。

虽然 Figma 可以替代所有主流的原型制作工具。 对于产品总监和交互设计师来说，简单的原型、高保真设计稿、交互说明、产品演示、解决方案讲解，都可以通过链接直接在浏览器上完成，非常极客。 更重要的是，你可以使用 Figma 来设计简历和作品集（比如我）、演示文稿和头脑风暴白板，并将 Figma 的共享和协作功能用作团队看板......

可以说，不仅仅是设计位图和专业级的交互动画，Figma 都有相应的功能可以实现。 难能可贵的是，它不仅“可实现”，在某些场景下Figma甚至可以替代专业工具的使用。

比如简历，利用Figma优秀的排版能力和基于云端的特性，你可以简单的优化你的设计然后丢给用人单位，对方不需要下载庞大的压缩包，即时查看也提升了质量的好作品。 可能性。 对于团队知识库，借助语雀等工具，可以将设计文件作为链接插入到文档中，直接在文档中查看产品演示，高效美观。

对于产品从业者来说，无论你是独立的全栈还是团队完成一个设计任务，Figma总能根据你的需求满足你的需求。 这是工具的高阶，不要让Figma教你怎么用，而是你想怎么用，就可以用它来搭建你的生产环节。

Figma的几个优秀特性支持生产环节。

1）Frame：无限容器，比和更好的设计理念

Figma 中的画框既不像传统的画布，也不像视口组合，某种程度上是两者的结合。 在页面中，您可以自由绘制相框，也可以在一个或多个对象上构建相框。 构建后的相框成为后端概念中的“容器”，具有手动布局、边界限制和调整约束等诸多特点。 同时，相框也是一个单独的设备，具有大小、位置、曲率、图层效果、填充蒙版、效果调整、导出等属性。

因为相框不限制上下级关系，可以做到“框内框”。 使用相框，您可以将其用作画布并在其中制作页面； 您也可以将多个设备组合在相框上进行整体调整。 这个流程视口会被手动分组，整个流程显得井然有序、端庄。 对于成型的相框，可以转化为一个组件，通过组件完成各种界面设计任务。

2) Team团队：基于Web，基于云，拉通设计上下游

Figma是目前市场上主要的团队协作设计工具。 这与 XD 和 Axure 有很大不同。 虽然这几年 XD 和 Axure 逐渐加入了协作功能，但是把这一切放到 Figma 上就变得非常合理了。 . 可以说只有 Figma 实现了完全协作。

基于网络和云端意味着所有的设计文档都将放在一个安全的服务器上，所有的修改都将实时同步，提供既定的编辑历史，因此无需保存为多个文件，所有内容一环完成。

PM 和 UI 可以与开发人员共享进行中和创建的设计内容。 只要打开链接，你就可以通过 Figma 发表评论，一起操作，甚至可以发起语音评论会议（新版）。 可以看到团队的通用设计系统和共享组件库，方便统一设计开发。

Figma 为前端预览或复制提供了实时视口代码，开发者可以直接导入所需设备的截图和代码，大大缩短了交付时间。 正因为如此sketch输出规范，Figma 非常适合团队共同参与。 可以说，每个角色参与的越多，Figma的能力就越能发挥出来。

可以说，Figma 将原产品设计中涉及的线框图、原型、交互说明、标签草稿等全部整合在一个页面上，对开发团队来说再友好不过了。

3）流利度：用一个词来形容就是流利

流畅性仍然是这些专注于 AllIn 的产品的关键问题。 在这一点上，Figma 的表现可以说是惊艳了。 很难想象在浏览器上可以体验到如此丝滑的设计产品。 无论设计文档有多大，组件有多少，操作繁多，都不会造成卡顿，在拖拽、编辑、同步协作时不会有强烈的感知延迟。

对比其他本土同类产品的卡顿卡顿，Figma的优化真的干净利落。 在保证网络不受污染的情况下，Figma 可以高速打开整个网站，加载速度甚至比很多本地设计软件还要快。

这些顺畅不仅是用户体验上的，更是心理层面上的。 Figma的设计区域特别科学高效，界面干净整洁。 整个界面可以分为编辑开关、操作区、图层区、属性调整四个部分，其中最大的空间给了操作区，所以在使用Figma的时候常常会觉得随心所欲，同时，您总能找到您需要的功能。

为此，你可以完全没有压力地创作，这就是标题所说的不假思索。 由于Figma骨子里的流畅度几乎不会给你带来化学或心理上的中断感，所以你不用担心它会不会突然关机。 只要网络没问题，一切都OK。

2. Figma核心能力：组件、插件

如果说以上这些只是小毛病，不能为Figma筑起护城河，那么我觉得Figma最有特色、最难模仿的两大法宝就是组件和插件。 后者诠释了 Figma 对效率和工具性思维的重视，而前者则彰显了 Figma 难得的开放和进取态度。

1. 组件

奇怪的是每个设计工具都有组件功能，那么Figma的组件有什么好呢？

Figma 的组件堪称杰作，也完美契合其生态。

从功能上看，组件主要提供三种能力：可重用、可继承、可共享。 它们的背后是组件间的三种关系：组件调用关系、组件父子关系、组件共享关系。

1）组件调用关系

组件调用是组件的生成和重用。

在 Figma 中，点击一个元素后，可以通过点击正上方工具栏上的“ ”将选中的元素转换为一个组件。 转换为组件后，其逻辑与普通Frame无异，具有独特的一套复用逻辑。 两侧的视口区都有一个资源栏，会收集文件中的组件和其他已发布文件的组件。 当你在设计中需要使用之前构建好的组件时，只需要将组件下拉到操作区，它会根据组件落地位置手动进行分组。 另外，如果想直接复制已有的组件，也是可以的。

对于组件，你可以选择将复制的组件实例分开，这样组件就变成了普通的frame/group/，方便你更改； 还可以将多个组件合并成变体，这样组件可以点击一个组件，选择切换到其他形式，这样做tab很方便，可以快速切换不同状态。

在任何一个子组件中，都可以在属性中点击父组件定位到元组件中，方便调整整体设计问题。 同时，这个功能是跨文件的，也就是说，对于一些拥有公共组件库的团队来说，从云端拉取组件进行设计时，可以追溯某个组件的设计原型。

这里的调用保证了Figma组件设计的灵活性，将组件的特性与设备的特性分离，灵活地应用到各种详细的设计工作中。

2) 构成母女关系

虽然组件的母女关系指的是组件的变化逻辑。

《》中有类似的组件概念，复制一个，复制的一个可以根据的变化而变化。

因此，Figma 增强了此功能。 在 Figma 中，父组件和子组件在视口列表中显示不同的图标和遮罩从属关系。 与Axure类似的功能相比，变得更加直观，也意味着不需要特地踏入某个区域，专门新建一个文件来存放组件。 一个你马上设计好的模块，可以快速的转换成一个组件，用在别处，而不需要新建一个页面，来回调整。

通过修改父组件的任意一个属性，可以同步所有的子组件，子组件的改变不会影响到其他子组件。 如果要让一个组件单独不受影响，可以把分离出来，这样根据设计的实际情况做一个比较方案会比较好。

兄弟组件之间的关系也可以任意调整。 只需要将子组件拖到视口列表的上层，子组件就会成为新的父组件，可以最大程度的方便设计工作。 有时，此功能在设计类似模块时会产生奇迹。

3）组件共享关系

Figma充分利用自身的特点，赋予组件自由共享的能力。 这说明在同一个文件中可以任意使用其他组件和颜色样式（颜色样式也算是一个组件），其他文件可以调用这个文件的组件，同一个团队使用团队下很多项目的组件或者团队的公共组件库。

我们可以想象两种情况。 对于新项目，我们可以调用老项目的基础组件（如导航、颜色样式、卡片样式等），从而可以快速搭建一个新的项目框架，特别适合保证内部设计风格一致的情况。团队和产品规格。 构建完成后，可以任意修改调用的组件，不会影响公共组件库，非常方便。

对于工程的修改，我们可以先建立元件库，然后通过改变元件库的形式来调整工程中的所有元件，从而调整整个设计稿。 这在迭代工作中非常实用，只需要更改组件配置，无需新建页面（往往新建一个项目会涉及到重新排版，工作量很大）。

最近，Figma 宣布将支持分支版本。 对于需要做空方案的PM和设计师，可以通过借用一个组件的不同变化，快速搭建两套方案进行对比。

总而言之，组件是 Figma 中一个非常强大的功能。 学好组件是入门 Figma 必不可少的一步。 后面会讲到如何学习如何使用组件，这里就不赘述了。

2.插件

插件是构建 Figma 的设计理念的一种表达，这是我非常喜欢的。

插件和相应的社区代表了一种开放和进步的态度。

与Figma相比，插件的数量并没有跟上，但从开发者的积极性和资源社区的参与度来看，Figma堪称工具社区中的标杆。

为什么我们在 Figma 中使用插件？ 如果你想了解插件，你需要思考这个问题。

从Figma的功能来看，是典型的“优生厌学”，核心优势明显，其他什么的都有点。 这就决定了如果你想使用 Figma 进行光制作，你必须使用范围广泛的组件来满足你的某些需求。

比如Figma提供了代码查看和导入功能，这个不能离线查看。 如果在断网的生产环境中，Figma 无法通过链接查看各种指标。 社区里有很多导入插件。 比如国外有一个插件叫做Heron，可以将这类网页上的标记和剪切图片导入到html文件中进行查看。

目前插件的种类非常广泛，包括图标、插画、移动端、颜色、文字、 demo、图表、中文、图片优化、代码、3D、设计系统、动画、角度等。通过插件-ins，你可以自定义任何关于Figma的玩法。

更可贵的是，Figma的插件都是和账号绑定的。 安装您的帐户后，它可以在任何设备上同步。 与某些本地设计工具不同，您必须在更改设备后重新安装所有内容。 这些体验很容易上瘾，你可以根据需要在线安装插件，在设计中随时调用。

Figma会显示这个文件上使用的插件，方便随时调用。

对于我来说，我的插件主要是帮我解决标签导入、手动数据填充、图片调整、字体调用等问题。 得益于这种插件，Figma 可以专注于底层能力的开发，将扩展和多样化的需求交给开发者，共同构建生态。

还有一点，在Figma中，任何作品都可以上传复制，这意味着你可以借鉴众多大鳄甚至行业领先公司的设计部门的创作，同时分享你的优秀设计。

目前，国内主流互联网公司，如，在其中发布设计规范体系和设计思路，国外大大小小的互联网公司，如腾讯，第一时间将自己的设计案例摆在面前并不断更新，创造了一个良好的社区氛围。

3.如何学习Figma

学习使用 Figma 是一个长期的过程。 Figma是典型的易学难精的产品。 上手非常简单，即使你从未接触过原型制作工具，简单使用一下也能大致了解工具栏中的图形工具的使用方法。 需要努力去提升，难点在于设计思维的产生，如何尽可能的利用Figma的特性来提高设计效率，促进好的设计思维。

1. 入驻策划阶段

如果您真的想学习，请先计划一下。

1）汉化

Figma汉化 – Figma英文社区：

2）解决调用本地字体和英文字体的问题

下载桌面客户端以加载本地字体或：

Figma 应用程序、应用程序和字体：

选择要下载并安装的字体：

符合国人习惯的英文插件 – Figma 中文社区

%E7%AC%A6%E5%90%88%E5%9B%BD%E4%BA%BA%E4%B9%A0%E6%83%AF%E7%9A%84%E4%B8%AD%E6 %96%87%E6%8F%92%E4%BB%B6

3）安装常用插件

Figma 插件库 – Figma 英文社区：

可能的网络问题（如何提高figma的加载速度？）

2.入门阶段

入门阶段，重点学习Figma的基本操作，勇敢拿起键盘创作任何作品。 学会操作后，就要进行实战，或者复制、设计更复杂的页面。 这个过程不需要掌握组件的复杂操作，只需要能够根据工具指南制作一个页面即可。

这里推荐从官方教程入手：

或者直接体验Figma中的菜鸟指南设计文件，按照操作做一个页面就大功告成了。

Figma中也有相应的教程（注意可以找到中文版）。

如果你比较适应国外的学习环境，推荐浏览这些教学网站：

据悉，推荐查看草帽先生的B站教学（声音很好听）（新手略难，可以看他的基础教学视频）：

以下是常见问题：

在这里你可以看看我收集的一些常用的设计网站。

3.高级阶段

进阶阶段主要是掌握Figma的一些快捷操作，熟悉组件和组件库的使用，编辑锚点（学完可以用来制作图标）。

这里有几个网站供参考：

关于组件，可以先看看官博上的解释，受益匪浅。

学会这些以后，你应该多去社区看看，从社区的设计和资源中学习别人的想法和吸引眼球的设计。

4.实战阶段

最重要的无疑是建立完整的设计规范。 Figma可以很好地支持设计规范的构建，并尝试使用组件库为自己的产品构建设计规范。

设计规范建立后，可以快速提升整个设计工作的效率，同时可以从更高的角度考虑如何优化产品的用户体验。

1）确定设计原则和适配原则

在这里，您需要确定产品的基本视觉语言和整体色调，可以用情感板来表示。

适配的原则取决于需要制定多少套设计规范，以及元器件的位置和规范限制规则。 需要与开发进行沟通协调，确定总体适配方案，确定机型规格和单元格式。

2）制定基本风格

3）设计基本组​​件

这部分详细具体的设计方法可以参考《iOS人机交互手册》和官网。 B端产品可以参考阿里集团的蚂蚁和壳牌的柯。

如有侵权请联系删除！