打开招聘软件搜 UI 设计，十份 JD 里有七八份会写「熟练使用 Figma」。但真正卡住人的往往不是软件本身——Figma 的工具栏就那几排，看两小时视频谁都会点。卡住的是：给你一个 APP 需求，你能不能从零画出图标、搭出组件、拼出高保真页面，并且让开发拿到标注就能干活。

这套资料就是冲着这个缺口去的。它不是单纯的功能罗列，而是一条「工具基础 → 图标绘制 → APP 项目落地」的线。

先确认你缺的是哪一块

Figma 的学习者大致分三类，缺的东西完全不同：

没碰过设计工具，连画布、图层、约束是什么都要从头问。这类人缺的是操作肌肉记忆，需要跟着把每个基础动作做一遍。
用过 Sketch 或 PS，转过来发现自动布局、组件变体、样式变量的逻辑完全变了。这类人缺的是「Figma 式思维」，尤其是自动布局这一关，过不去就永远在做死图。
工具会用，但没独立做过完整 APP 项目。这类人缺的是流程感——栅格怎么定、组件怎么拆、页面之间怎么对齐，全凭感觉。

资料里的图标绘制部分偏向第一、二类人练手，APP 项目实战部分则直接对准第三类人。你可以按自己的情况跳着看，但自动布局和组件那几节建议别跳，后面全靠它撑着。

图标绘制为什么值得单独练

很多人觉得图标是小事，网上下一套就行。但图标是练基本功最省时间的方式：布尔运算、钢笔工具、描边转填充、像素对齐，这些操作在画一个 24×24 的图标时会全部用上。图标的容错率又低，差 1px 肉眼就能看出来，逼着你把对齐和网格用熟。

看这部分时别只跟着点，试着把同一个图标改三版：线性、面性、双色。改的过程里你会自然理解 Figma 的图层结构和 Boolean 组的脾气，这些经验后面做组件时直接复用。

APP 项目实战要盯着「可交付」三个字

跟着做项目最容易变成「抄一遍就忘」。判断自己有没有真学会，看三个信号：

能不能说出这个 APP 的栅格是几列、间距用的什么规则，而不是「看着差不多」。
组件是不是真的复用了——改一个按钮，所有引用它的页面跟着变。如果还在手动改每一页，说明组件化没吃透。
交付时能不能自己拉出一份标注，让开发不用来问你「这个间距是多少」。

配套源码和资料在这里的作用是「对照答案」：先自己做，卡住了再看别人怎么拆图层、怎么命名、怎么组织结构。直接照抄文件结构，等于白做。

看完应该能回答这些问题

自动布局里，什么时候用固定宽度，什么时候用「撑满容器」？两者混用会出什么问题？
组件变体和组件属性分别解决什么场景，什么时候该拆成两个组件而不是一个组件的两种状态？
一个按钮从默认态到点击态，你是用变体、交互原型还是两套图层实现？各自的代价是什么？
设计稿交给开发前，你会检查哪几项？命名、间距、切图、还是交互说明？
如果产品临时要求把整套主色换掉，你的文件要改几处？

这几个问题答不上来，说明项目部分还得再走一遍。答得上来，这套资料对你来说就是查漏补缺，而不是从零开始。

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

Figma设计实战，APP项目打造

编辑点评

系统学习Figma设计工具，从图标绘制到APP项目实战，适合设计初学者和进阶者。

⭐ 编辑推荐

全面掌握Figma设计技巧，实战APP项目制作，提升UI设计能力。

课程亮点

• 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]