-
buo4 技术教程组 用户
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，画布上就出现一个手机屏大小的框。 - 你的界面元素都
内容摘要
一句话概述：适用人群：想做 APP/网页界面但没设计基础的小白、程序员想自己画原型、产品经理补设计技能。
你将了解到：
- 为什么选 Figma
- 界面认识（5 个区）
- Frame（画框）
- 画第一个界面（登录页实战）
- Auto Layout（自动布局，重点）
- 组件（Component）与复用
适合人群：想快速判断这篇内容值不值得读的读者。
全文共 9 个章节，按「为什么选 Figma → 组件（Component）与复用」的顺序展开，每节都能单独查阅，配有可直接照做的清单与模板。
内容侧重可落地的操作流程与常见坑点，读完就能对照自己的情况动手，不需要额外补理论基础。
以上为全文要点速览，完整内容需解锁后阅读