Figma 新手教程学习笔记
📺 视频地址：Figma新手教程2025｜30分钟高效掌握Figma基础操作与UI设计流程_哔哩哔哩_bilibili
🧭 课程结构
-
Figma 简介（00:38）
-
熟悉工作环境（01:49）
-
操作界面介绍（03:00）
-
建立基础元素（05:02）
-
建立网格系统（10:39）
-
创建组件（11:41）
-
AI 生成图像功能（25:33）
-
制作交互原型（27:33）
🧩 1. Figma 简介
-
平台特点：基于浏览器的 UI 设计工具，支持多人实时协作。
-
优势：
-
无需安装，跨平台使用。
-
实时保存，自动版本控制。
-
强大的社区资源和插件支持。
-
🖥️ 2. 熟悉工作环境
-
界面组成：
-
顶部工具栏：包含选择、框架、形状、文本等工具。
-
左侧面板：图层和资产管理。
-
右侧属性栏：对象属性设置。
-
-
快捷键：
-
V：移动工具。 -
R：矩形工具。 -
T：文本工具。 -
F：框架工具。
-
🧱 3. 建立基础元素
-
形状工具：创建矩形、圆形、线条等基本图形。
-
文本工具：添加和编辑文本内容。
-
颜色填充：设置对象的填充颜色和边框颜色。
-
对齐与分布：使用对齐工具进行元素的排列和分布。
📐 4. 建立网格系统
-
添加网格：
-
选中框架，右侧属性栏中添加布局网格。
-
可选择列、行或网格类型，设置数量、间距和边距。
-
-
用途：帮助设计响应式布局，保持设计一致性。
-
🧩 5. 创建组件
-
创建方法：
-
选中元素，右键选择“创建组件”或使用快捷键
Ctrl + Alt + K。
-
-
组件优势：
-
实现设计的一致性和可复用性。
-
修改主组件，所有实例同步更新。
-
🔗 6. 制作交互原型
-
进入原型模式：点击右上角的“Prototype”标签。
-
创建交互：
-
拖动连接线，从一个框架连接到另一个框架。
-
设置触发条件（如点击）、动画效果和过渡时间。
-
-
-
-
预览原型：点击右上角的“Present”按钮，查看交互效果。
-
实现效果图如下：
首页Home界面
下方导航栏点击Experience跳转至对应界面
点击跳转至详细页面，点击左上角返回按钮，返回主菜单，形成逻辑闭环。
📌 总结
通过本教程，将掌握 Figma 的基础操作，包括界面熟悉、基本元素创建、网格系统设置、组件使用、AI 图像生成以及交互原型制作，为后续深入学习打下坚实基础。