Figmaが重い・動かないときの原因と対策！動作を劇的に軽くする10のチェックポイント
デザインの〆切直前、あるいはクライアントとの画面共有プレゼン中――突然Figmaの画面がカクつき、最悪の場合はブラウザがクラッシュして「Out of Memory」の赤い警告バーが表示される。
エンジニアやデザイナーなら、誰しも一度は血の気が引くようなこの経験をしているはずです。
こんにちは！ UI/UXエンジニアの先輩です。
今日は、Figmaを使ってプロダクトを開発しているすべてのクリエイターに向けて、「なぜFigmaは重くなるのか？」という技術的なメカニズムと、今日からすぐに実践できて動作を驚くほど軽快にする10の改善テクニックを余すことなくお伝えします。
Figmaは単なる「絵を描くツール」ではありません。WebAssembly（Wasm）とWebGLを駆使してブラウザ上で動く、極めて高度なグラフィック処理システムです。だからこそ、仕組みを知り、正しく扱えば、どれだけ巨大なデザインシステムでもサクサク動かすことができるようになりますよ。
これをマスターして、快適なデザイン・開発環境を手に入れましょう！
—
1. なぜFigmaは重くなるのか？（技術的なメカニズム）
対策に入る前に、まずFigmaが内部でどう動いているのか、その「メンタルモデル」を理解しておきましょう。ここを理解すると、何をやれば軽くなるのかが直感的にわかるようになります。
「2GBの壁」とWebGLの仕組み
FigmaはブラウザまたはElectron（デスクトップアプリ）上で動いていますが、内部の描画エンジンにはWebGLが使われています。そして、Figmaの1ファイル（1タブ）が使用できるメモリ容量には、約2GBの限界（ブラウザのメモリ制限）が存在します。
「Macのメモリが32GBあるから大丈夫」と思っていても関係ありません。1つのFigmaファイル（1タブ）が消費するメモリが2GBに達した瞬間、Figmaはフリーズまたはクラッシュします。
Figmaが重くなる主犯は、主に以下の3点です：
1. ノード数（Layer/Vectorの要素数）の増大
2. 高解像度画像の大量読み込み
3. 過剰にネスト（階層化）されたAuto Layoutとコンポーネント
これらをコントロールすることが、パフォーマンス改善の本質です。
—
2. ［準備］まずは自分のファイルの「健康状態」を診断しよう
改善を始める前に、現在のファイルがどれくらい危険な状態かを確認しましょう。これがFigmaにおけるパフォーマンス最適化の「Hello World（第一歩）」です。
メモリ使用量の表示方法
Figmaのメインメニュー（左上のFアイコン）から、以下のように操作してください。
Figma Menu
└── View
└── Resource use (メモリ使用量を表示)
画面の左上に「Memory used: XX%」というゲージが表示されましたか？
- 0% 〜 50%: 健康状態（快適に動作）
- 50% 〜 80%: 黄信号（少しずつ重さを感じ始める）
- 80% 〜 100%: 赤信号（危険域！クラッシュの恐れあり）
このゲージを「緑」〜「黄色前半」に保つことが、私たちのゴールです。
—
3. Figmaを劇的に軽くする10のチェックポイント
それでは、現場で絶大な効果を発揮する10のチェックポイントを順番に解説していきます！
—
Check 1: 「巨大な画像」をそのまま貼り付けていないか？
一眼レフで撮影した4K/8Kの写真や、Unsplashからダウンロードした高画質画像をそのままキャンバスにドラッグ＆ドロップしていませんか？
Figmaは画像をメモリ内に展開するため、1枚で数百MBのメモリを食い潰すことがあります。
- 対策:
- 画像を事前に圧縮する: TinyPNGなどのツールを使ってWeb用に最適化してから配置する。
- 「Downsample」プラグインを活用する: Figma内に配置済みの高解像度画像を、表示サイズに合わせて一括でリサイズ・圧縮してくれるプラグイン（例：Downsample Image や Set Image Res）を実行しましょう。
—
Check 2: ページ（Page）を分割しているか？
1つのページ（Canvas）の上に、ワイヤーフレーム、デザイン案、アーカイブ、プロトタイプをすべて並べていませんか？
Figmaは「今開いているページ内に存在するすべてのオブジェクト」を一度にレンダリングしようとします。
- 対策:
- 機能やフェーズごとにページを分割する（例：`01_WIP`, `02_Review`, `03_Hand-off`, `99_Archive`）。
- 使わなくなった古いデザイン案は、思い切って「別ファイル」に切り出してアーカイブ化する。
—
Check 3: 非表示レイヤー（Hidden Layers）が放置されていないか？
目に見えない「非表示（目のアイコンがOFF）」のレイヤー。実はこれ、画面に描画されていないだけで、Figmaのメモリ上にはバッチリ残っています。
- 対策:
- 不要な非表示レイヤーは非表示にするのではなく、削除（Delete）する。
- プラグイン（例：Clean Document）を使って、ファイル全体の非表示レイヤーを一括検出・削除する。
—
Check 4: ベクターの「パス（Point）」が多すぎないか？
Illustrator等から複雑なイラストやアイコンのSVGをコピー＆ペーストした際、アンカーポイントが万単位で含まれていることがあります。ベクターの点（Node）の計算はWebGLに大きな負荷をかけます。
- 対策:
- 複雑なベクターイラストは、SVGではなくPNG/SVGにエクスポートして画像として配置する。
- 描画ツールで `Flatten`（Cmd + E / Ctrl + E）を実行し、不要なパスを結合・整理する。
—
Check 5: コンポーネントのバリアント（Variants）を作りすぎていないか？
ボタンコンポーネントを作る際、「Hover」「Active」「Disabled」「Large」「Medium」「Small」「Icon Left」「Icon Right」……と、乗算で数百個のバリアントを作っていませんか？
バリアントの数が爆発すると、メモリ消費量も跳ね上がります。
- 対策:
- Component Properties（Boolean, Instance swap, Text）をフル活用する。
- 「アイコンの有無」はBooleanプロパティを使えば、バリアントの数を半分に減らせます。
—
Check 6: Auto Layoutの過剰なネスト（階層構造）を見直す
Auto Layoutは素晴らしい機能ですが、10重・15重に深くなったAuto Layoutは、親のサイズが変わるたびに内部要素の再計算（Layout Recalculation）をドミノ倒しのように引き起こします。これが操作中のカクつきの大きな原因です。
- 対策:
- 不要なグループ（Group）やフレーム（Frame）のラップを解除（Unframe）し、レイヤー構造をフラットに保つ。
- 絶対配置（Absolute Position）を上手く使って、レイアウト計算の連鎖を断ち切る。
—
Check 7: ブラー（Blur）やドロップシャドウの多用を避ける
デザインに立体感を出す「Layer Blur」や「Background Blur」、広範囲の「Drop Shadow」は、リアルタイムでピクセルシェーダーの計算を強いるため、GPUメモリを激しく消費します。
- 対策:
- 制作中（作業中）はブラーエフェクトを一時的にOFFにする。
- 背景ブラーを多用したカードコンポーネントを何百個もグリッド表示しない。
—
Check 8: 不要なフォントやテキストノードを整理する
テキストレイヤーも実はメモリを消費します。特に「デタッチ（切り離し）されたコンポーネント」の中に大量のテキストが存在すると、Figmaはそれぞれのテキストスタイルを個別に保持しようとします。
- 対策:
- 使っていないテキストスタイルは削除する。
- コンポーネントを不用意に「Detach Instance」しない（コンポーネント構造を維持した方がメモリ効率が良い）。
—
Check 9: デスクトップアプリのキャッシュ（Cache）をクリアする
「特定のファイルだけでなく、Figma全体がずっと重い」という場合、Figmaのローカルキャッシュが肥大化・破損している可能性があります。
- 対策（デスクトップアプリの場合）:
1. メニューバーの Help > Clear Cache and Restart を選択。
2. Figmaが再起動し、不要な一時ファイルがクリーンアップされます。
—
Check 10: ハードウェアアクセラレーションをONにする
ブラウザ版のFigmaを使っている場合、ブラウザ側のGPUアクセラレーション機能がOFFになっていると、すべての描画処理がCPUに押し付けられ、激重になります。
- 対策（Google Chromeの例）:
1. Chromeの「設定」>「システム」を開く。
2. 「ハードウェア アクセラレーションが可能な場合は使用する」をONにする。
3. Chromeを再起動する。
—
4. 先輩エンジニアが教える「プロの保守用ルーティン」
最後に、私たちが実践しているデザインファイルのメンテナンス手順（SOP: 標準作業手順）を共有します。スプリントの終わりや、ファイルが重くなってきたと感じた時にこのコマンドを実行してみてください。
仕上げの5分クリーンアップ・手順
[Step 1] メモリ確認
└ View > Resource use をON（Memory %をチェック）
[Step 2] 不要オブジェクトの掃除
└ プラグイン「Clean Document」を実行
├── 非表示レイヤーの削除
├── 空フレームの削除
└── Ungroup single-child groups（無駄なグループ解除）
[Step 3] 画像の圧縮
└ プラグイン「Downsample」を実行してキャンバス上の高解像度画像を最適化
[Step 4] ページの分離
└ 過去のイテレーション（古い案）を別ファイル「[Archive] Project_Name」へ切り出し
[Step 5] Figmaのキャッシュクリア＆再起動
└ Help > Clear Cache and Restart
デザインファイルは、プログラムのソースコードと同じです。リファクタリング（コードの整理）を怠ると「技術的負債」が溜まり、最終的に動かなくなります。
「デザインの美しさ」と同じくらい「ファイルの軽量さ・メンテナビリティ」にもこだわりを持つこと。 これがプロのデザイナー・UIエンジニアへの第一歩です。
—
5. まとめ
- Figmaの1ファイルが使えるメモリ上限は約2GB（WebGLの限界）。
- 重い原因のTop3は「画像サイズ」「ノード（パス・レイヤー）の多さ」「深すぎるネスト」。
- まずは `View > Resource use` でメモリ使用量を可視化する（Hello World!）。
- ページ分割と画像コンプレッションを習慣化するだけで、動作は劇的に軽くなる。
いかがでしたでしょうか？
これらのチェックポイントを意識するだけで、あの嫌な「フリーズの恐怖」から解放され、毎日のデザインワークやエンジニアへのハンドオフが劇的にストレスフリーになりますよ。
ぜひ今日作業するそのファイルから、試してみてくださいね。応援しています！