这门课解决的是哪一类缺口

很多人对 Figma 的接触是「被迫上手」：团队协作文件发过来了，别人在画板里拖组件、开自动布局、切到 Dev Mode 拿标注，你只能在旁边看，或者勉强改个文字就交差。另一种情况是，工具会用一点，但只会用「画图」那一层——画个矩形、摆几个按钮，真正涉及组件化、变体、样式库、团队协作这些环节就接不上。

这门课的定位就是把这两类缺口补上：从界面认知、工具操作讲到完整的 APP 项目落地。它不假设你已经有设计基础，但也不停留在「点哪里、按什么键」的层面，图标设计、组件搭建、项目流程都会涉及，属于边学边做的类型。

三个阶段的划分，对应三种不同的问题

课程按阶段推进，资料包里的阶段说明和配套素材是跟着视频走的，不是随便塞的附件。大致可以理解为：

第一阶段解决「不熟悉工具」：Figma 的界面结构、图层与画板的关系、基础绘图与布尔运算、钢笔与矢量编辑。这一段是把操作手感建立起来，避免后面做项目时被工具卡住。
第二阶段解决「画得不像、不统一」：图标设计技巧、网格与对齐、描边与填充的搭配。图标是 UI 里最容易暴露基本功的部分，尺寸不统一、视觉重量不平衡，一眼就能看出来。
第三阶段解决「做不出完整项目」：APP 项目实战，从页面结构、导航逻辑到组件复用、样式统一，最后交付可用的设计稿。

如果你已经能熟练画图，但项目里总是被吐槽「不规整」「没法对接开发」，重点应该放在后两个阶段，而不是从头刷一遍基础操作。

Figma 真正难的地方在哪

工具本身的门槛不高，难的是几件事：组件与变体的组织方式、自动布局的嵌套逻辑、样式与变量的统一管理、以及多人协作时的文件结构。这几块决定了你是「会画画」还是「能交付」。

课程在 APP 实战里会反复用到这些能力：一个按钮要能适配不同文案长度，一个卡片要在列表和详情页复用，一套颜色要在多个页面保持一致。这些不是靠记快捷键能解决的，需要在项目里反复调整才能形成习惯。配套的资料和源码，用途也在这里——不是拿来抄，而是对照自己的做法，看看差距在哪。

适合谁，不适合谁

适合：准备转岗做 UI 的人、产品经理需要自己出原型和界面、设计相关专业的学生想补一个能直接对接团队协作的工具能力。也适合已经用其他设计工具、想迁到 Figma 的人，重点看组件和协作部分。

不太适合：已经能独立负责完整 APP 设计、只差某个具体功能查阅的人。这门课是成体系的流程教学，不是功能速查手册，对这类读者来说节奏会偏慢。

学完应该能回答这些问题

一个 APP 从空白文件开始，画板怎么组织，页面之间怎么命名才方便协作？
同一个按钮的多种状态，是用变体还是拆成多个组件？各自的代价是什么？
图标画出来大小一样，为什么看起来还是不一样重？怎么调？
自动布局嵌套之后，为什么一改文字整个排版就乱？问题出在哪一层？
交付给开发时，标注、切图、样式信息应该怎么整理？

如果这些问题你现在答不上来，或者只能凭感觉答，那这门课值得按阶段过一遍。看的时候别只跟着点，每一节结束自己重画一遍，效果差很多。

黑马程序员：Figma从零基础到精通+APP项目实战教程 - 包含源码和课程资料

Figma设计工具实战教程

编辑点评

系统学习Figma，从基础到项目实战，适合UI设计师和产品经理。

⭐ 编辑推荐

全面掌握Figma设计工具，通过实战项目提升设计能力。

课程亮点

• Figma基础操作

• 图标设计技巧

• APP项目实战

课程目录

📁 视频-figma
📁     📁 第一阶段
        第一阶段说明.zip  [1.8 MB]
        03.Figma后台界面总览介绍.mp4  [22.0 MB]
        09.Figma工具栏 预览以及分享设置.mp4  [16.0 MB]
        02.Figma安装使用与汉化.mp4  [9.4 MB]
        14.Figma 组件、样式团队推送管理.mp4  [11.4 MB]
        16.Figma 自动布局.mp4  [50.9 MB]
        15.Figma 布局约束和栅格.mp4  [53.6 MB]
        12.Figma插件安装与使用.mp4  [17.5 MB]
        07.Figma工具栏 钢笔工具.mp4  [18.9 MB]
        04.Figma工具栏 移动工具.mp4  [15.6 MB]
        08.Figma工具栏 文字工具.mp4  [46.3 MB]
        01-Figma系列课程介绍.mp4  [16.4 MB]
        06.Figma工具栏 形状工具.mp4  [22.9 MB]
        11.Figma属性栏 基础功能讲解（下）.mp4  [27.5 MB]
        13.Figma组件管理.mp4  [36.5 MB]
        05.Figma工具栏 Frame与组的认识.mp4  [26.8 MB]
        10.Figma属性栏 基础功能讲解（上）.mp4  [21.9 MB]
📁     📁 第二阶段
        第二阶段资料.png  [493.5 KB]
        02-微质感图标技法.mp4  [29.4 MB]
        04-2.5D图标绘制技法.mp4  [15.2 MB]
        03-旋转造型绘制技法.mp4  [14.9 MB]
        01-磨砂图标绘制技法.mp4  [45.9 MB]
📁     📁 第三阶段
        第三阶段必看.zip  [1.8 MB]
        12-谷歌表格插件替换数据方法.mp4  [28.0 MB]
        09-我的页面制作.mp4  [32.1 MB]
        19-APP套样机方法.mp4  [115.9 MB]
        13-数据采集器使用方式.mp4  [64.2 MB]
        17-摹客平台切图标注方案.mp4  [112.7 MB]
        03.标签栏组件制作.mp4  [16.9 MB]
        01.APP项目实战概述.mp4  [5.8 MB]
        08-消息页面制作.mp4  [25.1 MB]
        07-发现页面制作.mp4  [33.4 MB]
        06-APP首页完成.mp4  [50.4 MB]
        16-Figma自带标注功能.mp4  [10.2 MB]
        10-常规配图添加方式.mp4  [16.4 MB]
        02.常见项目框架搭建.mp4  [27.7 MB]
        11-常规文字数据添加方式.mp4  [8.8 MB]
        18-页面交互演示制作.mp4  [190.6 MB]
        14-项目组件库搭建与整理.mp4  [23.6 MB]
        15-Figma自带切图工具使用.mp4  [12.7 MB]
        05-APP首页排版（下）.mp4  [38.1 MB]
        04-APP首页排版（上）.mp4  [57.3 MB]
    视频-figma说明.zip  [1.8 MB]