散文網(wǎng) » 科技 »學(xué)習(xí) » 干貨！如何減少Figma內(nèi)存使用量？減少卡頓現(xiàn)象發(fā)生？

干貨！如何減少Figma內(nèi)存使用量？減少卡頓現(xiàn)象發(fā)生？

2022-05-10 16:54 作者:靜電的UI設(shè)計(jì)教室 0人讀過(guò) | 我要投稿

據(jù)說(shuō)點(diǎn)擊藍(lán)色字體關(guān)注同學(xué)都升職加薪了

一個(gè)溫暖的夏日夜晚。你坐在電腦前，時(shí)間不早了，但是你的設(shè)計(jì)工作還沒(méi)有完成。此時(shí)你的電腦開(kāi)始卡頓，打開(kāi)Figma的瀏覽器窗口停止了響應(yīng)，鼠標(biāo)開(kāi)始出現(xiàn)風(fēng)火輪。你長(zhǎng)嘆了一口氣，為什么這些事總發(fā)生在自己身上呢？客戶要開(kāi)罵了，老板還有一秒鐘從微信里開(kāi)始催你。。。

這些是不是聽(tīng)起來(lái)很熟悉？不用擔(dān)心！今天我們來(lái)分享一些如何減少Figma內(nèi)存使用，加速Figma使用體驗(yàn)的技巧。避免這四個(gè)常見(jiàn)錯(cuò)誤，你的工作壓力會(huì)小很多。雖然figma現(xiàn)在已經(jīng)很流暢了，但是養(yǎng)成下面這些習(xí)慣，也會(huì)最大限度的減輕系統(tǒng)負(fù)擔(dān)，讓設(shè)計(jì)更絲滑。

01.多頁(yè)的大文件

將所有內(nèi)容保存在一個(gè)文件中是很誘人的。將所有涉及的設(shè)計(jì)師的所有組件、線框、設(shè)計(jì)、插圖、原型、屏幕截圖、檔案和工作空間整齊地分布在一個(gè)巨大的文件的多個(gè)頁(yè)面（pages）上，這似乎很方便。

但這種方式只適合于小型項(xiàng)目。當(dāng)你的設(shè)計(jì)系統(tǒng)開(kāi)始變的龐大，事情就變的令人討厭了。不僅瀏覽所有頁(yè)面變的不方便，你電腦的內(nèi)存使用量也會(huì)快速增長(zhǎng)。

解決方法是什么呢？

此時(shí)，您可能會(huì)考慮將主文件拆分為較小的文件。原則就是為外部組件庫(kù)和最終設(shè)計(jì)稿提供單獨(dú)的文件。對(duì)于復(fù)雜的項(xiàng)目，組件庫(kù)可能會(huì)進(jìn)一步劃分為更小的塊。如果您與其他設(shè)計(jì)師合作，您還可以將組件庫(kù)用作設(shè)計(jì)沙箱。

02.隱藏層

變體（Variants）

盡管您看不到它們，但隱藏層對(duì)您的文件內(nèi)存使用有很大貢獻(xiàn)。有時(shí)它們用于在組件的不同狀態(tài)之間切換。如果是這種情況，我們可以嘗試使用變體。

基礎(chǔ)組件

當(dāng)你用太多的基礎(chǔ)組件時(shí)，你的文件里會(huì)出現(xiàn)很多隱藏層。我們建議的做法是將所有可能的按鈕元素（如圖標(biāo)狀態(tài)、標(biāo)簽和下劃線）塞進(jìn)一個(gè)單獨(dú)的組件中。然后，此模板的實(shí)例嵌套在所有按鈕變體中，以便以后編輯。

這樣，您最終會(huì)得到大量無(wú)用的不可見(jiàn)元素，因?yàn)槟鸁o(wú)法更改實(shí)例的結(jié)構(gòu)。按鈕通常嵌套在許多其他組件中，并且隱藏層被繼承。

