首页 
从零开始学Figma
知识点 0/4 · 2%
0. 概述
2. Figma的基本操作2.1 Figma的工具栏
2.2 Figma的属性设置
2.3 Figma的图层和编组类型
2.4 Figma的字体设置详解
2.5 Figma的图片设置介绍
2.6 Figma的蒙版设置
2.7 资源社区和组件库使用
2.8 开始使用Figma设计界面
4. Figma的布局功能4.1 约束响应式功能的使用
4.2 Figma自动布局基本认识
4.3 自动布局中的自适应逻辑
4.4 并列布局的自适应类型
4.5 自动布局的相互嵌套
4.6 Figma中的格线系统
5. Figma的样式与组件5.1 Figma的图层样式管理
5.2 Figma的组件功能入门
5.3 Figma的组件变体入门
5.4 Figma的变体功能进阶
5.5 Figma组件的管理方式
5.6 Figma中的变量定义
2
%
从零开始学Figma
最后更新于 4天前
#UI设计通识
Figma——一个强大的设计工具，目前使用率和使用评分均第一的设计软件，在使用体验和工作效率上为设计师带来显著提升。
开始学习37
文章数
38.3K
总字数
4
知识点数
101.3K
学习人数
3.3K
学完次数
184
精选笔记
你将学到的知识点
知识库概述
本套知识库是和bilibili的「2025最新 | 从零学习Figma」课程联动的知识笔记。
本套图文版课程笔记，不仅会讲视频课程知识点一一讲清，还会额外延展一些UIUX的基础知识，从软件基础到设计入门的一些拓展性知识
视频+课程笔记+课程素材，做到市面上最良心专业的Figma学习教程，让同学们只学这一套就够了~！
Figma的基础认识
已学会 0/4 · 知识点 0/3
Figma的初识和学习准备
Figma 是一款针对UI设计开发的 “在线”、“矢量”、“平面”绘图工具，是目前最主流、强大的 UI 设计软件。 设计师可以用 Figma 完成格式各样的UI相关设计需求，包括产品原型、可交互原型、APP 界面、B端界面、车载界面、线上网页等。甚至可以完成一些简单的平面设计需求，如广告设计、包装设...
Figma的注册和安装
Figma 作为一款 SaaS 工具，需要注册才能使用，所以我们首先要进入官网注册。 以下是官网地址： www.figma.com 点击创建账户按钮并根据提示完成后续的操作即可完成账号的创建，并进入 Figma 的资源管理界面。 虽然完成注册已经可以直接开始使用了，但是网页端需要安装相关的字体插件，...
Figma的会员说明和教育版使用
Figma 不是一个免费软件，会对新注册的免费账号做出大量的限制，免费账号的主要权限 只能创建 1 个团队 每个团队只能创建1个项目 每个项目内只能创建 3 个文件 不能使用开发模式等 …… 想要获得完整的 Figma 设计功能，就需要开通 Figma 的会员。Figma 提供了三种付费类型，专业版...
Figma的主要界面认识
学习 Figma 需要先了解它的主要界面和模块有哪些，下面是它的主要功能和页面的层级地图： Figma 主页 团队管理 资源管理 官方社区 创建内容 设计文件 设计模式 交互模式 开发模式 演示模式 白板文件 演示文件 设计模式 演示模式 需要注意的是，Figma 除了作为UI设计工具外，还陆续拓展...
Figma的基本操作
已学会 0/8 · 知识点 0/1
Figma的工具栏
Figma中的工具栏包含7个选项和一个开发/设计模式开关。每个选项旁边有个展开图标，点击可以展开查看隐藏的工具选项。 每个选项旁边的英文字母就是它的键盘快捷键，可以通过该字母快速进行选择，下面我们轮流来解释每个工具选项的功能。 选项1： Move（快捷键V）：选择工具，将鼠标切换成点击可以选中并移动...
Figma的属性设置
在 Figma 中，包含不同的图层、视觉元素，每个元素都会有相应的属性和参数。比如一个矩形，它有长和宽的属性，且长和宽会有具体的参数值。这些属性和参数被统一放置在界面右侧的属性面板中。 因为不同元素包含的属性不同，所以选中不同元素展示的属性面板并不是相同的，会有一定的差异。 虽然属性面板类型很多，但...
Figma的图层和编组类型
Figma 的画布 Page 内可以置入各类元素，即有视觉可见文字、矢量图形等，也有视觉不可见的编组、画框等。 而不管你置入哪些元素，它们都会在资源面板中映射出一个对应的“图层 Layer”，且不同的元素类型会用不同的图标表示。 每个图层可以进行的操作和快捷键： 上移一格： ctrl/com + ]...
Figma的字体设置详解
Figma 的字体模块是属性面板内设置属性最多的一个模块，而它的设置和传统的办公软件 Word、WPS 等有很大的不同。 因为 UI 设计软件为了确保设计稿能落地，使用前端编程中的字体设置属性来创建对应的设置。所以了解这些设置，就需要理解字体的相关知识点，可以查看我们分享的UI字体认识： UI设计中...
Figma的图片设置介绍
在UI设计中，会应用大量图片，包括头像、商品图、摄影图、广告图等等，它们都是位图。而Figma作为一个矢量工具并不擅长制作位图，它只是位图的搬运工。 位图引入也是一个高频操作，而Figma对图片的使用逻辑和其它软件并不相同，它的位图应用本质上是： “创建一个矢量图形，并使用图片填充这个区...
Figma的蒙版设置
Figma有一个重要的基础操作，即”蒙版”的应用。 蒙版是一种口语简化，原意是”蒙在图像上的板子”。正常蒙在图像上的板子会遮挡下方的图像，但如果在板子上镂空一个区域出来，那么图像就可以通过这个区域被部分显示出来。但是Figma中，蒙版功能的实现和语意上...
资源社区和组件库使用
Figma 的资源社区提供了大量的设计素材和源文件，包括 iOS、Android 的官方设计组件、模板等资源。 只要在资源社区首页输入想要搜索的组件库，就可以找到指定的组件。 再搜索结果中，要注意 Figma 的社区是个开放社区，用户可以自己上传资源和文件，所以类似 iOS 组件库等包含大量第三方用...
开始使用Figma设计界面
掌握前面的基础知识，以及使用适当的图片、图标素材，就可以完成市面上90%以上的界面设计了。 自动布局、样式库、组件、变体、变量等进阶功能，只是为设计提供更高的效率，但不会对我们能做出什么设计产生直接的影响。 使用 Figma 完成界面的设计包含以下的要点： 要点1：创建画布 创建画布根据设计的对象决...
Figma的矢量应用
已学会 0/4 · 知识点 0/0
关于矢量和位图认识
Figma是个矢量软件，而多数初学者对于矢量是什么没有太多的概念，只知道一个简单的应用逻辑，即矢量图可以无损缩放，而位图放大会失真。 这和它们两者的成像逻辑有关： 矢量图：使用数学公式描述并被渲染出来的图像形式，所以不管怎么缩放都能被正确渲染。 位图：由每个点一个颜色的像素点组成，也叫点阵图，一张图...
矢量中的钢笔工具
在 Figma 中，创建矢量图形的方式主要有两种，一种是使用内置图形，如矩形、圆、多边形等，另一种是使用钢笔工具（铅笔工具使用概率极低）。 钢笔工具是进行自定义图形绘制的主要工具，使用钢笔工具，也是掌握基础矢量图形核心概念的过程。 在选中钢笔工具后，可以在画布中点击左键添加 “锚点”，并进入单个图形...
矢量中的布尔运算
除了钢笔，Figma 还提供了布尔运算的方式来创建自定义矢量图形。而使用该功能前，可以先了解布尔运算一词的来源。 首先布尔运算（Boolean）是根据19世纪的英国数学家乔治· 布尔（George Boole）而命名，他创造了一套代数系统，用于进行非数字的逻辑运算，如求多个对象的 交集、并集、差集（...
使用Figma绘制图标
作为一个矢量UI设计工具，Figma也可以完成图标的绘制。作为软件说明，本节主要阐述Figma绘制图标所需关注的重点，想要了解图标设计的系统知识，可以查看图标设计的知识库： 点击跳转：图标知识库 绘制图标首先要了解图标的规范，并创建对应的画板和格线系统。 产品图标的绘制 产品图标的设计，主要遵循苹果...
Figma的布局功能
已学会 0/6 · 知识点 0/0
约束响应式功能的使用
约束 Constraints，是一个用于控制元素对于上级 Frame布局关系的功能，主要用于创建具有自动适配效果的页面或组件。 只有在元素处于Frame的下级时，该元素才能触发约束功能的使用。 约束功能分别控制元素水平和垂直两个方向的布局，且布局的模式会在右侧的田字格内表示出来。 水平布局控制 垂直...
Figma自动布局基本认识
Figma中最核心的功能之一 —— 自动布局 Autolayout，是定义多个元素之间布局关系的功能。可以通过特定的图层编组、层级、设置来实现复杂的布局功能，并可以实现内容的快速调整和适应，大幅度提升设计的效率。 启动自动布局需要在布局面板中的 Auto layout 属性栏中打开，需要选择多个元素...
自动布局中的自适应逻辑
自动布局最重要的特性之一，就是自适应的应用。而Figma中的自适应包含下面两个概念： 布局编组跟随子元素适应 Hug Contents 子元素跟随父级编组适应 Fill Container 布局编组跟随子元素适应，即父级编组的尺寸随子元素的尺寸变动，比如创建一个具有自动布局的标签，标签的矩形宽度随内...
并列布局的自适应类型
自动布局中允许添加多个子图层进行并列布局，而应用并列的同时也可以添加自适应的逻辑，实现更灵活的组件控制。 同理，在这种模式下也包含父级适应还是子级填充两种情况，我们分别来拆分它们的应用逻辑。 首先是父级编组随子元素适应，比如创建一个新闻列表中的卡片，卡片内包含标题、简讯、操作三个栏目并列，卡片高度会...
自动布局的相互嵌套
自动布局处理的是编组层和下级元素的排版关系，下级元素可以是普通编组、矢量图层、图片、文本、组件，也可以是 —— 其它自动布局。 也就是自动布局是可以进行上下嵌套的，而它们也可以实现自适应的效果。 比如做一个横向标签列表，自动布局得宽度为自适应 hug，它下级的每个标签可以由自动布局实现，且每个标签作...
Figma中的格线系统
Figma中提供了格线系统的创建，即属性面板中 Layout Grid。但要注意的是，Layout Grid 只有在选中 Frame和 Autolayout 编组层时会出现，其它图层类型中没有。 Figma 提供了三种格线系统类型，分别是： Grid：一般网格 Columns：竖向栅格 Rows：横...
Figma的样式与组件
已学会 0/6 · 知识点 0/0
Figma的图层样式管理
Figma中提供了将图层特定样式 Style进行保存并复用的功能，帮助设计师更好建立设计规范以及实现项目设计细节的统一。 基本认识 而图层样式Style的记录是以属性类型区分的，包含下面这些属性类型： 创建图层样式，要在对应属性分类中点击 Libraries，并在新展开的面板中点击 “+” 号，在 ...
Figma的组件功能入门
Fimga 提供了组件 Component功能，可以将一个或多个图层组件化后进行复用。组件功能对UI的项目设计至关重要，可以帮助设计师用组件化的思路快速搭建界面并实现批量修改，大大提升界面设计的效率和视觉的一致性。 组件的基本认识 学会组件的使用就要先了解组件功能的基本原理，即创建原始组件后，以它为...
Figma的组件变体入门
UI设计中同一个控件、组件会有多种状态和样式，Fimga提供了变体功能 Variant让一个组件可以实现多种样式的切换，提高项目组件的管理和使用效率。 变体的基本认识 学习变体就要了解变体功能的应用逻辑，变体的创建是在一个原始组件下添加多个组件样式，并对每个样式设置对应的属性Property和值 V...
Figma的变体功能进阶
变体Variants是属性Propertie下的其中一种属性类型，在Figma早期的变体组件中只能添加这一种属性类型。 随着Figma的更新和迭代，目前 Propertie下包含了四种属性类型，分别是： Variants：变体，用于关联不同属性值和组件样式 Text：文本，内置预设可关联的文本信息 ...
Figma组件的管理方式
一个完整的项目往往会包含数十上百个组件，如果只是简单创建组件并命名，那么组件列表就会非常长，降低设计师的操作效率。 所以，Figma提供了对组件进行整理的方法，即建立组件的分类和层级，实现结构化的树状组件管理形式，可以在 iOS 或 Material Design等官方组件库中查看示例。 Figma...
Figma中的变量定义
Figma提供了变量 Variables功能，用于实现对特定数据的进行保存和调用。 变量功能的主要应用场景包含三类： 建立色彩的 Token（要理解 DesignToken是什么） 批量管理文本内容 快速切换色彩主题 辅助交互操作 变量的基本认识 变量有四种类型，分别是颜色 Color、数字Numb...
Figma的交互功能
已学会 0/6 · 知识点 0/0
Figma的交互基础认识
Figma作为一个UI设计软件，提供了基础的交互功能，可以让设计师创建简单的交互演示效果，或简单的交互动效示例。 Figma 的交互功能认识 Figma包含编辑和预览两个模式，交互功能的设置在编辑模式下完成，查看交互的效果和进行对应交互只能在预览模式下完成。 预览模式有三种场景： 而编辑模式需要在状...
Figma的页面滚动设置
进入Figma的预览模式时，如果设置了预览的设备类型，那么预览时就会应用该设备的外观，将画布内容置入到设备屏幕中。 在Prototype原型编辑模式下，点击空白位置，则右侧的属性面板会切换成预览效果的设置，包括设备类型、设备外观色、展示方向、背景色、预览效果等。 而在实际设计过程，页面内容的宽度、高...
Figma的页面基础跳转
页面的跳转设置即从页面A跳转到页面B的过程，实现它的方法非常简单，只要把在交互设置模式下，选中要点击的对象，在它的边缘拖拽连线到目标页面即可。 也可以通过右侧的交互设置面板 Ineractions 手动添加，要重点理解交互事件设置面板的选项： 触发方式 Trigger即触发交互事件的交互方式，包含下...
Figma的智能动画应用
动画效果中的Smart Animate 是用于实现复杂动效的功能，它可以让两个具有相同图层的画板 Frame跳转实现关键帧补间效果。 使用该功能需要先理解关键帧的补间效果，在一段动画中具有开始帧和结束帧，两个帧内包含的元素相同。设置补间动画以后，系统会自动生成从开始帧到结束帧的中间过度帧，实现一个完...
Figma的弹窗效果
针对UI中出现频率极高的弹窗，Figma提供了 overlay 系列的动作，包括： 首先理解 Open overlay弹窗，它的实现逻辑是将目标画板的内容，覆盖到当前的画板中。 该功能对目标画板的尺寸没有限制，想用什么弹窗尺寸都可以，我们可以在交互设置中对该弹窗的显示做出进一步的设置。 首先 Pos...
Figma交互中的变量和条件
前面提到的Figma交互设置，都是围绕页面本身的基础操作和不同画板Frame之间的跳转，动效的起始和结束都是已经设计好的界面。 而Figma还提供了三个进阶的交互动作，可以直接变更页面（没有提供结束页设计）内的特定内容，分别是： Set variable 设置变量 Set variable mode...
Figma 的插件部件
已学会 0/2 · 知识点 0/0
Figma的插件认识
Figma的官方社区提供了丰富的插件，帮助设计师更高效、多样地完成设计。 Figma插件的安装 想要使用插件，要做的第一件事就是了解安装的方式。Figma作为一个云端应用，插件的安装是由官方服务器处理的，而不是在我们自己电脑上安装。所以我们不需要去下载插件，且所有可添加的插件只出现在Figma官方社...
Figma中的小部件
除了插件外，Figma还提供了一种特殊的外部元素 Widgets 小部件。它们是已经创建好的特殊组件，可以在编辑界面中直接进行交互和操作（不用进入预览模式），帮助我们实现一些特殊的拓展功能。 小部件在社区中的 Plugins选项下可以选择并打开已上传的列表。 点击小部件也可以进入详情页，同理每个小部...
推荐笔记
许勇杰
2025-04-04
长宽变化按钮介绍
Fixed width/height，固定宽度/高度数值 Hug contents，包围内容，背景根据内容的尺寸自适应 Add min witdth/height，应用自适应，并设置支持的最小宽/高 Add ma’x witdth/height，应用自适应，并设置支持的最大宽度/高度
卡皮巴拉
2025-03-04
复制粘贴一个元素时，粘贴出来的元素可能不会直接去到我们期望的图层，此时可以先选中期望图层中的另一个元素，再进行粘贴，这时粘贴出来的元素就会直接去到和选中元素相同的图层，即我们期望的图层
卡皮巴拉
2025-03-04
不要出现0.5的数值，两个并列的模块长度可以有微小的差异，一个长一点一个短一点，相差1个像素是允许的
多数元素的尺寸有对应的制定逻辑，往往需要手动设置。
卡皮巴拉
2025-03-04
拖动某个元素时按住空格键可以固定其层级关系，即不管将其拖到哪 它的层级关系都不会改变
这个列表还表示元素的上下关系，当两个图层相交，列表位置在上的会覆盖遮挡在下的图层。
UX小学生
2025-03-01
这里很重要哦！
所以对于常用的组件库中的组件，我们可以单独复制到一个新的文件，并分离它们的组件格式，作为普通编组保存，每次展开新设计时再从该文件中提取。
UX小学生
2025-02-28
矢量图可以无限放大，（记忆技巧：矢与无字体长的像，就这么来记吧）（适用于需要放大的
位图放大则会看到像素块
在UI设计中，会应用大量图片，包括头像、商品图、摄影图、广告图等等，它们都是位图。而Figma作为一个矢量工具并不擅长制作位图，它只是位图的搬运工。
UX小学生
2025-02-26
不要用frame来替代编组！
不要用 Frame来替代编组，尤其是自动布局的创建往往会对图层的可编辑性有一定的破坏，导致设计师在修改没有定稿的界面时耗费大量的精力和软件的功能斗争，而不是把更多的精力集中在设计上。
鹿鹿
2025-02-18
好贵！所以一直提醒我们，不要申请编辑权限，而是复制一份到自己的项目中去编辑。
假设你团队有两个成员开了专业版年订阅，而一个文件因为分享出去有20个人加入，那么下个月你的账单就是： 2*$12 + 20*$5 = $124