首页 
从零开始学Figma
知识点 0/4 · 6%
0. 概述
6
%
从零开始学Figma
最后更新于 2024-11-11
#知识库#软件工具
Figma——一个强大的设计工具，目前使用率和使用评分均第一的设计软件，在使用体验和工作效率上为设计师带来显著提升。
开始学习16
文章数
13.9K
总字数
4
知识点数
7.3K
学习人数
420
学完次数
6
精选笔记
你将学到的知识点
知识库概述
本套知识库是和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/3 · 知识点 0/0
关于矢量和位图认识
Figma是个矢量软件，而多数初学者对于矢量是什么没有太多的概念，只知道一个简单的应用逻辑，即矢量图可以无损缩放，而位图放大会失真。 这和它们两者的成像逻辑有关： 矢量图：使用数学公式描述并被渲染出来的图像形式，所以不管怎么缩放都能被正确渲染。 位图：由每个点一个颜色的像素点组成，也叫点阵图，一张图...
矢量中的钢笔工具
在 Figma 中，创建矢量图形的方式主要有两种，一种是使用内置图形，如矩形、圆、多边形等，另一种是使用钢笔工具（铅笔工具使用概率极低）。 钢笔工具是进行自定义图形绘制的主要工具，使用钢笔工具，也是掌握基础矢量图形核心概念的过程。 在选中钢笔工具后，可以在画布中点击左键添加 “锚点”，并进入单个图形...
矢量中的布尔运算
除了钢笔，Figma 还提供了布尔运算的方式来创建自定义矢量图形。而使用该功能前，可以先了解布尔运算一词的来源。 首先布尔运算（Boolean）是根据19世纪的英国数学家乔治· 布尔（George Boole）而命名，他创造了一套代数系统，用于进行非数字的逻辑运算，如求多个对象的 交集、并集、差集（...
推荐笔记
UX小学生
3天前
加减乘除
Union Selection 联合所选项： 即并集，将 两个图形进行相加 Subtract Selection 扣减所选项：即差集，在下层图形中减去上层图形的部分 Intersect Selection 相交所选项：即交集，仅保留两个图形相交的部分 Exclude Selection 排除相交所选项：即对称差集，除去两个图形相交的部分，其他保留