基本项目设置 | 适合初学者的 Figma #3
已发表: 2022-09-02在本文中，我们将讨论 Figma 中的基本项目设置，这是您开始设计之前需要了解的全部内容。 我们将解释框架、布局网格和标尺是什么。 请继续阅读以了解更多信息。
Figma 中的基本项目设置 - 目录：
- 框架
- 布局网格
- 统治者
- 单击画布以创建尺寸为 100×100 的默认框架
- 在画布中单击并拖动以创建具有自定义尺寸的框架
- 使用右侧边栏中的下拉菜单选择框架预设
- 登录屏幕（登录）
- 主页（首页）
- 产品登陆页面（产品）
- 您甚至可以在开始设计和使用现成的网格布局（如果您的库中有）或创建自己的网格布局之前启用网格视图，
- 您也可以先开始创建设计，然后根据设计的元素设置网格。
- 计数 2（列数）
- 边距 20（列距屏幕边缘的距离）
- 排水沟 30（列之间的距离）
- Figma 简介
- Figma 界面 - 基本信息
- Figma 中的基本项目设置
- 如何在 Figma 中创建形状？
- Figma 中的排版
- Figma 中的库
- Figma 中的原型设计
- Figma 中的协作工具
- 最好的 Figma 插件
- 如何使用 Figma？ 3 不寻常的方式
Figma 中的基本项目设置
首先，您需要选择画布的一个区域来创建您的设计。这就是框架工具的用途。 您将在工具栏中找到它。 激活框架工具后，您有几个创建框架的选项。
添加并选择框架后，您可以在“属性”面板中访问它。
a)画布的位置（X 和 Y）——您可以在此处指定画布中框架在水平 (X) 和垂直 (Y) 轴上的位置。
b)对象的尺寸（宽度和高度） - 在这里您可以更改框架的大小
c)约束比例- 它允许您在调整大小时保持框架的比例。 这样你可以改变框架的高度或宽度，第二个参数会自动调整。
d)调整大小以适合- 此功能可让您调整框架大小以适合其内容。
有用提示：您也可以手动更改框架的大小：抓住框架的边缘或角落（光标将变为黑色双箭头），然后拖动以获得首选大小。
e)纵向和横向- 在这里您可以将框架的方向更改为垂直或水平
f)旋转——它可以让你调整框架的角度
g)拐角半径——借助此功能，您可以圆角框架的拐角以创建更柔和的边缘
h)独立角- 独立角设置可让您调整每个角的角半径。
i)剪辑内容——它将允许您隐藏超出框架边界的任何对象
j)自动布局——它可以让你创建响应式框架
k)布局网格- 此功能有助于创建结构化的用户界面
l)填充——使用这个选项可以让你用颜色、渐变或照片填充你的框架
m)描边- 它有助于将描边添加到框架中。 您还可以使用省略号图标下的高级笔触设置。
n)效果- 在这里您可以为帧添加阴影或模糊。 单击效果设置图标以调整阴影的设置。
o)导出– 在这里您可以将框架导出为以下格式：PNG、JPG、SVG 和 PDF。
在画布中的每一帧上方，都会显示其名称。 要更改它，请单击它两次。 您可以随心所欲地复制框架及其内容并将它们粘贴到画布上，次数不限。
Task.3.1从选择合适的框架尺寸开始处理项目。
有用的提示：如果你不知道你的框架应该是什么尺寸，一个不错的选择是使用最流行的屏幕尺寸之一。 获取更多信息，请访问 https://gs.statcounter.com/screen-resolution-stats。在本教程中，我们将设计一个电子商务移动应用程序，因此让我们选择智能手机最常用的分辨率之一——360×640 像素。
我们将一起准备3个项目
添加框架后，立即复制它，并正确命名每个屏幕，以保持文件的组织。
布局网格
布局网格是水平和垂直线（列或行）的系统，可帮助您保持元素在框架中精确对齐。 正确设置的网格肯定会使您的工作更轻松并加快整个设计过程。 有两种方法可以在您的设计中设置布局网格：
有用的提示：如果您是新手设计师，我们建议您将布局网格应用于任何项目。 没有什么比完全空荡荡的工作空间更糟糕的了。
您可以在“属性”面板中将布局网格添加到活动框架。 您有 3 个选项：网格、列、行。 您可以同时选择几个选项。
您可以在布局网格设置面板中调整每个网格的设置。 您可以通过单击眼睛图标随时打开或关闭网格的可见性。
有用的提示：如果您不知道在项目中选择哪个布局网格，您可以使用 Grid System 插件，它会为您完成。
任务 3.2。 在项目中设置布局网格。 出于本项目的目的，我们选择了 Columns 并设置了以下值：
统治者
标尺是另一个有用的功能，可帮助您对齐文件中的元素并使其保持有序。 要打开 Rulers 视图，请单击 Main 菜单，然后单击View and Rulers 。 
标尺可以在画布的顶部和左侧看到。 使用此功能，您可以创建垂直和水平线（参考线）——单击并按住所选标尺，然后将光标移动到画布区域。 将出现一条细红线，您可以移动它。 您可以根据需要创建任意数量的指南。 您可以轻松删除不必要的行 - 只需选择该行（所选行将变为蓝色），然后单击Delete 。
任务 3.3。 尝试添加标尺。 它们在对齐元素时会很有帮助。
您刚刚了解了 Figma 中的基本项目设置。 另请阅读：人工智能辅助聊天机器人。
如果您喜欢我们的内容，请加入我们在 Facebook、Twitter、LinkedIn、Instagram、YouTube、Pinterest 上忙碌的蜜蜂社区。
作者：克劳迪娅·科瓦尔奇克
一个图形和用户体验设计师，可以将无法用文字传达的东西传达给设计。 对他来说，每一种使用的颜色、线条或字体都有其意义。 热爱平面设计和网页设计。