很多界面设计师的日常，是从一个尴尬的瞬间开始的：招聘信息写着「熟练使用 Figma」，你打开它，却只会在画布上拖矩形，不知道组件、自动布局、变体该怎么串起来。这门课要解决的正是这种「工具会用一半」的问题——不是从零教你画圆角矩形，而是把 Figma 里真正影响交付效率的那部分讲透，再用一个完整的 App 项目把流程跑一遍。

先确认自己缺的是哪一块

Figma 的学习曲线不是均匀的。多数人的卡点集中在三个地方：一是结构层，画板、分组、图层命名和页面组织没有章法，文件做到后期连自己都找不到东西；二是复用层，组件、实例、变体、样式这套机制没建立起来，改一个按钮要手动改二十处；三是协作层，自动布局、约束、共享样式、评论与版本，这些直接决定你和前端、产品对接时是否顺畅。

如果你的问题出在结构层，第一阶段的内容会最有用；如果已经能画界面但改稿痛苦，重点看组件与变体的部分；如果已经接需求做项目，那么协作与交付相关的章节值得反复看。不要从头到尾匀速刷一遍，按自己的缺口挑着看，效率更高。

APP 项目实战解决的是什么问题

工具教程最容易犯的毛病，是教你每个功能在哪，却不告诉你什么时候该用哪个。放到真实项目里，问题会变成：一个列表页要适配不同机型，用什么布局方式？状态栏、导航栏、底部 Tab 这三层怎么组织？设计稿要做到什么颗粒度，前端才能直接还原？

课程用完整的 App 设计流程来回答这类问题——从需求理解、信息架构，到页面设计、组件沉淀，再到标注与切图交付。它不只是一套界面图，而是把「一个界面从想法到可交付」的中间环节补上。这部分配套的源码和资料，建议在动手前先看一遍结构，知道有哪些素材可用，再跟着做一遍，而不是只当参考图收藏。

看完应该能回答的问题

组件、实例、变体三者是什么关系，什么情况下该建变体而不是新建组件？
自动布局的方向、间距、对齐分别影响什么，为什么它能让改文案不再撑破按钮？
约束和自动布局分别适合处理哪类适配问题？
一个 App 的页面在 Figma 里应该怎么分文件、分页面，才能让别人接手不痛苦？
设计稿交给开发前，需要补哪些标注与说明，才能减少来回沟通？
如何用共享样式和样式库统一颜色、字体、阴影，避免一套 App 出现五种灰？

这些问题如果看完还答不上来，说明对应的章节没吃透，建议回去重做那部分的练习，而不是继续往后赶进度。

建议的练习方式

边看边做是这门课的基本要求。每学完一个模块，别急着往下走，拿自己手机里任意一个常用 App，挑三到五个页面，用刚学的方法重画一遍。重点不是画得像，而是检查：有没有用组件、有没有用自动布局、图层命名是否清晰、改一次文案会不会牵连别处。

做完整项目时，刻意把组件库和样式库先搭起来再铺页面。很多人反过来做，先画完所有页面再回头抽组件，结果返工量比正着做还大。这个顺序上的差别，恰恰是这门课想让你形成的习惯。

适合谁，不适合谁

适合已经接触过界面设计、想系统补齐 Figma 能力的人，包括准备转岗做 UI 的技术同学、需要自己出原型的产品岗、以及接私活想提高交付效率的自由设计师。如果你完全没接触过任何设计工具，前几节可能需要放慢速度；如果你只想找一套素材抄界面，这门课的价值你多半用不上。

看完之后，衡量标准很简单：能不能独立把一个 App 的主要页面从零做到可交付，并且过程中改稿不痛苦、别人接手不头大。做不到，就回头补缺口。别假装什么都会，Figma 的坑基本都藏在「以为自己会了」和「真的能交付」之间。

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

Figma设计工具实战教程

编辑点评

系统学习Figma设计工具，从基础到实战，适合初学者及进阶者。

⭐ 编辑推荐

本教程全面覆盖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]