在这篇文章中，我们将学习在 Figma 中调整元素和群组大小的几种不同方法（除了默认的方法外）。我们还将学习如何在不移动框架内元素的情况下调整框架的大小。

在 Figma 中，除了默认方法外，还有其他方法可以调整元素的大小。因此，如果使用默认方法不能得到你所需要的结果，请不要着急。

首先我们来看看默认方法，以便你熟悉它，然后我们再看看调整元素和组的其他方法。

如何在 Figma 中调整大小 - 默认方法

在 Figma 中调整大小的默认方法是点击并拖动。要用默认方法调整一个元素的大小，你只需选择你的对象，并使用任何一个转换控件，调整其大小，直到你满意为止。

这样做时，按住键盘上的 SHIFT 键将有助于调整比例。

有时，默认方法可能对某些元素不起作用。在这些情况下，点击和拖动可能会导致对象被扭曲。那么，你可以怎么做呢？

如何在 Figma 中用属性调整对象的大小

要真正精确地调整一个对象的大小，请进入位于文件右上方的属性检查器，找到高度和宽度字段，输入你选择的数值。你也可以用鼠标光标拖动这些数值。你总是可以用这种方法来获得你所需要的确切比例，比如 140×140、100×50，等等。

记住，你在属性字段中输入的任何数值都会反映在你的框架中，所以，选择不会扭曲你的框架的比例很重要。例如，一个150 x 20的元素很可能看起来失真。

你可以随时试验各种数值，直到你把元素的大小调整到你满意的程度。这一切都取决于你自己的需求。

如何在 Figma 中使用缩放工具调整物体的大小

Figma 缩放工具位于屏幕的左上角。要使用缩放工具，请选择你的框架，点击缩放工具，并使用缩放控制拖动。

这个工具在你处理调整图标的大小时特别有用。有些图标在你试图调整它们的大小时，会变得不成形。缩放工具有助于确保你的元素或框架的元素不被扭曲。

缩放适用于文本对象、框架、组件等。你可以随时使用缩放工具来调整元素的大小。

如何在 Figma 中用键盘快捷键调整对象的大小

要用键盘快捷键调整对象的大小，请选择该对象，按住 CTRL，并使用方向键来调整对象的大小。你可以一次增加或减少 1px 的宽度或高度。你可以在任何情况下使用键盘快捷键。

提示：同时按住键盘上的 SHIFT 键可以加快调整大小的速度，每次调整 10px。

如何在 Figma 中调整大小而不移动框架内的对象

有时，在试图调整包含输入字段的框架的大小时，你会发现一些对象由于受到限制而随框架一起移动。

当然，这并不是我们想要的结果。要在调整大小时忽略一个元素的约束，请在拖动时按住 CTRL。另外，在拖动时按住 Ctrl + Alt 将按比例调整元素的大小。

小结

知道如何调整元素的大小可以真正帮助你为你的设计创建赏心悦目的框架。

祝你在 Figma 设计之旅上好运！

通过学习使用 Figma，你将迈出用户界面设计和用户体验设计的第一步。在你为自己或者为你自己的公司创建一个优秀的作品时，这些技能将非常有用。

在这个 Figma 入门教程中，我将使用来自 Frontend Mentor 的真实项目网站，我们将在 Figma 中重新创建该网站。通过构建项目来学习是巩固知识的好方法，因此我建议你下载素材并跟着教程动手创建。Figma 入门教程视频版本。

在我们探索 Figma 的不同功能时，我将把这个教程分成很多部分，包括：

• 帐户设置
• 设计文件
• 设计素材
• 如何开始——基础知识
• 框架
• 网格列和行
• 形状
• 导入图像
• 标记和分组
• 文本
• 导航栏
• 按钮设计
• 标题和缩放
• 附加文本设置
• 主页横幅和 Figma 层
• 组和部分
• 字体和 Figma 颜色
• 文本行高和间距
• 对齐和捕捉
• 使用形状和图像进行遮罩
• 复制组和节
• 更新部分
• 颜色选择器和复制部分（续）
• 颜色选择和选择正确的色调
• 推荐区
• 自动布局
• 自动布局选项
• 自动布局对齐
• 自动布局内容
• 图库图片
• 调整图像大小
• 页脚
• SVG 颜色和叠加编辑
• 自动布局菜单页脚
• 图层工具栏、隐藏和锁定
• 原型查看器
• 框架和页面
• 原型交互
• 原型交互导航到页面
• 共享测试和预览原型
• 导出页面
• 导出组或部分

