ファイルでのメモリー使用量の削減

各ブラウザには固有のアクティブメモリー制限があります。これはデバイスによって異なることがありますが、一般にブラウザタブあたりのアクティブメモリー制限は2 ㎇です。

FigmaではWebアプリとデスクトップアプリの両方をブラウザで提供しているため、Figmaデスクトップアプリを使用する場合でもこの制限が適用されます。

Figmaで大きいファイルやライブラリを使用している場合は、この制限に達する可能性があります。影響を受けるファイルを引き続き使用するには、メモリー使用量を削減する必要があります。

この記事では、これらの制限内で作業できるようにファイルを調整するいくつかの方法を説明します。メモリー削減のヒントに移動する ↓

メモリー使用量アラート

Figmaでは、メモリー使用量がパーセンテージで測定されます。つまり、プラットフォームやデバイスによって異なる値が表示されることがあります。

メモリー使用量と発生する可能性のある問題を常に把握できるようにするため、Figmaでは特定のしきい値でアラートとバナーが表示されます。

• A

  使用率60%

  ブラウザのメモリー制限の60%に達すると、黄色い警告バナーが表示されます。このバナーを閉じることはできません。

  このファイルに使用できるブラウザメモリーがほとんどありません。コンテンツを削除すると、メモリー使用率が50%以下に低下します。これにより、引き続きこのファイルで安全に作業できます。

  Figmaでは、メモリー使用率削減に関するヒントが提供されます。[メモリー使用率の削減に関するヒントを表示]をクリックして、メモリー使用率削減のヒントを参照してください。

  この時点では、ファイルの操作時にパフォーマンスの問題(マルチプレイヤーでの遅れなど)が発生する可能性があります。

• B

  使用率75%

  メモリー制限の75%に達すると、赤色のアラートバナーが表示されます。このバナーを閉じることはできません。

  これ以上のコンテンツの追加は安全ではありません。データが失われる可能性があります。コンテンツを削除してこのファイルのメモリー使用を減らすか、以前のバージョンを復元してください。

  引き続きファイルを変更できますが、作業内容を保護するため迅速に対処することをお勧めします。メモリー使用量を削減できないと、データが失われる可能性が上がります。

  以下のヒント ↓に従って、メモリー使用量を削減してください。

• C

  使用率100%

  ファイルがメモリー制限の100%に達すると、ファイルがロックされ、使用可能なメモリーがないことが通知されます。

  このファイルに使用できるブラウザメモリーがありません。

  この時点では、メモリー使用量が少ないこのファイルの以前のバージョンを復元する必要があります。

  1. ファイルがあるプロジェクトを開きます。
  2. ファイルブラウザで、修飾キーを押しながらファイルをクリックします。
     • Mac: ⇧ Shift ⌃ Control ⌥ Option
     • Windows: Alt Shift
  3. [バージョンから復元]を選択します。
  4. 該当するバージョンの横にある[復元]をクリックします。
• D

  定期メンテナンス

  定期メンテナンス中にメモリー使用率アラートが通知される場合は、Figmaの画面上部に2つのバナーが表示されます。ファイルを開いたままにして、メンテナンス完了後に再試行することをお勧めします。

  Figmaの定期メンテナンスが間もなく開始されます。所要時間は30分の予定です。メンテナンス完了後にデータが同期されるようにするため、タブを開いたままにしてください。詳細情報をご確認ください。

• E

  メモリー使用率の削減

  メモリー使用率が50%未満になると、バナーに成功メッセージが表示されます。これでバナーを閉じることができます。

  メモリー使用率が削減されました。このファイルを安全に使用できます。このバナーを閉じることができます。

メモリー使用率の削減

メモリー使用率に影響する要素は多数あります。ファイル内のレイヤー、データ、リソースの数のような単純なものではありません。

非表示のレイヤー

非表示のレイヤーは、メモリー使用に大きく関係する要素です。Figmaではレイヤーが表示されていない場合でも、レイヤーの情報を保管、レンダリングする必要があるためです。

