Figma 已经取代 Sketch 和 XD，成为界面设计的行业标准。它最大的好处是浏览器里就能用、多人实时协作、组件复用。本篇带你从零跑通第一个设计稿。
一、注册与界面认识
- 官网注册 Figma 账号，个人版免费。
- 打开后点”New Design File”新建文件。
- 左侧图层列表，中间画布，右侧属性面板。
二、三个核心概念
1. Frame（帧）
相当于画板。按 F 键拖出一个 Frame，尺寸选 iPhone 14（390×844）就是手机屏幕。
2. Component（组件）
把重复用到的元素（按钮、导航栏）做成组件，改一处所有地方同步更新。这是 Figma 效率最高的功能。
3. Auto Layout（自动布局）
给 Frame 加自动布局，内容变了大小自动撑开，不用手动调。
三、做一个 App 首页的流程
- 拖一个手机尺寸的 Frame。
- 画顶部导航栏（做成组件）。
- 中间用 Auto Layout 排内容卡片。
- 底部 Tab 栏（也做成组件）。
- 右侧改颜色、字号、圆角。
四、出图交付
- 选一个 Frame，右侧点”Export”导出 PNG 或 SVG。
- 给开发交付：分享链接，设为”任何人可查看”。
- 加注释：选中元素按 C 键加标注。
五、新手练习路径
- 第 1 周：跟着 Figma 官方教程做。
- 第 2 周：找一个你喜欢的 App，1:1 复刻它的首页。
- 第 3 周：自己设计一个简单的工具类 App。
Figma 是工具，会用工具不等于会设计。多看好作品，多练手，审美和技术一起涨。
新手常见错误
刚做设计时容易犯的几个错，提前知道能少走弯路。
- 颜色太多：一张设计不要超过 3 种主色，否则杂乱。
- 字体太多：整套设计用 1-2 种字体就够了。
- 对齐混乱：所有元素统一对齐，视觉才整齐。
- 不留白：内容塞满整个画布会很拥挤，适当留白更高级。
延伸学习资源
想提升设计水平，下面这些渠道很有帮助。
- 站酷：国内设计师社区，看大神作品找灵感。
- Pinterest：搜设计关键词，图海量参考。
- Behance：国际顶级设计师作品集。
- B 站设计教程：软件操作类教程非常全。
提升审美最快的方式就是多看优秀作品，每天花 10 分钟刷一刷。