批量編輯組件

坦率地說(shuō)，您幾乎不需要在第一次定義按鈕后對(duì)其進(jìn)行編輯。如果您確實(shí)需要在某些時(shí)候更改它們，您可以輕松選擇主要組件，然后按 Enter 訪問(wèn)其所有變體以進(jìn)行批量編輯。

所以，所有這些額外嵌套操作，可能最終只是為了“藝術(shù)”而“藝術(shù)”；

03.包含多種變體的大型組件

復(fù)雜大型組件

很多按鈕也往往是相當(dāng)復(fù)雜的組件。它們有多種狀態(tài)、類型和大小。它們可以有集中、活躍或禁用等狀態(tài)。它們可以是主要的、次要的、填充的或輪廓的。它們也可以是小型、中型或大型的。它們可以有前導(dǎo)圖標(biāo)、標(biāo)簽或尾隨圖標(biāo)。

具有所有可能變體組合的全能按鈕

可以將所有這些特性組合成一個(gè)超級(jí)精美的全能按鈕。但是，如果您希望您的文件順利運(yùn)行，您可能會(huì)考慮將此組件拆分為較小的組件并使用覆蓋而不是變體。對(duì)你來(lái)說(shuō)，可能需要額外點(diǎn)擊一下來(lái)更改按鈕，但對(duì)于 Figma 來(lái)說(shuō)，它可能會(huì)對(duì)性能產(chǎn)生巨大影響。

簡(jiǎn)化按鈕結(jié)構(gòu)

占位符組件

為了降低文件復(fù)雜性，您還可以使用占位符組件。這些是允許您自由使用覆蓋的空組件。這樣您就可以在不更改相應(yīng)組件的情況下更改實(shí)例的結(jié)構(gòu)。

假設(shè)您有一個(gè)模態(tài)組件。您可能希望在具有不同內(nèi)容的不同上下文中使用它。您可能想在此處添加簡(jiǎn)單的文本或插圖。而且您不必為您可能需要的每個(gè)模態(tài)制作單獨(dú)的變體。只需創(chuàng)建一個(gè)帶有空組件的模態(tài)模板，然后使用覆蓋將其替換為您喜歡的任何內(nèi)容。

占位符允許您創(chuàng)建實(shí)例的版本而無(wú)需制作其他組件變體

原子設(shè)計(jì)

組合基本構(gòu)建塊以創(chuàng)建復(fù)合結(jié)構(gòu)的想法也有助于減少變體數(shù)量和組件大小。

在這里有一個(gè)簡(jiǎn)單的圖像示例，當(dāng)您將鼠標(biāo)懸停在信息圖標(biāo)上時(shí)會(huì)顯示工具提示。如果您想在圖像組件內(nèi)顯示所有帶有可見(jiàn)/不可見(jiàn) 工具提示的組合，您最終會(huì)得到 8 個(gè)圖像變體和 4 個(gè)按鈕變體。

但是，您已經(jīng)在按鈕本身上定義了按鈕狀態(tài)。無(wú)需在更復(fù)雜的組件級(jí)別上復(fù)制此信息。因此，您可以輕松地將圖像變體的數(shù)量減半，并且仍然保留所有重要信息。這就是為什么只在最不復(fù)雜的組件上定義狀態(tài)可以極大地幫助您檢查庫(kù)內(nèi)容。

簡(jiǎn)化的復(fù)雜組件

04.大資產(chǎn)

使用大量高分辨率照片也會(huì)增加您的內(nèi)存使用量。您可能還會(huì)遇到圖片加載緩慢甚至完全從畫布上消失的情況。發(fā)生這種情況時(shí)，您可能應(yīng)該進(jìn)行一些清理并開(kāi)始刪除冗余元素。它們通常深埋在蒙版（Mask）組內(nèi)部或潛伏在畫布邊緣。如果這沒(méi)有效果，您可以嘗試壓縮您的資產(chǎn)。