超级充实你的项目，利用这些有用的技巧

Figma原型设计头脑风暴

在Chime，我们正努力简化我们的企业产品体验。作为这一举措的一部分，我们一直在推动Figma的原型设计极限，以便与我们的用户测试真实应用。

以下是我们最佳的方法，以最大化Figma原型设计的潜力，同时保持文件的组织和高效。让我们深入了解。

1. 避免混乱的导航

一个纷乱的导航链接网络。

**问题：**设计师必须在每个原型的每个帧中重新布线导航，导致“一盘意大利面”。 在交互和框架方面

即使是最基本的原型也需要将至少一个按钮连接到文件中的另一个框架。将此乘以任意数量的屏幕，你的文件的交互很快就会变成一个难以管理的一团蓝色线。

解决方案是使用一个单一的组合框架，将应用程序的每个视图以及单个导航的实例都组合在一起，作为一个可重用的组件。

组合视图组件包含原型的每个视图和一个与之相连的导航的单个实例。

每个单一的组合组件实例都会自动继承已连接的导航组件。只需要显示、隐藏和配置每个组合视图实例以反映应用程序的状态。

附加提示

• 避免对组合组件的实例进行更改 - 这样做可能会阻止未来的更改传播到实例中。
• 组合视图的布局可能会 ## 2. 防止组件的脱离

在这个例子中，模态组件有简单的文本内容，然而模态的实例被脱离以便用文本区域替换文本。

问题： 团队使用组件来使可重用性更容易，然而不可避免地会脱离组件以适应新版本或内容。

随着原型视图数量的增加，可重用的组件确保将来的更改 - 在与用户测试时频繁发生 - 传播到原型的所有视图中。

因此，脱离实例与首次创建组件的目的背道而驰，无疑会减慢您的流程。

为了帮助防止需要脱离组件，使用可以在后期用于更具体用例的嵌入式占位符组件：

在这个例子中，模态组件有一个名为 Placeholder 的嵌入组件，可以在后期用于更具体的用例。 在实例化画板上的模态组件的情况下，可以交换掉的占位符。

以下是我们实际设计系统文件中的示例：

在右侧面板中点击“占位符组件...”下拉菜单，可以将占位符替换为另一个组件，然后该组件将在模态中呈现，而无需分离模态实例。

附加提示

• 正确嵌入组件的布局可能需要一些尝试和错误，但不要因此而放弃这个强大的功能。
• 考虑将组件的最常见用例作为默认嵌入，这将节省您处理最常见情况的时间。

3. 构建可扩展的设计

当需要适应不同形态因素或其他重大结构变化时，不使用自动布局会导致设计变得不灵活且难以维护。

使用自动布局重新构建上述线框图可以使设计轻松适应新的形态因素。

问题： 一组屏幕 ns已经建立起来了，现在原型的尺寸变化需要手动调整和重构所有设计。

没有其他Figma功能能像自动布局一样引起如此大的争议；它可能已经超过了“gif”与“jif”成为设计领域最热烈讨论的话题。

尽管人们喜欢或讨厌自动布局，但它已经成为一种必备技能，接受它可以使设计更加灵活。

我们的内部用户分布在全球各地，有些人使用小型Chromebook，而其他人则可以使用多个显示器。为了支持这些不同的尺寸，我们发现以下一些细节非常有用：

1. 使用fill container的空图层作为看不见的间隔或在父容器上设置Spacing mode为space between。
2. 使用top + bottom和left + right定位，使容器与非自动布局的父容器的尺寸“粘合”在一起。
3. 使用Prototype > Overflow scrolling确定在原型模式下哪些窗格可以滚动。 附加提示

• 考虑使用断点插件 (opens new window)来帮助可视化您的设计以及它们在Figma中适应不同尺寸的方式。
• 对于基于浏览器的设计，请使用我们创建的可伸缩浏览器Chrome模板 (opens new window)来帮助在浏览器窗口中想象设计。

Figma的令人兴奋之旅

正如最近的Config 2022 (opens new window)所展示的那样，设计社区围绕Figma存在着一股兴奋的热潮 - 我们很感激能够加入其中，并期待Figma代表的设计进化。

我们希望您在这些提示中找到了价值 - 请务必关注Chime博客 (opens new window)，以获取更多内容，因为我们在帮助普通人实现目标方面提供帮助。 我们一起拥有经济的平安感。

我们耐心等待着令人惊叹的新Figma功能。

感谢Joanna Chao、Meijie Xia和Samantha Berg在本文中的帮助。