ファイルでのメモリー使用量の削減
Figmaのリデザイン版であるUI3を使用している場合、この記事の一部が製品に表示される内容と一致しない可能性があります。アップデートを行うまで、今しばらくお待ちいただきますようお願いいたします。Figmaの新デザインの詳細はこちら→
はじめに
この機能を使用できるユーザー
すべてのプランで利用できます
編集可アクセス権を持つすべてのユーザーは、復元モードに入ってデザインファイルのメモリー使用率を削減することができます。
Figmaで大きなファイルまたはライブラリで作業する場合、メモリーが制限されることがあります。この記事では、これらの制限の中で動作するようにファイルの調整方法の概要を説明します。
メモリーとは
この記事では、「メモリー」という一般的な用語を使用し、Figmaで見かけるメモリーのアラートを説明して対処します。
この記事では、特定の種類のメモリーであるWASMメモリー(WebAssembly Memory)について言及しています。Figmaは、WASMメモリーを使用してレイヤーとオブジェクトをキャンバス上にレンダリングし、共同マルチプレイヤーエクスペリエンスを提供します。
各ブラウザには独自のアクティブメモリー制限があります。これはデバイスによって異なることがありますが、一般的な理解としてはブラウザタブあたりのアクティブメモリー制限は2 GBです。
Figmaはブラウザベースのテクノロジーで構築されているため、これらの制限はFigmaのデスクトップアプリケーションを使用しているときにも適用されます。
Figmaではいくつかの方法を採用して、作業中にメモリ不足が発生しないよう努めています。たとえば、メモリ使用量を最小限に抑えるため、ファイル内のページやレイヤーは必要な分だけ読み込みます。しかし、記事の後半でも説明するように、一部の状況によってはファイルがメモリ不足になることがあります。
メモリーを管理
ブラウザまたはデバイスの利用可能なメモリーの割合としてメモリー使用量を測定します。メモリー使用量は、ファイルに読み込まれたページのみが追跡されます。
ファイルのコンテンツのメモリー使用率インジケーターを確認するには、次の操作を行います。
- メインメニューを選択して[表示]にカーソルを合わせます。
- [メモリー使用率]を選択すると、左サイドバーにメモリー使用率がメーターとして表示されます。
- [メモリー管理]をクリックします。
- [メモリー管理]モーダルで[メモリーをレイヤーパネルに表示]を切り替えると、レイヤーとコンポーネントが使用しているメモリー量を確認できます。
ヒント: ファイルでのメモリー管理のベストプラクティスについては、モーダルでメモリー削減のヒントを参照することもできます。
メモリー使用量アラート
メモリー使用量と発生する可能性のある問題を常に把握できるようにするため、Figmaでは特定のしきい値でアラートとバナーが表示されます。
注: これらのアラートが適切な順序で表示されない場合があります。メモリー使用量が短期間で増加した場合は、アラートがまったく表示されないこともあります。
ブラウザのメモリー制限の60%に達すると、左サイドバーに黄色い警告タイルが表示されます。
閲覧限定アクセス権
編集アクセス権
この時点では、ファイルの操作時にパフォーマンスの問題(マルチプレイヤーでの遅れなど)が発生する可能性があります。
メモリー制限の75%に達すると、左サイドバーに赤色の警告タイルが表示されます。このアラートを閉じることはできません。
閲覧限定アクセス権
編集アクセス権
引き続きファイルを変更できますが、作業内容を保護するため迅速に対処することをお勧めします。メモリー使用量を削減できないと、データが失われる可能性が上がります。
[詳細情報]をクリックしてメモリー使用率を削減するための提案を確認するか、以下で説明されるヒントに従ってください ↓
ファイルがメモリー制限の100%に達すると、ファイルがロックされ、使用可能なメモリーがないことが通知されます。
ファイルへの閲覧限定アクセス権を持つユーザー
ファイルへの表示アクセス権を持つユーザーには、ファイルを再読み込みするオプションがあります。ファイルを再読み込みすると、ファイルを表示し続けるために十分なメモリーが解放されることがあります。
ファイルへの編集アクセス権を持つユーザー
ファイルへの編集アクセス権を持つユーザーには、ファイルを再読み込みするオプションがあります。ファイルを再読み込みすると、ファイルを表示し続けるために十分なメモリーが解放されることがあります。
それ以外で、サポート対象のブラウザバージョンを使用しており、ファイルへの編集アクセス権を持っている場合は、復元モードに入るよう求められます。復元モードは、次のブラウザバージョンでサポートされています。
- Firefox 89以降
- Chrome 83以降
- Safari 15.2以降
- Microsoft Edge 93以降
現在お使いのブラウザバージョンがサポートされていない場合は、ブラウザバージョンを更新するかデスクトップアプリでファイルを開くことが求められます。
復元モード
復元モードでは、メモリー使用率を削減し、作業内容を失うことなくファイルを編集可能な状態に戻すことができます。
復元モードに入ると、ファイルのすべてのページが再読み込みされ、メモリー管理モーダルが開きます。復元モードを終了するには、メモリー使用率を90%以下に減らす必要があります。
注: 復元モードを終了すると、ファイルは再読み込みされます。
メモリー削減のヒント
メモリー使用率には多くの要因が関連しており、残念ながら注意すべきレイヤー、データ、リソースの決まった数があるわけではありません。つまり、メモリーを削減するための画一的なアプローチは存在しません。メモリー使用率が高い場合は、次の解決策に従って問題をトラブルシューティングしてください。
非表示のレイヤー
非表示のレイヤーは、メモリー使用に大きく関係する要素です。Figmaではレイヤーが表示されていない場合でも、レイヤーの情報を保管、レンダリングする必要があるためです。
ソリューション
コンポーネントのブーリアン型プロパティの使用
ブーリアン型プロパティは、レイヤーの可視性などのプロパティをオン/オフで切り替えるコンポーネントプロパティの一種です。非表示レイヤーが使用されますが、デザインシステムに必要なバリアントとレイヤーの数が減り、ファイルのメモリー使用率を改善できます。
| 以前 | 対応後 |
|---|---|
|
ボタンコンポーネントセットには、ボタンの2つの状態(アイコンありとアイコンなし)を表す2つのバリアントがあります。 このコンポーネントにはレイヤーが合計7つあります(コンポーネントセットレイヤー1つ、バリアントレイヤー2つ、ネストされたレイヤー4つ)。 |
アイコンの可視性を切り替えるには、1つのコンポーネントとアイコンに適用されるブーリアン型プロパティのみが必要です。 本バージョンには、合計3つレイヤー(コンポーネントレイヤー1つとネストされたレイヤー2つ)があります。 |
ヒント!レイヤーを削除するには、キャンパスまたは左サイドバーの[レイヤー]パネルでレイヤーを選択します。次にDeleteキーまたはBackspaceキーを押してレイヤーを削除します。
注: 開いたページにのみレイヤーが読み込まれます。ページ間を移動するには、そのページに残っているコンテンツを読み込む必要があるため、メモリーパネル内のメモリーとレイヤーの数が増える可能性があります。
コンポーネントまたはバリアントの大きいライブラリ
コンポーネント数とバリアント数はいずれもメモリー使用量に影響します。少数のコンポーネントセットを使用していても、その中に数千のバリアントが含まれていれば、メモリー制限に達する可能性があります。
ソリューション
コンポーネントプロパティの使用
ライブラリに多数のバリアントが含まれている場合またはファイルがメモリー制限に近づいている場合は、コンポーネントプロパティを使用して、必要なコンポーネントとバリアントの数を減らすことを検討してください。
コンポーネントセット内のすべてのコンポーネントが読み込まれるため、メモリー使用率を改善でき、バリアント間を素早く切り替えることもできます。コンポーネントプロパティを使用しておりバリアントが少ない場合、読み込む必要のあるFigmaコンポーネントは少なくなります。
大きなライブラリファイルの分割
こうした調整を行ってもライブラリファイルがメモリー制限に近づいている場合は、ライブラリを小さく分割する必要があるかもしれません。
インスタンスへのリンクを解除せずに、公開済みのコンポーネントとコンポーネントセットをファイル間で移動します。これには、コンポーネントをカット＆ペーストし、その後変更を公開するという2つのプロセスがあります。
ライブラリを分割するにはさまざまな多くの方法がありますが、最良のアプローチはライブラリのユーザーのニーズを満たす方法です。ライブラリファイルを整理する方法の詳細については、「デザインシステム入門」コースのレッスン3を参照してください。
複数の画像とページを含む大きいファイル
多くのページや高解像度画像を含む大きいファイルを使用している場合には、パフォーマンスやメモリーの問題が発生することがあります。
これが原因でブラウザレベルのクラッシュが発生する場合、メモリー使用率バナーは表示されません。多数の高解像度画像が含まれるファイルで作業する場合は、この点に注意してください。
ソリューション
大きなファイルの小さなファイルへの分割
ライブラリファイルの整理方法はいろいろありますが、まずは現在のファイルのページごとに新しいファイルを作成することです。ライブラリファイルの整理方法の詳細については、「デザインシステム入門」コースのレッスン3を参照してください。
- Figmaアカウントで新しいファイルを作成します。 別のタブで元のファイルを開き、移動するページを表示します。
-
[すべて選択]のショートカットを使用して、ページ上のすべてのコンテンツを選択します。
- Mac: ⌘ Command A
- Windows: Ctrl + A
-
[コピー]のショートカットを使用して、ページのコンテンツをクリップボードにコピーします。
- Mac: ⌘ Command C
- Windows: Ctrl + C
- 別のタブに表示されている新しいファイルに戻ります。[貼り付け]のショートカットを使用して、クリップボードの内容を貼り付けます。
- Mac: ⌘ Command V
- Windows: Ctrl + V
- 元のファイルの場合: 左サイドバーでページリストを開きます。ページ名を右クリックして、[ページを削除]を選択します。
画像ファイルの圧縮
Downsizeプラグインを使用すると、キャンバス上の大きな画像を圧縮できます。
大きいアセット
大量のテキストや画像、多数の頂点がある複雑なベクターをインポートする操作も、メモリー使用量に影響します。インポートするアセットの数を減らすか、アセットの品質を下げるか、インポートするファイルのサイズを減らす必要があります。
- 大きいファイルを小さいファイルに分割する。
- 高解像度画像を圧縮する。
- 複雑なSVGを小さい部分に分割してインポートする
メモ: 画像のデコードではJSメモリーが使用されます。これはメモリー使用率やバナーアラートには含まれません。画像がキャンバスにレンダリングされると、画像は引き続きWASMメモリーの使用量に影響する可能性があります。
ロックされたファイルへのアクセス
ファイルがメモリー制限の100%に達すると、ファイルがロックされ、使用可能なメモリーがないことが通知されます。試すことができるのは、次の2つです。
- より少ないメモリーを使用するバージョンにファイルを復元します。ファイルからバージョン履歴にアクセスできない場合でも、ファイルブラウザでこのアクションを実行できます。
- 白い画面が表示される場合、画像メモリーが原因でファイルがクラッシュした可能性があります。この状態では、ファイルまたはファイルのバージョン履歴にアクセスできません。サムネイルモードで画像付きファイルを開いてみてください↓。
以前のバージョンを復元
- ファイルがあるプロジェクトを開きます。
- 修飾キーを押しながらファイルをクリックします。
- Mac: ⇧ Shift ⌃ Control ⌥ Option
- Windows: Alt Shift
- [バージョンから復元]を選択します。
- 該当するバージョンの横にある[復元]をクリックします。
サムネイル専用モードでファイルを開く
サムネイル専用モードを使用して、ファイルに再度アクセスできる場合があります。これにより、低解像度の画像を含むファイルが読み込まれます。
サムネイル専用モードにアクセスするには、ファイルURLの末尾に?thumbnails-only=1の条件パラメーター(クエリ文字列とも呼ばれる)を追加します。
- リンクに既存のパラメーターがない場合は、リンクはファイル名で終わりです。リンクの末尾に新しいクエリ文字列
?thumbnails-only=1を追加して、最終的にURLは次のようになります:https://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?thumbnails-only=1 - リンクに
?node-idのようなパラメーターがすでにある場合は、代わりに&thumbnails-only=1を追加する必要があります。クエリ文字列にさらにパラメーターを追加する場合は、区切り文字&を使用します。最終的にURLは次のようになります:http://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?node-id=211-2665&t=D5QnxlouJ9sKF1dM-0&thumbnails-only=1
これで、メモリー使用率を削減するためのアプローチ ↑を試すことができます。