Figma：所有你需要知道的
如果您从Figma从零开始，从图形设计切换 到UI，或者（像我一样）从Sketch切换，则本教程适合你
在过去的几年中，我全心全意地爱着Sketch，但我仍然是忠实的粉丝。但是，在团队协作和移交方面，Dropbox，Abstract，Craft，Zeplin和InVision之间开始了痛苦的跳跃和更新。无论我使用哪种组合，最终都会有些混乱，并导致额外的费用。原型制作也有些笨拙。Figma承诺将结束所有这一切，但并不令人失望。
好处：
它是免费的！（每个帐户最多两个用户和三个项目）
在Mac和PC上运行（仅在Mac上为Sketch）
实时团队协作，
你可以导入Sketch文件（但是请注意，您不能导出到Sketch！）
Mac和PC的集成开发人员交接/规格Spec
梦幻般的团队库/设计系统，真实的唯一来源
集成式高质量原型制作
坏处：
你需要在线上班。但是，您可以在本地保存文件，进行处理，然后稍后再次添加。
1.入门
1.1获取Figma
转到figma.com，注册并按照说明进行操作。一分钟后，你就可以开始了
登录并准备开始
你可能会注意到，Figma允许您创建团队和项目，我将在稍后介绍，现在，只需在任意位置（从菜单或cmd + N）创建一个新文件即可快速入门。你可以稍后移动文件。
主屏幕概述
与Sketch不同，Figma的文件不是存储在本地计算机上，而是基于云的。你可以随时随地通过浏览器访问所有工作。我推荐使用适用于Mac和PC的Figma App，但你不一定需要它。
缺点：你需要互联网。但是，你可以事先将文件下载到应用程序以脱机工作。
1.2导入旧的Sketch文件
Figma可让您快速准确地导入草图文件。只需将Sketch文件拖放到Figma画布上。做完了！你将找到所有图层并进行适当设置。
将Sketch文件拖放到屏幕上将草图文件到屏幕上
缺点：你无法将单个项目从Sketch复制和粘贴到Figma（可以，但是它们会转换为图像）。因此，即使你只想要一个按钮，也需要从Sketch导入整个文件。
更新：感谢Sevikpar指出，如果右键单击单个项目并将其复制为SVG，则可以从Sketch复制单个项目！
tip提示：我建议从sketch导入时figma app,因为您将无法在浏览器中呈现本地字体，并且会弄乱你的文件。
2.1设置新框架（又称画板）
如果你使用了Sketch，那么你将对此非常熟悉。按A或F在右侧的属性面板中查看所有框架选项，然后选择要使用的尺寸或简单地绘制自己的框架。与Sketch中一样，你可以以1倍（即实际像素大小）工作，因为调整大小时不会损失质量。你仍然可以导出可能需要的任何更大尺寸的资产。
按“ F”设置新框架按“ f”设置新的框架
与传统的画板不同，你可以将框架彼此嵌套。这使你可以创建相互交互的更复杂的设计。稍后再详细介绍。
2.2网格和布局列
对于移动设备，可以使用标准的8点网格。对于Web，它与间距无关，而与布局网格有关，因此，你可以从安全的一面开始使用流行的12引导网格。或根据我的个人喜好（自定义CSS网格）进行更新。最好事先与开发人员联系，并商定要使用的设置。
在右侧的网格属性菜单中调整网格。你可以从网格切换到列或行，还可以使其固定或流畅，并设置边距和装订线以满足你的需求。
创建网格，列和行
Figma中关于网格和列的妙处在于，你可以设置多个网格并将其存储为您的样式（我们将在以后深入讨论样式）。这是一个方便的功能，用于使布局适应各种设备，与团队成员共享布局或在其他项目中简单地重复使用它们。
tip：使用Ctrl+G切换可见性。
2.3图层和组
与Sketch一样，在屏幕的左侧，您可以找到“图层”面板。
左侧的“图层”面板
图层→添加的每个新元素都会自动创建一个图层。你可以通过拖放来重新排列图层。
分组图层→确保将图层分组（选择图层，然后按cmd + G）以使文件井井有条。它还可以帮助你跨帧快速移动和复制这些组。要在croup中选择一个元素，请按cmd，然后单击该项目。
页面→您可以设置设计的不同部分或区域。没有关于什么或如何使用它们的规则。我通常会有单独的页面，用于混乱的头脑风暴，线框图和最终版本的交互。
资产→你的组件保存在此处，您将在本节中找到库按钮（稍后将详细介绍库，组件和实例）
嵌套框架→在Figma中，你也可以嵌套框架。在进行结构设计和原型制作时，这很方便。
2.4矢量形状
Figma使用一种称为Vector Network的方法，可以创建复杂的形状。再见插画家！
用Figma创建形
对于默认形状，请从顶部菜单中选择，或者简单地单击R（矩形），L（直线）或O（椭圆）并开始绘制形状。按住Shift键以保持比例不变。每个形状都会自动创建自己的图层。
要制作自己更复杂的形状，请点击P或从顶部菜单中选择笔。完成后，只需按Enter。无需连接和关闭路径！真好！你可以在设计过程中随时通过右侧的属性菜单更改属性并控制矢量形状。如果你想了解更多信息，矢量网络非常强大。我建议从Design+Code深入学习该课程。
注：如果你是新手，矢量可缩放并可以以任何大小导出，但文件依然很小。它们是简单形状，按钮，图标，徽章和各种简单插图的理想选择。
2.5图片
将图像拖到你的工作区。如果你习惯于素描，这里就是你需要适应新格式的地方。在Figma中，图像始终放置在形状（如蒙版）内部。要更改图像的行为，请转到右侧属性窗口上的“填充”，然后打开图像属性。
Figma中的图像
在下拉菜单中，您可以选择：
填充→图像将填充容器。
适合→当我们调整大小时，图像将不会被裁剪或隐藏
裁剪→将图像裁剪为所需的尺寸和选择。请注意，你不会像在Photoshop中那样丢失图像的其余部分，而只是遮盖图像。
平铺→根据需要重复原始图像，您可以调整平铺的大小。
此外，Figma允许调整颜色和饱和度等属性。请注意，它们始终是可调整的，并且你不会随时丢失原始图像属性。
注意：你也可以用图像填充现有形状。单击形状，转到“填充”，然后从下拉菜单中选择“图像”，否则将设置颜色。
注意：如果你不熟悉此项，请注意你需要拥有或购买所有图像的权利。你还可以使用免许可证的图像，我最喜欢的页面是unsplash,高质量的惊人图像，甚至还有figma插件。
2.6版式
Figma预装了Google字体，太棒了！如果你更喜欢使用本地字体，则需要安装 Font Helper或figma桌面应用程序。另外，请确保其他所有访问该文件的人都安装了相同的字体。
按T，以绘制文本窗口，或单击并开始键入。你可以在右侧的属性菜单上设置所有文本属性。
Figma中的文字
一旦我们稍后讨论自动调整大小，文本框的行为（例如自动宽度，自动高度和固定大小）将变得很重要。
tip: 如果你是web和应用程序设计的新手，请确保你的复制文本不小于16像素，最好将像素设置为18像素。根据你的字体，我还建议在行高上增加一些以提高可读性。
3.样式
样式使您可以保存并重新应用属性。这样，巨大的文件可以立即更新。可以为颜色，文本，网格和诸如阴影的效果创建样式。
要查看所有使用的样式，请单击框架旁边的灰色背景，它们将显示在右侧的属性菜单中
3.1创建颜色样式
Figma中的颜色和渐变样式非常棒，因为你可以设置一种样式，然后在文本，填充和轮廓Figma中的颜色样式
创建形状
将填充更改为所需的颜色值
单击包含颜色样式的正方形符号
单击“ +”添加课程。做完了！
tip:命题颜色时，最好在使用后调用，而不是颜色本身。例如使用高光色而不是橙色。
3.2创建文字样式
与Sketch不同，Figma中的文本样式属性仅存储字体系列，大小，行高和interval。这样就可以使样式库保持美观和简短，因为无需为另一种颜色或本身的对齐版本复制样式。
设置文本样式与颜色样式几乎相同：
Figma的文字样式
单击你想要制作样式的文字
在右侧的属性菜单上，单击样式正方形图标
单击+并为您的样式命名
要将样式添加到现有文本中，只需单击文本，然后通过样式方框从右侧菜单中选择所需的样式。
添加样式后，你还可以通过同一菜单更改属性或分离样式。
️
tip:命名文本样式时，最好在使用后调用，例如“H1”或“paragraph”“quote”，而不是有关字体或大小的特定描述。这样，你始终可以调整字体而无需重命名。
3.3 更多样式
Figma并不止于此。网格也可以保存，共享和重新用作样式。
网格也可以被保存，共享和重复使用作为样式。
Figma中的网格样式
此外，还有效果，例如阴影，内部阴影，图层模糊和背景模糊：
Figma中的效果样式
4.组成
组件是UI元素，可以在您的设计文件中重复使用。组件使你的设计（和以后的编程）保持一致，并允许轻松进行更新和缩放，从而节省了很多工作！
4.1创建可重用组件
选择对象，然后按屏幕顶部或cmd + alt + K的创建组件按钮。
在“图层”面板中，您将看到紫色的组件图标。您创建了一个主组件。
主组件和实例
如果现在复制此主组件，它将自动创建一个相同的副本，称为instance。主组件中的任何更改都将导致对所有实例进行相同的更改。
你可以在左侧“图层”旁边的“资产”选项卡中找到所有组件，也可以将它们拖动到框架上。
️️
tip: 从长远来看，你应该将figma组件与前端组件（例如ReactJS中的组件）对齐。最好与你的编程团队联系取得一致。
4.2交换和嵌套
组件实例可以嵌套在主组件内部。意味着你可以在组件内部，组件内部拥有组件（如果你观看了Inception，那么你会明白我的意思）。
交换嵌套组件
你可以使用右侧实例交换菜单来交换嵌套实例，也可以仅按住cmd + alt + option并将其从资产概述或团队库中拖放。
4.3覆盖
实例在大小和总体布局上始终遵循主组件，但是你可以更改实例的属性，例如 colour，text和outlines。
覆盖组件
请注意右侧属性菜单中的“还原”按钮，以防你要将其重置为原始状态。你也可以通过右键单击实例来分离实例。
4.5命名组件
如在Sketch中一样，使用“ /”来命名组件，例如，将“ share-icon”更改为icon / share。Figma将自动创建一个名为icon的父类别，该类别将使实例交换并实现梦想！
确保正确命名您的组件
顺便说一句，如果你在多个页面上都有Master组件，它们将按页面进行组织。
tip: 为使你的组件井井有条，请为每一个组新建一个框架，例如“按钮”或“表单”。现在，将主组件拖到哪里，你会发现在组件概述中找到了按字母顺序组织的所有内容。
5.自动版面
自动布局允许创建动态框架，这些框架会随着你更改其中的内容而增大或缩小。这是一项巨大的改进，因为它可以节省你大量的重新调整时间，还可以让你一键检查设计是否与实际内容一起很好地工作。
5.1将图层更改为自动布局
在Figma中自动布局
输入您的内容
shift + A会在文本层周围使用垂直和水平填充自动创建一个新的自动布局框架。你可以在右侧的自动布局属性菜单中调整这些值。
现在更改内容，你将看到按钮自动调整大小。
5.2嵌套自动布局
可以嵌套自动布局框架，将水平和垂直布局属性组合在一起以实现引人注目的界面设计。
在Figma中嵌套自动布局
选择对象，再次单击shift + A，自动布局框架现在是父框架内的子框架。
您可以在右侧的属性菜单上选择垂直或水平分布以及空白。为防止文本框架沿一个方向生长，请确保选择固定为或高度。
提示：你可以仅移动图层即可在父帧中交换子帧的位置。相当不错的功能。
注意：任何自动布局框架也可以另存为组件。到时，滚动溢出将不适用于自动布局；这与原型相关。你可以通过将自动布局框架放中来解决这个问题。
6. Figma中的原型
Figma为您的网络和应用程序设计提供了出色的原型制作。你将不需要其他任何工具。
6.1建立原型
选择一个框架，然后在右侧的属性菜单上单击“原型”。单击“原型设置”，然后选择要设计的设备。现在，点击右上角的播放按钮，即可查看你的设计在运行中。你也可以将Figma Mirror应用程序下载到手机上，以在设备上进行实时预览。
原型菜单
6.2连接画面
确保你在右侧的“原型”菜单中。请注意，所选元素周围有一个带有蓝色小圆圈的蓝色框。单击并按住该圆圈。如果拖动，会出现 一个可以与另一个框架连接的手柄。
连接框架，固定接头
在右侧的属性面板中，你可以选择动作（滑动，单击，鼠标悬停等）和动画类型（移入，推入，滑出等）。
6.3。溢出行为
除了垂直滚动之外，Figma还提供了其他非常逼真的溢出行为
溢出行为
水平滚动→选择所有元素并将其分组。现在绘制一个所需大小的框架，将其移动或复制到内部，而隐藏溢出。在下拉菜单中，选择水平滚动。
像Google地图一样平移，→画一个框并添加图像。在溢出行为中，选择水平和垂直滚动。
修复元素→要使标题或按钮具有粘性，请确保已选择“修复位置”（在右侧属性菜单的“设计”>“约束”
中）
6.4智能动画
Smart Animate会寻找匹配的图层，以识别差异并为原型中的帧之间的图层设置动画。这使你可以创建功能强大的原型。但是，它比本教程要先进一些，我建议你深入观看Figma团队的视频。掌握Smart Animate之后，你很可能不需要任何其他原型制作工具。
7.与他人共享和合作
7.1演示模式
按菜单右上角的播放图标可在新选项卡上打开演示屏幕，使您可以单击所有框架。包括所有原型，对于移动设计，它将添加设备。它带有评论和全屏模式以及易于共享的链接。
演示模式
7.2创建团队和项目
Figma上的团队可以与他人合作或简单地组织您的工作。你可以邀请成员，添加项目并存储特定的库。
要创建团队，只需点击Figma概述上的“创建团队”按钮，然后按照说明进行操作即可。请注意，使用不同的付款计划，你的团队将变得更加强大。
Figma中的团队，项目和文件
团队→一组人员，例如设计师，开发人员，撰稿人等。
项目→将相关文件保存在一起。
文件→单个设计文件，这是实际设计的位置
注意：你可以随时在项目和团队之间移动文件。
7.3图书馆
在一个团队中工作时，我们要保持所有组件和风格的最新更新一个特别的地方是所有团队成员都可以访问-一个所谓的单一数据源。该FIGMA团队库处理这种出奇的好，将成为您设计系统的骨干。
注意：设计系统是当今UX/UI的重要组成部分，值得花一些时间来熟悉概念和不同的方法。
坏消息：免费计划中，你只能将颜色样式发布到团队库。要保存组件，你需要Pro计划。
在Figma中共享库
创建团队库：
在左侧菜单上，转到“资产”，然后单击书本图标。
新闻发布
给你的出版名; 这将保存一份副本（基本上是版本控制，很不错）
在团队中打开一个新的干净文件
转到“资产”选项卡，单击库图标并激活您刚创建的库。做完了！
更新团队库：
当改变主成分或风格，FIGMA会提示你更新球队库。更新后，所有其他团队成员都会收到有关可用更新的通知，他们可以查看和更新单个组件或一次更新所有内容。
注意：共享库非常强大，可以成为设计过程的基础。这是第一个开始，但是如果你打算在工作中使用团队库，那么有很多资源可供参考，它们涉及团队协作的深入最佳实践。
7.4与其他设计师和开发人员共享
通过单击顶部菜单中的蓝色共享按钮邀请他人，然后输入电子邮件地址或复制链接并发送。
在Figma中共享文件
其他设计师 和撰稿人→设置为EDIT MODE。提供对所有功能的访问。你将看到其他用户的化身和光标，并且可以在同一文件中实时协同工作！
编辑模式
开发人员→设置为VIEW MODE。这将向他们显示所有规格（切换CSS，iOS和Android代码）。他们还可以访问正在使用的原型，并可以下载所需大小的任何资产。
注意：如果你在仍在处理文件的同时与开饭人员共享，则最好在设计中设置一个页面，将页面明确标记为开发人员的最新整理版本，以避免混淆。
7.5出口资产
如上所述，在Figma中，即使仅授予“查看”权限，也可以直接从共享文件中以任何大小导出所有资产，因此，作为设计者，你无需自己导出任何内容。但是，如果你希望在任何情况下都是这样的：
在Figma出口资产
选择对象
单击右侧属性菜单上的导出
定义如何导出和完成！
注意：请记住使用“/”例如image/home/imagename，iconiconname,它们会自动将导出内容分类到文件中。
备忘单，什么时候导出什么：
SVG→用于矢量文件，例如徽标和图标。SVG可扩展到任何大小而不会降低质量。确保导出png后备广告。
Jpg→用于各种不透明的矩形图像和照片。确保提供实际大小（1x）和视网膜分辨率（2x）。
Png→如果图像或照片需要 透明背景，则使用。还需要1x和至少2x导出。
1x，2x → 1x是实际大小，是2x大小的两倍。视网膜显示器 上的清晰图像需要2倍。请注意，2x，3x等带有@ 2x，@ 3x后缀，在编码时与识别和调用正确的图像有关。
w＆h →您也可以设置宽度，例如300w =宽度为300px的图像。高度= h相同
pdf→如果要导出整个页面，例如用于邮寄或添加到演示文稿中并且需要高质量，则使用pdf 。
