最近在使用 Figma 的過程中，合併分支和開啟檔案的速度都變的很慢，Figma 的左側經常出現記憶體佔用過大的提示，一看圖層數量，已經有一百四十多萬了。
如果你是深度使用 Figma 的同學，應該會經常遇到 Figma 載入速度慢或者記憶體不足的問題，載入速度慢還可以等一等，但是記憶體不足的話就很崩潰了，如果你的專案頁面很多，你在畫圖時，每次進入一個頁面，都會將圖層載入到快取中，載入的多了就會提示你記憶體不足了。
最初我以為是我電腦配置問題，我使用的 macbook air 只有 8g 記憶體，但當我後面換了桌上型電腦之後，這個問題依然存在，後來查閱 Figma 的文件才知道單個標籤頁快取是有限制的，最大的數量為 2G，不論你用的是瀏覽器還是軟體。這個問題的原因其實就來自於瀏覽器的核心限制，單個標籤的記憶體數量最大為 2G，而 Figma 的軟體使用的也是瀏覽器套殼技術，所以即便安裝桌面軟體頁無法擺脫這個限制。
解決方式
那麼既然沒辦法透過擴大記憶體的方式解決問題，我們只能儘量減少 Figma 中頁面佔用的記憶體。
減少單個頁面的圖層數量，前面提到每個頁面的圖層會在開啟時載入到快取中，那我們在使用 Figma 的過程並不是一定要每個頁面都開啟一次的，將圖層分散到多個頁面會減少單個頁面開啟時的快取圖層數量，也就降低了記憶體佔用，這樣只有你特殊情況下需要開啟大量頁面纔會觸發記憶體不足提示。
清理你隱藏的圖層，這一點是最重要的，可能你會說我沒有刻意去隱藏圖層，但實際上有很一個操作會導致我們的頁面中存在大量的隱藏圖層，那就是元件屬性。 在 Figma 的元件，我們可以為元件內的圖層增加顯示或者隱藏的屬性，然後在使用元件時根據需要去開啟，但這種方式會將你元件中不展示的圖層也進行渲染只是不進行展示而已，如果瞭解前端的同學應該知道這就是
v-if和v-show的區別。
舉一個例子，在我不太瞭解 Figma 的圖層機制時，我曾經做了一個表單元件 FormItem 這個元件，可以有很多種屬性支援開啟：
這個元件在元件庫裡看起來很簡單，其實就是我把全部表單中可能出現的元件型別全部塞到一個大元件裡，然後透過布林屬性控制圖層是否開啟：
但實際上在頁面中使用元件的時候，有非常多隱藏的圖層，：
一個元件就有幾十個隱藏的圖層，一個表單中至少有五個以上的表單項，表單元件又可能被很多個頁面引用或巢狀，這樣隱藏的圖層的數量就指數級上升了。
那麼正確的做法是什麼呢？其實就是使用變體來設計元件，還是以表單項元件為例，我在最佳化後的元件是這樣的： 我將 FormItem 拆成了三個部分：
Form Title 表單標題
Form Component 表單元件
HelperText 表單提示文案
這其中最主要的就是 Form Component 元件，我使用變體的方式建立了所有我需要的表單項型別，最終組合後我的元件是這樣的：
表面上看和之前的效果一樣，實際上的圖層是這樣的：
我在使用的時候只需要選中 FormItem 中的 Form Component 元件，然後切換它的 type 就切換為其他的表單元件型別。
透過這種方式，我將原本專案的圖層從 140 萬降低到了大概 100 萬，效果還是很顯著的。
| 最佳化前 | 最佳化後 |
|---|---|
 |
 |
外掛推薦
這裏我推薦兩個用於分析專案中元件使用情況的外掛，使用方式都很簡單，這裏不詳細展開：
Instance Finder：查詢專案中未被引用的元件
Unused Component：查詢所有基於某個元件建立的例項
