Figma入门指南（上）
Figma入门指南
纵观近几年的UI工作，我从最初的PS到Sketch，再转战到如今的Figma。的确这个软件，让我的工作协作越来越方便，下面给大家简单介绍下Figma软件。
优点：
它是免费的！（每个帐户最多两个用户和三个项目）
在Mac和PC上运行（仅在Mac上为Sketch）
实时的团队协作
可以导入Sketch文件（但是请注意，您不能导出到Sketch！）
Mac和PC的集成开发人员交接/规格Spec
集成式高质量原型制作
1.如何使用Figma
1.1获取
进入figma.com，注册并按照说明进行操作。一分钟后，您就可以开始工作啦！
不过，Figma的文件不存储在本地计算机上，而是基于云服务器上。所以，我们在做设计的时候，如果要使用web上的Figma，这需要我们有良好的互联网网络环境。这时候，我建议可以在电脑上下载个Mac或PC的Figma App，我们就可以脱机工作啦！
1.2导入Sketch文件
直接将Sketch文件拖入Figma画布上就好啦！
缺点：我们无法直接将单个的项目从Sketch复制和粘贴到Figma（如果右键单击单个项目并将其复制为SVG，则可以从Sketch复制单个项目）。因此，即使一个按钮，我们想要源文件，也需从Sketch导入整个文件。
2.用Figma设计
2.1 建立画板
与Sketch中一样，单击A或F可以直接建立画板。
2.2网格和布局列
对于移动设备，可以使用标准的8点网格。对于Web，它与间距无关，而与布局网格有关，因此，我们可以直接使用流行的12列引导网格。或根据我的个人喜好（自定义CSS网格）进行更新。最好事先与开发人员联系，并商定要使用的设置。
在右侧的网格属性中调整网格，自行调整行、列，或者设置边距和装订线等需求。
Figma中关于网格和列的妙处在于，您可以设置多个网格并将其存储为您的样式。这是一个方便的功能，用于使布局适应各种设备，与团队成员共享布局或在其他项目中简单地重复使用它们。
Tip️提示：使用ctrl + G切换可见性。
2.3图层和组
与Sketch一样，在屏幕的左侧，您可以找到“图层”面板。
图层→添加的每个新元素都会自动创建一个图层。您可以通过拖放来重新排列图层。
分组图层→确保将图层分组（选择图层，然后按cmd + G）以使文件井井有条。它还可以帮助您跨帧快速移动和复制这些组。要在croup中选择一个元素，请按cmd，然后单击该项目。
页面→您可以设置设计的不同部分或区域。没有关于什么或如何使用它们的规则。我通常会有单独的页面，用于混乱的头脑风暴，线框图和最终版本的交互。
资产→您的 组件 保存在此处，您将在本节中找到库按钮（稍后将详细介绍库，组件和实例）
嵌套框架→在Figma中，您也可以嵌套框架。在进行结构设计和原型制作时，这很方便
3.自定义样式属性
3.1创建颜色样式
Figma中的颜色和渐变样式非常棒，因为您可以设置一种样式，然后在文本，填充和轮廓上重新使用它！您可以在设计过程中随时通过右键单击样式来更改和删除样式。
创建和使用颜色样式：
️️Tip：命名颜色时，最好在使用后调用，而不是颜色本身。例如。使用“突出显示颜色”而不是“橙色”。
3.2 创建文字样式
与Sketch不同，Figma中的文本样式属性仅存储字体系列，大小，行高和interval。这样就可以使样式库保持美观和简短，因为无需为另一种颜色或本身的对齐版本复制样式。
设置文本样式与颜色样式几乎相同：
单击您想要制作样式的文字
在右侧的属性菜单上，单击样式正方形图标
单击+并为您的样式命名
要将样式添加到现有文本中，只需单击文本，然后通过样式方框从右侧菜单中选择所需的样式。
添加样式后，您还可以通过同一菜单更改属性或分离样式。
️️Tip：命名文本样式时，最好在使用后调用，例如“ H1”或“ paragraph”“ quote”，而不是有关字体或大小的特定描述。这样，您始终可以调整字体而无需重命名。
3.3 更多款式
网格也可以保存，共享和重新用作样式。
此外，还有效果，例如阴影，内部阴影，图层模糊和背景模糊：
4. UI组建定义
UI组件是设计的重要元素，可以在我们的设计文件中重复使用。UI组件使我们的设计（和以后的编程）保持一致，并轻松进行更新和统一修改，从而节省了很多工作时间。
4.1创建可重用组件
选择对象，然后按屏幕顶部或cmd + alt + K的创建组件按钮。
在“图层”面板中，您将看到紫色的组件图标。即创建了一个主组件。
如果现在复制此主组件，它将自动创建一个相同的副本，称为instance。主组件中的任何更改都将导致对所有实例进行相同的更改。
我们可以在左侧“图层”旁边的“资产”选项卡中找到所有组件，也可以将它们拖动到框架上。
4.2交换和嵌套
组件之间我们可以嵌套在主组件内部。
我们可以使用右侧实例交换菜单来交换嵌套实例，也可以仅按住cmd + alt + option并将其从资产概述或团队库中拖放。
4.3覆盖
复制组件在大小和总体布局上始终遵循主组件，但是我们可以更改它的属性，如 colour，text和outlines。
请注意右侧属性菜单中的“还原”按钮，以防您要将其重置为原始状态。我们也可以通过右键单击实例来分离组建。
4.5命名组件
与在Sketch中一样，使用“ /”命名组件，例如，将“ share-icon”更改为icon / share。Figma将自动创建一个名为icon的父类别。
顺便说一句，如果您在多个页面上都有Master主组件，它们将按页面进行组织。
️️Tip：为使您的组件井井有条，请为每个组新建一个框架，例如“Buttons按钮”或“Forms表单”。现在，将主组件拖到那里，我们会发现在组件中找到了按字母顺序组织的所有内容。