非表示レイヤーを使用してコンポーネントの異なるバリエーションを切り替える場合は、代わりにブーリアン型プロパティを作成することをお勧めします。ブーリアン型プロパティはコンポーネントタイプのプロパティであり、レイヤーの表示/非表示などのプロパティを切り替えることができます。

この方法では非表示のレイヤーを使用しますが、デザインシステムに必要なバリアントとレイヤーの数が減少するので、ファイルのメモリー使用率が向上します。

Figmaではバリアント間の切り替えを可能にするために、コンポーネントセット全体がロードされるので、これにより、これらのバリアントのインスタンスを含むファイルのメモリー使用率も向上します。

下の例では、ブーリアン型プロパティを使用せずにボタンコンポーネントセットを作成しました。これはアイコンありとアイコンなしという2つのボタンの状態を表す2つのバリアントを含んでいます。このデザインシステムには 合計で7つのレイヤー (1つのコンポーネントセットレイヤー、2つのバリアントレイヤー、4つのネストされたレイヤー)があります。

代わりにブーリアン型プロパティを使用する場合、可視性を切り替えるために1つのコンポーネントとブーリアン型プロパティのみをアイコンに適用する必要があります。このバージョンには合計で3つのレイヤー(1つのコンポーネントレイヤーと2つのネストされたレイヤー)があります。

レイヤーの数を半分以下に減らすことによって、このコンポーネントセットのインスタンスを使用してこのファイルのメモリー使用率を向上させました。

コンポーネントまたはバリアントの大きいライブラリ

コンポーネント数とバリアント数はいずれもメモリー使用量に影響します。少数のコンポーネントセットを使用していても、その中に数千のバリアントが含まれていれば、メモリー制限に達する可能性があります。

ライブラリに多数のバリアントが含まれている場合またはファイルがメモリー制限に近づいている場合は、コンポーネントのプロパティ→ を使用して、必要なコンポーネントとバリアントの数を減らすことを検討してください。

Figmaはバリアントの切り替えを可能にするためにコンポーネントセット全体をロードするので、これによりライブラリファイル、およびこれらのバリアントのインスタンスを使用しているファイルのメモリー使用率が向上します。

これらの調整を行った後でもライブラリファイルがメモリーの制限に近づいている場合、より小さなライブラリへの分割が必要な場合があります。

インスタンスとのリンクを維持した状態で、公開済みのコンポーネントとコンポーネントセットをファイル間で移動します。これは、コンポーネントの切り取りと貼り付け、変更の公開という2段階プロセスです。ファイル間での公開済みコンポーネントの移動 →

複数の画像とページを含む大きいファイル

多くのページや高解像度画像を含む大きいファイルを使用している場合には、パフォーマンスやメモリーの問題が発生することがあります。

これが原因でブラウザレベルのクラッシュが発生する場合、メモリー使用率バナーは表示されません。多数の高解像度画像が含まれるファイルで作業する場合は、この点に注意してください。

各ページのコンテンツをコピーして新しいファイルに貼り付けて、大きいファイルを小さいファイルに分割することをお勧めします。

1. Figmaアカウントで新しいファイルを作成します。
2. 別のタブで元のファイルを開き、移動するページを表示します。
3. [すべて選択]のショートカットを使用して、ページ上のすべてのコンテンツを選択します。
   • Mac: ⌘ Command A
   • Windows: Ctrl + A
4. [コピー]のショートカットを使用して、ページのコンテンツをクリップボードにコピーします。
   • Mac: ⌘ Command C
   • Windows: Ctrl + C
5. 別のタブに表示されている新しいファイルに戻ります。[貼り付け]のショートカットを使用して、クリップボードの内容を貼り付けます。
   • Mac: ⌘ Command P
   • Windows: Ctrl + P

大きいアセット

大量のテキストや画像、多数の頂点がある複雑なベクターをインポートする操作も、メモリー使用量に影響します。インポートするアセットの数を減らすか、アセットの品質を下げるか、インポートするファイルのサイズを減らす必要があります。

• 大きいファイルを小さいファイルに分割する。
• 高解像度画像を圧縮する。
• 複雑なSVGを小さい部分に分割してインポートする

Figmaへのファイルのインポート方法はこちら →