Module 03 · UI Design with Figma使用 Figma 设计用户界面

Images, Shapes, and Tools Figma中的图像、形状与工具

观看本视频后，你将能够：

解释 Figma 中的各种工具
描述 Figma 中图像的功能

Figma 简介

Figma 是一个多功能的设计工具，广泛应用于 UI/UX 设计，以及 Logo 和图标的创建。图像是 Figma 中的重要元素，帮助用户构建各种设计。你可以通过拖放或导入功能将图像添加到画布中，Figma 支持多种图像文件格式，如 JPEG、PNG 和 SVG。

Figma 中的工具

1选择工具 (Selection Tool)

选择工具 是 Figma 中的默认工具，用于选择和移动画布上的对象。

🎯 功能	📌 说明
选择与移动对象	点击选择工具图标或按下 V 键，拖动对象进行移动。选中的对象周围会出现一个边框，可以调整大小。
分组对象	可以将多个对象组合在一起，作为一个单元来操作。

快捷操作：使用 Selection Tool 轻松选择和移动对象。

2矢量工具 (Vector Tool)

矢量工具 用于创建矢量形状，如矩形、圆形、多边形和线条。

🎯 功能	📌 说明
创建矢量形状	选择矢量工具，按需绘制不同的图形和路径。
属性调整	可以调整填充颜色、描边颜色、粗细、圆角半径等。

使用方式：选择矢量工具后，通过点击画布创建起始点并继续点击绘制路径。你还可以通过点击并拖动创建曲线。

3文本工具 (Text Tool)

文本工具 用于在设计中添加和编辑文本。

🎯 功能	📌 说明
添加文本	选择文本工具后，点击画布并开始输入文本。
调整文本样式	可以调整字体、大小、颜色及其他文本属性，如加粗、斜体、下划线等。

创建文本框：点击并拖动创建固定宽高的文本框，开始输入文本。

4钢笔工具 (Pen Tool)

钢笔工具 用于创建各种形状和路径，从简单的线条到复杂的插图。

🎯 功能	📌 说明
创建路径和形状	点击画布创建路径的起点，继续点击创建线段，按住并拖动来创建曲线。
精确编辑	通过快捷键调整锚点，精准编辑路径和形状。

快捷操作：使用钢笔工具时，可以通过 缩放工具 来更精确地绘制曲线。

5铅笔工具 (Pencil Tool)

铅笔工具 用于快速手绘线条，快速勾画设计草图。

🎯 功能	📌 说明
自由手绘	点击并拖动在画布上绘制自由线条，适合快速草图绘制。
限制角度	按住 Shift 键，可以限制绘制角度。

编辑草图：使用 Selection Tool 来编辑铅笔工具绘制的路径。

6布尔运算 (Boolean Operations)

布尔运算是指用来组合、减去、交集或排除形状和设计的工具。

🎯 功能	📌 说明
形状组合	通过布尔运算，可以通过联接、减去、交集和排除操作来组合或修改形状。
应用场景	布尔运算非常适用于创建图标、logo 和其他需要精确形状的图形。

Figma 支持四种布尔运算：Union（合并）、Subtract（减去）、Intersect（交集） 和 Exclude（排除）。

7对齐工具 (Alignment Tool)

对齐工具 是 Figma 中强大的功能，帮助你精准地定位和排列设计中的对象。

🎯 功能	📌 说明
精准对齐	支持左对齐、右对齐、居中对齐、上下对齐、垂直分布等多种对齐方式。
对齐面板	使用对齐面板，精确设置对象在设计中的位置和间距。

对齐工具对创建 专业且精致的设计 至关重要。

8图像功能 (Images in Figma)

Figma 允许你轻松导入和编辑设计中的图像，支持常见的图像格式，如 JPEG、PNG 和 SVG。

🎯 功能	📌 说明
图像编辑	你可以调整图像的透明度、混合模式、裁剪和遮罩，控制图像在设计中的显示效果。
图像效果	你可以为图像添加阴影、模糊等效果，使其外观更精致。

图像是设计中必不可少的元素，可以有效增强设计的表现力。

课程总结

在本视频中，你学习了：

选择工具：选择和移动对象
矢量工具：创建矢量形状
文本工具：添加和编辑文本
钢笔工具：创建复杂的路径和形状
铅笔工具：手绘草图和线条
布尔运算：通过组合、减去、交集和排除形状，创建复杂的图形
对齐工具：精准排列设计中的元素
图像功能：导入、编辑和美化图像

🎨 掌握这些工具，提升你的 Figma 使用技能，创造出色的设计！ 🌟