Figma入门教程：UI设计从零开始

为什么选择Figma

Figma 是目前设计行业最流行的 UI/UX 设计工具，主要优势：

• 浏览器运行：无需安装，跨平台（Windows/Mac/Linux）
• 实时协作：多人同时编辑，像 Google Docs 一样
• 免费个人版：个人使用完全免费（3个项目）
• 开发者友好：开发者可直接查看设计稿的 CSS 代码

注册与界面

1. 访问 figma.com 注册账号（可用 Google 账号登录）
2. 新建文件：Draft → New design file

主要区域

• 左侧面板：图层列表 / 资源（组件、字体）
• 画布区域（中央）：设计工作区
• 右侧面板：当前选中元素的属性（位置、大小、颜色、文字）
• 顶部工具栏：常用工具图标

基础工具

Frame（画板）

Frame 是 Figma 设计的基础容器，相当于"画布中的画布"：

1. 按 F 选择 Frame 工具
2. 右侧面板可选择预设设备尺寸（iPhone、Android、Desktop 等）
3. 或直接在画布拖拽绘制自定义尺寸

Frame与Group的区别

• Group（Ctrl + G）：子元素可以超出边界，不裁剪
• Frame：默认裁剪超出内容，有独立的约束设置，支持 Auto Layout

文字与颜色

文字工具

按 T 点击画布添加文字，右侧面板设置：

• 字体族（Font family）
• 字重（Regular/Bold）
• 字号（Font size）
• 行高（Line height）
• 字间距（Letter spacing）

颜色填充

选中元素 → 右侧 Fill（填充）：

• 实色（Solid）
• 渐变（Linear/Radial）
• 图片填充（Image）

点击颜色块打开拾色器，可输入 HEX 值。

对齐与分布

选中多个元素后，右侧顶部出现对齐工具：

• 左对齐、居中对齐、右对齐
• 上对齐、垂直居中、下对齐
• 水平均匀分布（Distribute horizontally）
• 垂直均匀分布（Distribute vertically）

技巧：Ctrl + G 先组合，再对齐组，更高效。

Auto Layout（自动布局）

Auto Layout 是 Figma 最强大的功能之一，实现类似 CSS Flexbox 的自动布局：

1. 选中 Frame 或 Group
2. 快捷键 Shift + A 开启 Auto Layout
3. 设置方向（水平/垂直）、间距、内边距

实际应用：

• 按钮组件（文字改变后按钮宽度自动适应）
• 列表项（添加/删除自动调整间距）
• 导航栏（响应式布局）

组件（Components）

创建组件

选中元素 → 右键 → Create component（Ctrl + Alt + K）

组件会保存在左侧 Assets 面板中。

使用组件实例

从 Assets 面板拖拽组件到画布，得到实例（Instance）。修改主组件后，所有实例自动更新。

实例的独立修改：可以修改实例的文本内容、颜色等，不影响其他实例。

原型交互

1. 切换到右上角 Prototype 标签
2. 选中元素 → 点击右侧出现的蓝色"+"
3. 拖拽连接到目标 Frame
4. 设置触发方式（Click/Hover）和动画

点击右上角 ▶ Present 按钮预览原型效果。

协作与分享

• 分享链接：右上角 Share → 生成链接，可设置只读/可编辑
• 开发者模式：分享链接时选择 Dev mode，开发者可查看 CSS 样式和标注
• 导出：选中元素 → 右侧 Export → 选择格式（PNG/SVG/PDF）

常用快捷键

推荐学习资源

• Figma 官方教程：figma.com/resources/learn-design
• 社区文件（Community）：大量免费模板和组件库
• UI8、Mobbin：高质量 UI 设计参考

Figma 上手相对容易，建议直接动手临摹一个 App 界面，在实战中学习最快。