我们必须了解对方工具的可能性和局限性，才能携手合作，所以让我向您展示设计方面的东西，以及您可能还不完全了解的所有Figma小宝贝。
1.我们在Figma中使用组件和变体
Figma 中的组件
在 Figma 中，我们可以设置可重用的 UI 组件并创建实例。**组件也可以被嵌套。**因此，我们可以遵循一个良好的原子设计路径。
提示。 通过true/false or yes/no ，您可以创建整个组件的切换。这是创建light/dark mode.我在Joey Banks的优秀的iOS 16 UI Kit for Figma中看到了这个设置。一般来说，这是我见过的最好的文件设置!
我们有道具!
组件属性是在2022年3月发布的。所以我想很多开发者还不知道在设计中使用它们的可能性。到目前为止，我们有文本道具，例如，交换和切换道具。当然，我们也可以把它们结合在一起。
设计和代码之间的机会
在命名和结构上使UI和代码组件保持一致
由于组件、变体和道具的使用，我们可以使我们的UI组件与代码组件保持一致。然而，要做到这一点，我们需要来自开发部门的结构、命名、行为等方面的信息。因此，请与我们坐下来，喝杯咖啡，并向我们展示你所拥有的或梦想建立的代码库。许多视频和教程展示了不同的团队如何处理这个对接过程。我让你去看兔子洞。
在 Figma 中快速链接 UI 和代码组件
如果您想不费吹灰之力就将组件链接到代码库，您可以简单地在 Figma 组件文档中添加一个链接和说明（有点隐蔽）。该链接将在检查选项卡中创建一个按钮，直接链接到，例如，代码中同一组件的 Github 部分。Figma 组件搜索也会拾取描述，这对大型系统来说很方便。
注意。 对齐组件是非常好的，但它也需要大量的努力，最重要的是需要维护，所以要在有意义的地方使用，例如设计系统。如果你只是设计一个单页的网站，你仍然使用具有干净和可扩展设计的组件，以及明确的构建块来进行编码，但它们不一定需要与代码对齐。这就像你不会建立一条流水线来简化制作蛋糕的过程，如果你只想为你的朋友烤一个生日蛋糕。但你仍然使用相同的基本原料。
2.我们在 Figma 中使用样式，但它们不是很聪明
Figma 中的样式
在 Figma 中，我们可以为颜色、文本、网格以及阴影或模糊等东西创建样式，并在我们的设计中重新应用它们。然而，这几乎就是全部了。
设计与代码之间的机会
Figma 代币插件可创建或连接现有的代币
正如你所看到的，Figma 样式是有点孤立的，不会相互影响。因此，您不能设置一个基本的字体大小来缩放，也不能适应缩放率。您只能设置一个固定的尺寸。此外，我们还没有针对间距系统的样式（目前）。不过，通过Figma Tokens插件，您可以在 Figma 中创建令牌并使用它们。而且更令人印象深刻的是，你可以连接并可以与代码标记对齐。请看创作者 Jan Six 的 文档（做得非常好）和这个精彩的视频。太神奇了！！。
3.我们可以设置和测试响应式设计!
这是个大问题!让我们一步一步地看下去。我们用于响应式设计的工具有以下几种。
我们在Figma中用于响应式设计的工具。
我们可以单独使用上述工具**，也可以不使用，或者将它们结合起来**。这在很大程度上取决于我们想要建立的东西。这没有什么对错之分。
从开发人员的角度来看，非常重要的一点是，我们在 Figma 中没有自动断点（我将在后面讲到如何处理这个问题）。
自动布局
自动布局真的很强大，但需要一些练习来使用（开始时会让你发疯，但要坚持下去！！）。它是（松散地）基于弹性框的，当你看到 "检查 "标签时，你会注意到。
结合网格和约束条件
最酷的是，一旦网格被应用到一个框架上，约束就会把这些列作为父框架。所以我们可以通过结合网格和约束来设置非常好的、直接的响应行为。
结合网格、约束和自动布局元素
因此，即使我们不能在一个框架内结合自动布局和约束，我们也可以在父框架内放置自动布局元素/物质，然后在它们周围使用约束。这样一来，内容就可以很好地重新洗牌，保持所有设定的参数。
我们可以手工制作我们自己的断点!
然而，我们可以手工创建我们自己的断点!因此，有了所给的技术信息，我们就可以在Figma中设置视觉表现。我在这里只是随便用了一个断点的例子。
然后我们可以在这些范围内放置我们的自动布局组件，看看哪里需要调整。在我的例子中，我在断点S ，从移动端的全流体屏幕切换到一个固定尺寸的覆盖层。
注意。 有时，你可能会在几个断点上使用同一个网格，那么只需注意，例如，网格。S+M （从576到992）。这样，你就可以随时把它一分为二，以备将来页边距或其他方面的变化。
响应式排版是不存在的
不幸的是，在CSS中自动启动的媒体查询需要在Figma中手工添加。我们可以设置一个响应式排版，然后需要确保在断点改变时改变文本样式（如果适用）。这有点烦人，而且充满了潜在的错误，我知道。
如果您想使用流体排版（VW单位，clamps() ，calc() ，你的名字），这最好在浏览器中测试，因为我们无法用Figma模拟流体文本行为。不过，我们可以选择一个特定的最小和最大屏幕尺寸，以了解特定宽度下的大致情况。
断点插件
然而，要在一个令人兴奋的话题上结束。一旦您费尽心思响应性地设置了您的组件和页面，您就可以把它们夹在断点插件中，得到一个真正可爱的设计整体概念。
5.我们也可以用实际数据来工作（某种程度上）。
Figma不能连接到经典数据库，但我们可以通过一些准备工作使用实际数据。你可以使用 谷歌表格同步插件，只需在那里添加实际内容。通过简单地用#columnname来命名我们的图层，运行该插件，添加链接，然后点击同步。然后砰的一声，你就可以了。还有一个用于Airtable和NotionSync的插件，工作方式基本相同。
一般来说，我们应该用不同的内容来测试组件，如理想状态、少量内容、大量内容、空、错误和加载状态（如适用）。我做了一个组件的检查表，你可以在发布前使用。
用实际的数据工作可以让我们很好地了解潜在的缺点。我们还可以看到数据库是否需要一些梳理，或者图片库是否需要一些爱和关注，以实现品牌承诺。
6.你可能想向我们指出软网格与硬网格的区别
当我们点击网格时，Figma 将这个 px 网格添加到背景中。秩序!结构!作为一个设计师，你会对这一点跃跃欲试，因为你被告知要用8pt的空间，所以你使用网格。
所以我们有了这个网格，这就是为什么许多设计师会跳出结论，使用硬性网格来设置他们的间距（不过它可以用于其他对齐方式，在移动设置中也很方便）。我们没有间距块或立方体来创建一个软网格，我们可以用手来设置，虽然，在步骤8 ，但这是关于它。
提示。 在Figma中，我们可以改变推移量。按Cmd + /键，输入 "nudge"，然后改成8 。确保在推移时一直按alt ，以看到距离。通过按shift和上下箭头，我们就可以进行推移，例如，8pt 步。
设计与代码之间的机会
在CSS中，间距是如何对你起作用的？
请自由地指出（最好是在项目开始时），在CSS中没有这样神奇的背景网格，间距系统意味着在元素与元素之间测量间距块（包括行高！）。或者，换句话说，解释一下硬格子与软格子之间的区别，我们在后面的UI设计和CSS中会用到。
再来看看。使用Figma Tokens插件。
在这里，我们可以直接用间距令牌拉出真正的间距系统，并将其应用于我们的组件。我们也可以在Figma中设置自己的标记，就在插件中设置。
注意。 我们不能将 Figma 中的行高设置为类似1.5 的符号！默认情况下，它使用 px。但我们可以稍微作弊一下，使用% ，所以 CSS 中的1.5 在 Figma 中就是150% 。您仍然只能在检查选项卡中找到 px 值。
设计与代码之间的机会
解释一下吧!
因此，作为一个开发者，你可能会发现行高被随机设置为1 。这是一个绝望的设计尝试，以摆脱我们不理解的 "随机 "空间（还）。因此，提醒（新）设计师，UI设计是动态的是有意义的。屏幕尺寸会变化，内容长度也会变化（因为内容被添加或被翻译成新的语言）。因此，我们永远不能假设一行文字永远是一行文字。另外，我们也不希望创建太多的样式。所以解释一下，用自然的行高工作就可以了，你在CSS中也会这样做。
8.我们在Figma中拥有的全部是PX
在Figma中，我们只能用px工作，而且是以1px=1pt工作。我们没有rem、em或任何其他相对方式来定义诸如字体大小的东西。因此，如果你在UI设计中看到到处都是px，这并不意味着我们希望它被硬编码！！。
9.我们可以在Figma中建立漂亮的原型
我们可以直接从Figma的设计文件中创建相当令人印象深刻的原型。如果你点击文件中的播放按钮（右上方），你就可以看到它们。我们可以将框架链接到新的页面或覆盖物上，还可以在组件集内制作动画，从变体到变体。
设计与代码之间的机会
作为一个开发者，你将能够浏览该文件并提取你需要的所有信息。
页面
你可以在画布上浏览不同的框架，但请注意左边的图层菜单上面有不同的页面。每个团队都以不同的方式使用页面，有些用于版本和冲刺，有些用于将文件结构化为设计、组件和测试。在任何情况下，确保不要忽视页面，因为它们是文件的结构。
检查模式
当用视图模式进入一个文件时，你会看到默认打开的检查菜单。点击一个元素，你会在右边的菜单上显示与最近的对象的距离和规格。
你可以在CSS、iOS和Android之间切换。
当点击主要组件时，你会看到代码文档的链接（如果适用）和检查模式下的任何评论。
这只有在它被添加到设计标签的组件文档中时才会显示。而你显然只需要在你想对齐UI和代码组件时才需要这个。
顺便说一下，它对任何链接都有效。然而，一些这样的Github链接会创建一个漂亮的自定义按钮。
样式概览
点击画布以获得文件中所有样式的概览。请注意，这只显示本地样式；有些可能是从外部库中拉过来的。所以最好的办法是检查样式文件（每个设计团队都应该为你设置这个），以确保你有所有的信息。
然而，你仍然应该从你的设计团队那里收到所有样式的总体概况，包括现在或将来使用的内部和外部样式。
跳转到主要组件
这一点真的很重要，但却有点隐蔽。点击画布上的任何实例，然后点击菱形符号标志，你就会跳到主要组件和文档。在这里你可以得到所有的信息和测量结果。
然后您应该被引导到**Figma UI 组件库。**这可能是一个本地页面或外部 UI 组件文档，为您提供 UI 团队定义的所有必要信息和规格。如果您没有找到这样的概述，请要求您的设计团队为您设置。
Figma中的样式和组件概述没有神奇的自动化。这需要由设计团队进行设置和记录，而且格式可能会有所不同。
输出任何尺寸和形式的资产
资产可以从 "仅查看 "模式中导出任何资产的格式（JPG、PNG、SVG）和@尺寸，因此不再需要设计团队的批量导出。
提示。 对于一个特定的高度或宽度，而不是3x,2x ，只需输入宽度后的w （例如，300w ），它就会导出，保持图像的比例。这也适用于高度 (h)。
评论
留下评论并在你的团队中讨论。
原型
点击播放按钮（设计文件的右上角），你将跳到演示模式，看到你的原型在运行。通常情况下，设计师会很好地添加一些流程和结构的原型，所以你会对不同的流程有一个很好的了解。
提示。 可以从原型菜单的每个流程中创建单独的链接。我喜欢用它来设置设计和测试阶段的概览。你也可以在这里链接到任何其他的团队规划文件。
保持联系!
如果你喜欢这篇文章，请务必订阅并访问我的moonlearning.io，我在那里教授UX/UI设计+Figma。这篇文章也是我在2022年10月10日至13日在纽约举行的Smashing会议上的演讲和研讨会的基础。到时见!
