使用 Figma 自动布局和 App Builder 加速设计到代码
自动布局是 Figma 中的一项流行功能，Figma 是一种矢量设计工具，通常用于创建视觉设计规范。自动布局流行的原因之一是它允许您创建可以根据布局大小的变化自动调整或调整大小的设计。虽然设计人员很欣赏调整大小的方面，但在共享开发过程中的移交工件时，它也会带来好处。
本文旨在帮助从事交接工作并希望利用围绕设计到代码流程的工具以比以往更快的速度交付的 UI/UX 设计师和 Web 应用程序开发人员。
你将学到的东西：
Figma 中的自动布局是什么
如何在 Figma 中使用自动布局
自动布局如何与 App Builder 配合使用
加速设计到代码
交接的问题
移交工件代表开发团队用来构建最终解决方案的 UX 规范。然而，设计团队创建的工件与开发人员的需求之间始终存在摩擦。这种摩擦可以追溯到设计工具中创建的静态布局和规范与实现的自适应布局。开发团队根据静态规范手动（重新）实现设计，进一步加剧了这种摩擦。这会触发低效的审查流程来检查实施是否符合设计规范。
App Builder TM解决方案
在指定 UI 布局时，自动布局有助于弥合设计和开发的两个世界。通过使用 UI 元素的动态大小调整和相对定位，Figma 中的设计最终更接近预期的 Web 布局（即 CSS Flexbox）。但这仍然没有解决必须（重新）实现设计的问题，以及App Builder 的用武之地。
App Builder 本身允许软件团队从头开始快速设计和生成 Angular、Blazor 和 WebComponent 的 Web 应用程序。对于在 Figma 中创建的设计，App Builder 可以作为力量倍增器，无需手动实现设计。如果设计是使用Figma 的 Indigo.Design UI 套件创建的，您可以将设计发布为像素完美的应用程序，并可以在 App Builder 中进行编辑。换句话说，摆脱静态规范和繁琐的审查。它还更进一步——从 Figma 创建的应用程序使用了专业的 UI 组件、一致主题的设计令牌以及基于自动布局设置的 CSS Flexbox 布局。
Figma 中的自动布局是什么？
自动布局使设计人员能够创建自适应设计，可以快速适应布局或内容中的任何尺寸变化。通过这种方式设计的内容可以根据需要扩展或缩小，同时保持一致的间距和对齐方式。
鉴于用户控制浏览器窗口的宽度，除非需要，否则最好跳过使用固定高度和宽度。相反，最好考虑流体大小和相对间距，以便内容可以根据可用空间进行回流。集成自动布局的最基本示例之一是按钮，按钮大小可以根据添加的文本扩大或缩小。
如何在 Figma 中使用自动布局？
要启用自动布局，必须将 UI 元素添加到 Figma 中的框架中。框架就像网页布局中的 DIV。启用自动布局后，框架内的 UI 元素将相对于彼此定位，而不是绝对定位 (x, y)。相对于彼此定位 UI 元素可以更轻松地重新排序元素，而无需调整任何间距。
以下是启用自动布局时可用的内容的快速摘要：
| 方向 | 定义子层在容器内 的堆叠是水平还是垂直。
|
| 结盟 | 对齐控制子元素在框架内的定位方式。人们可以使用绝对位置覆盖任何子元素的对齐设置。对齐属性可以采用以下值：
|
| 间距 | 它可以是基于方向的垂直或水平间距，它定义每个子元素之间的间距。 |
| 填充 | 确定对象周围的空白，可以是顶部和底部、左侧和右侧、自定义。 |
| 调整大小 | Frame 的子项可以是垂直的和水平的，具有三个可能的值：
|
了解有关如何使用自动布局的更多信息 
自动布局如何与 App Builder 配合使用？
如上所述，自动布局相当于 CSS Flexbox 容器（DIVS）。App Builder 画布本身使用 Flexbox 布局。App Builder 提供的关键价值是将您的静态设计转换为可以在云中编辑的 Web 应用程序。为了获得最佳结果，您的设计应满足四个基本要求：
所有布局均使用 Figma 自动布局（带框架）创建
这些设计是使用Indigo.Design UI 套件中的组件创建的
版式和颜色是根据 UI 套件标记设置的
要将 UI 的一部分提取为矢量图 (SVG)，请在 Figma 中标记要导出的图层
最后，您需要Indigo.Design Figma 插件将您的设计导出为成品应用程序。查看我们之前的博客文章，其中我们描述了从设计到代码的过程。
加速从设计到代码的流程
Figma 自动布局功能可帮助设计师更快、更轻松地创建 UI 设计。它通过以下方式做到这一点：
根据布局大小或内容自动调整对象的大小。
确保设计中的间距保持一致，即使设计变得更加复杂。
通过相对定位 UI 元素，该设计可以在所有设备上正常运行。
开发人员也会喜欢它，因为设计规范更接近他们的期望，尤其是对于网页设计。
App Builder 通过消除重新实现设计的需要，为移交过程增加了价值。这使得从设计到编码的过程更快、更可靠。当使用 Figma 的 Indigo.Design 插件发布设计时，应用程序构建器会自动将静态设计转换为 Web 应用程序。
由此产生的网络应用程序有几个好处：
使用 CSS Flexbox 布局。
静态组件被替换为可用于生产的 UI 组件。
链接到全局主题的颜色和版式变量。
允许开发人员编辑 Web 应用程序，并为 Blazor、Angular 和 Web 组件生成应用程序源代码。
准备好尝试一下了吗？
售前咨询专员
