-
bbianji8 用户
Figma UI 设计入门完全教程：从零做出能交付的界面稿
适用人群：想做 APP/网页界面但没设计基础的小白、程序员想自己画原型、产品经理补设计技能。 学完你能做到：用 Figma 画出一个有模有样的手机界面，并切图/标注交给开发。 Figma 是免费、浏览器即用的协作设计工具，已取代 Sketch 成为行业主流，区别于《Illustrator》（做 logo 矢量）和《Photoshop》（修图）。
一、为什么选 Figma
- 免费：个人使用完全免费，不用破解。
- 浏览器即用：打开 figma.com 注册就能用，不用装大软件。
- 协作：多人实时编辑，像在线文档。
- 交付方便：自动生成标注和切图，开发最爱。
二、界面认识（5 个区）
打开 Figma，左到右：
- 工具栏（左上）：移动、框、文字、钢笔等工具。
- 图层面板（左）：所有元素的层级列表，像 PS 的图层。
- 画布（中）：你作图的地方。
- 属性面板（右）：选中元素后改颜色、尺寸、圆角等。
- 顶部菜单：文件、分享、导出。
快捷键先记两个：V=选择、F=框（Frame，做手机屏用）。
三、核心概念：Frame（画框）
Figma 里一切从 Frame 开始。Frame 就是一个"屏幕/页面"的边界。
- 按
F，右侧选 iPhone 13 / 14，画布上就出现一个手机屏大小的框。 - 你