干货！如何减少Figma内存使用量？减少卡顿现象发生？

一个温暖的夏日夜晚。你坐在电脑前，时间不早了，但是你的设计工作还没有完成。此时你的电脑开始卡顿，打开Figma的浏览器窗口停止了响应，鼠标开始出现风火轮。你长叹了一口气，为什么这些事总发生在自己身上呢？客户要开骂了，老板还有一秒钟从微信里开始催你。。。

这些是不是听起来很熟悉？不用担心！今天我们来分享一些如何减少Figma内存使用，加速Figma使用体验的技巧。避免这四个常见错误，你的工作压力会小很多。虽然figma现在已经很流畅了，但是养成下面这些习惯，也会最大限度的减轻系统负担，让设计更丝滑。

01.多页的大文件

将所有内容保存在一个文件中是很诱人的。将所有涉及的设计师的所有组件、线框、设计、插图、原型、屏幕截图、档案和工作空间整齐地分布在一个巨大的文件的多个页面（pages）上，这似乎很方便。

但这种方式只适合于小型项目。当你的设计系统开始变的庞大，事情就变的令人讨厌了。不仅浏览所有页面变的不方便，你电脑的内存使用量也会快速增长。

解决方法是什么呢？

此时，您可能会考虑将主文件拆分为较小的文件。原则就是为外部组件库和最终设计稿提供单独的文件。对于复杂的项目，组件库可能会进一步划分为更小的块。如果您与其他设计师合作，您还可以将组件库用作设计沙箱。

02.隐藏层

变体（Variants）

尽管您看不到它们，但隐藏层对您的文件内存使用有很大贡献。有时它们用于在组件的不同状态之间切换。如果是这种情况，我们可以尝试使用变体。

基础组件

当你用太多的基础组件时，你的文件里会出现很多隐藏层。我们建议的做法是将所有可能的按钮元素（如图标状态、标签和下划线）塞进一个单独的组件中。然后，此模板的实例嵌套在所有按钮变体中，以便以后编辑。

这样，您最终会得到大量无用的不可见元素，因为您无法更改实例的结构。按钮通常嵌套在许多其他组件中，并且隐藏层被继承。

批量编辑组件

坦率地说，您几乎不需要在第一次定义按钮后对其进行编辑。如果您确实需要在某些时候更改它们，您可以轻松选择主要组件，然后按 Enter 访问其所有变体以进行批量编辑。

所以，所有这些额外嵌套操作，可能最终只是为了“艺术”而“艺术”；

03.包含多种变体的大型组件

复杂大型组件

很多按钮也往往是相当复杂的组件。它们有多种状态、类型和大小。它们可以有集中、活跃或禁用等状态。它们可以是主要的、次要的、填充的或轮廓的。它们也可以是小型、中型或大型的。它们可以有前导图标、标签或尾随图标。

具有所有可能变体组合的全能按钮

可以将所有这些特性组合成一个超级精美的全能按钮。但是，如果您希望您的文件顺利运行，您可能会考虑将此组件拆分为较小的组件并使用覆盖而不是变体。对你来说，可能需要额外点击一下来更改按钮，但对于 Figma 来说，它可能会对性能产生巨大影响。

简化按钮结构

占位符组件

为了降低文件复杂性，您还可以使用占位符组件。这些是允许您自由使用覆盖的空组件。这样您就可以在不更改相应组件的情况下更改实例的结构。

假设您有一个模态组件。您可能希望在具有不同内容的不同上下文中使用它。您可能想在此处添加简单的文本或插图。而且您不必为您可能需要的每个模态制作单独的变体。只需创建一个带有空组件的模态模板，然后使用覆盖将其替换为您喜欢的任何内容。

占位符允许您创建实例的版本而无需制作其他组件变体

原子设计

组合基本构建块以创建复合结构的想法也有助于减少变体数量和组件大小。

在这里有一个简单的图像示例，当您将鼠标悬停在信息图标上时会显示工具提示。如果您想在图像组件内显示所有带有 可见/不可见 工具提示的组合，您最终会得到 8 个图像变体和 4 个按钮变体。

但是，您已经在按钮本身上定义了按钮状态。无需在更复杂的组件级别上复制此信息。因此，您可以轻松地将图像变体的数量减半，并且仍然保留所有重要信息。这就是为什么只在最不复杂的组件上定义状态可以极大地帮助您检查库内容。

简化的复杂组件

04.大资产

使用大量高分辨率照片也会增加您的内存使用量。您可能还会遇到图片加载缓慢甚至完全从画布上消失的情况。发生这种情况时，您可能应该进行一些清理并开始删除冗余元素。它们通常深埋在蒙版（Mask）组内部或潜伏在画布边缘。如果这没有效果，您可以尝试压缩您的资产。

蒙版组里的冗余图像

原文：https://uxdesign.cc/how-to-reduce-figma-memory-usage-974684c84b5c

翻译：静电