在本文中，我将简要概述本教程的一些主要部分，以便你可以开始在 Figma 中进行设计。

介绍

让我们首先在 Figma 网站上创建一个帐户。你可以在 Figma.com 执行此操作。

只需注册一个新帐户（电子邮件或 Google 登录）——完全免费。

接下来，我们需要获取要用于该项目的设计素材，我们将从 Frontend Mentor 获取这些素材。 你可以在这里下载它们。

我们将构建第一个草稿页面。看看我们将在下面使用的默认设计布局。选择 +，或在右侧创建一个新的设计页面。

如何在 Figma 中制作框架

首先，我们将创建一个框架，就是一个页面，我们在其上进行设计。你可以根据需要调整框架的大小。

此示例将是一个网站，因此我们将选择桌面框架——但你也可以创建移动应用程序框架，甚至自定义框架。

• 从顶部菜单中选择框架工具
• 在右侧面板上选择框架大小

如何在 Figma 中添加网格和列

在我们开始设计之前，你需要添加网格来帮助你保持页面内容对齐的一致性。

你可以向框架添加网格并对其进行自定义。例如，我通常更喜欢 12 个网格，因为这是网站开发的默认设置。

• 选择要网格化的框架
• 选择右侧面板上的布局网格
• 选择列和 12 个单位

如何在 Figma 中使用形状

使用 Figma 中的形状和元素创建正方形、圆形、线条等。这些是在页面上创建设计的基础。

我将从一个简单的矩形开始。我们将使用它来创建主页顶部的横幅部分。

• 选择方形工具
• 创建一个正方形
• 开始塑造和调整它的大小

如何在 Figma 中添加图片

你可以将在线资源或本地的图像添加到你的页面。图片是设计网站的重要组成部分，尤其是对于横幅部分。

让我们添加一个 logo 作为我们将添加到屏幕左上角的第一个图像。

• 从本地计算机拖放图像
• 从形状图像上传选项导入图像
• 调整图像大小并将其放置在设计上

如何在 Figma 中为设计添加文本

要向设计添加文本，请选择文本工具并将其放置在页面上。字体将默认为 Roboto，但你可以在任何阶段更改字体系列、大小和颜色。

在本例中，我们将使用右侧面板来更改字体的颜色和大小，以及稍后的字体系列。

• 选择文本工具
• 添加“关于”文本作为导航的开始
• 确保尺寸和颜色为 24 和白色

如何在 Figma 中标记元素和创建组

在 Figma 中处理大量图层可能会让人感到困惑，因此在创建元素后立即标记所有元素。更好的是使用标签（例如“横幅背景”或“导航栏”）对不同的部分和形状进行分组。

• 选择元素并右键单击以进行分组，或按 Ctrl + G
• 为组命名
• 将页面的每个部分放在相应的组内，以在页面变大时提高可读性

总结

Figma 入门很容易，但要充分发挥它的潜力，还有很多东西需要学习。有了形状、图像和文本的基础知识，你就可以轻松开始制作网站原型、设计移动应用程序等等。

如果你想更深入地了解这些基础知识，我建议你观看并关注整个视频教程，该教程更深入地介绍各个方面。

你可以在这里查看设计的完整效果。

这整个过程是我在自己的频道上尝试教授的内容的一部分，也是我正在编写的名为 Enhance UI 的设计课程/书籍的一部分。我的目标是帮助开发人员了解设计的基本原理。在这里查看我的书籍。

我希望你喜欢这篇文章。如果你不知道我是谁，我是来自澳大利亚的 Adrian。我在 Twitter 和 YouTube 上有一个频道，所以如果你想更多地了解我或喜欢我的内容，请随时查看。😉

• YouTube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

原文：What is Figma? A Design Crash Course [2021 Tutorial]，作者：Adrian Twarog