如果你现在打开招聘网站搜 UI 岗位，"Figma"几乎出现在每一条任职要求里。但很多人点开 Figma 之后的第一反应是：这不就是个网页版的 Sketch 吗？然后画了几个矩形、拉了两条参考线，就不知道该干什么了。问题不在工具，在于你脑子里没有一套完整的协作流程——组件怎么建、变体怎么管、自动布局什么时候用、交付时开发要什么。这门课就是冲着这些缺口去的。

先搞清楚：你缺的是工具操作，还是设计流程

Figma 的上手门槛很低，拖拽、缩放、对齐都符合直觉，所以很多人误以为自己"会用"。真正的分水岭出现在三个地方：一是组件与变体系统，二是自动布局（Auto Layout）与约束，三是团队协作与交付。不会这三样，你做出来的永远是"一张图"，而不是"一套可维护的设计稿"。

这门课从工具基础讲到高阶功能，中间没有跳步。判断自己要不要看：如果你目前只会用 Frame 和矩形拼页面，改一个按钮颜色要手动改二十处，那前面阶段的内容对你不是复习，是补课。

三个阶段分别解决什么问题

课程按阶段推进，节奏上是从"认识界面"到"能做项目"。

基础阶段：画布、图层、Frame 与 Group 的区别、钢笔与布尔运算。这些概念听起来琐碎，但 Frame 和 Group 用混，后期做响应式时会成倍返工。
进阶阶段：组件、变体、样式（颜色/文字/效果）、自动布局。这一块是 Figma 的真正核心，也是很多人卡住的地方。自动布局不是"高级技巧"，而是做列表、卡片、导航栏的默认做法。
实战阶段：完整走一遍 APP 界面设计，从需求到视觉稿到可交互原型。带源码意味着你能拿到工程文件，逐层拆开看别人的图层是怎么组织的——这比看视频更有用。

配套练习：别只看，动手拆一遍

看设计教程最大的陷阱是"看懂了"。视频里老师拖两下就对齐了，你跟着做才发现对不齐。建议的练法是：每看完一个功能点，立刻在自己的文件里复现一次，然后故意改几个参数，看会发生什么。

拿到源码之后，不要只是打开欣赏。挑一个页面，把它的组件全部打散、重新组装一遍，看能不能还原。如果还原不出来，说明你对组件嵌套和自动布局的理解还没到位。这个动作做三遍，比看十遍视频管用。

看完应该能回答这些问题

Frame 和 Group 在什么场景下必须用前者？
一个按钮有默认、悬停、禁用三种状态，用变体怎么组织才不会乱？
自动布局里，固定宽度和填充容器分别什么时候用？
设计稿交给开发时，标注、切图、间距应该怎么给？
团队多人协作时，组件库的命名规范应该怎么定？

如果这些问题你现在答不全，说明这门课对你有实际价值。如果大部分都能答上来，可以直接跳到实战阶段，看别人是怎么把零散功能串成一套完整 APP 设计流程的。工具学到最后，拼的不是快捷键，是你脑子里那套结构。

黑马程序员Figma从入门到精通+APP实战教程带源码

Figma设计工具深度解析与应用实战

编辑点评

系统讲解Figma工具使用，从基础到高级，实战项目丰富，适合UI设计师和产品经理。

⭐ 编辑推荐

本教程全面覆盖Figma设计工具，从入门到精通，实战APP设计，附带源码。

课程亮点

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