5
%
从零开始学Figma
最后更新于 2024-11-25
#知识库#软件工具
Figma——一个强大的设计工具,目前使用率和使用评分均第一的设计软件,在使用体验和工作效率上为设计师带来显著提升。
开始学习
18
文章数
15.7K
总字数
4
知识点数
15.2K
学习人数
709
学完次数
26
精选笔记
知识库概述

本套知识库是和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/1 · 知识点 0/0
推荐笔记
yangjia91
2024-11-28
不是上中下?
垂直对齐:在文本区域内垂直方向的左、中、右对齐
UX小学生
2024-11-20
应该是“顶点”吧
订单
UX小学生
2024-11-17
加减乘除
Union Selection 联合所选项: 即并集,将 两个图形进行相加 Subtract Selection 扣减所选项:即差集,在下层图形中减去上层图形的部分 Intersect Selection 相交所选项:即交集,仅保留两个图形相交的部分 Exclude Selection 排除相交所选项:即对称差集,除去两个图形相交的部分,其他保留
UX小学生
2024-11-17
设计规范
iOS17 中使用的是 iPhone15pro 的 393*852,iOS18 中则是 16pro 的 403*874。