Figma 新手教程学习笔记

📺 视频地址：Figma新手教程2025｜30分钟高效掌握Figma基础操作与UI设计流程_哔哩哔哩_bilibili

🧭 课程结构

1. Figma 简介（00:38）

2. 熟悉工作环境（01:49）

3. 操作界面介绍（03:00）

4. 建立基础元素（05:02）

5. 建立网格系统（10:39）

6. 创建组件（11:41）

7. AI 生成图像功能（25:33）

8. 制作交互原型（27:33）

🧩 1. Figma 简介

• 平台特点：基于浏览器的 UI 设计工具，支持多人实时协作。

• 优势：

  • 无需安装，跨平台使用。

  • 实时保存，自动版本控制。

  • 强大的社区资源和插件支持。

🖥️ 2. 熟悉工作环境

• 界面组成：

  • 顶部工具栏：包含选择、框架、形状、文本等工具。

  • 左侧面板：图层和资产管理。

  • 右侧属性栏：对象属性设置。

• 快捷键：

  • V：移动工具。

  • R：矩形工具。

  • T：文本工具。

  • F：框架工具。

🧱 3. 建立基础元素

• 形状工具：创建矩形、圆形、线条等基本图形。

• 文本工具：添加和编辑文本内容。

• 颜色填充：设置对象的填充颜色和边框颜色。

• 对齐与分布：使用对齐工具进行元素的排列和分布。

📐 4. 建立网格系统

• 添加网格：

  • 选中框架，右侧属性栏中添加布局网格。

  • 可选择列、行或网格类型，设置数量、间距和边距。

• 用途：帮助设计响应式布局，保持设计一致性。

• 

🧩 5. 创建组件

• 创建方法：

  • 选中元素，右键选择"创建组件"或使用快捷键 Ctrl + Alt + K。

• 组件优势：

  • 实现设计的一致性和可复用性。

  • 修改主组件，所有实例同步更新。

🔗 6. 制作交互原型

• 进入原型模式：点击右上角的"Prototype"标签。

• 创建交互：

  • 拖动连接线，从一个框架连接到另一个框架。

  • 设置触发条件（如点击）、动画效果和过渡时间。

• 

• 

• 预览原型：点击右上角的"Present"按钮，查看交互效果。

• 实现效果图如下：

首页Home界面

下方导航栏点击Experience跳转至对应界面

点击跳转至详细页面，点击左上角返回按钮，返回主菜单，形成逻辑闭环。

---

📌 总结

通过本教程，将掌握 Figma 的基础操作，包括界面熟悉、基本元素创建、网格系统设置、组件使用、AI 图像生成以及交互原型制作，为后续深入学习打下坚实基础。