Figmaは動作がとても軽くて便利なデザインプラットフォームですが、プロジェクトの規模や期間によってはデータやファイルが膨大な量になってしまい、重くて作業に支障が出てしまう…ということもあると思います。
そこで今回はFigmaが重くなる原因と対処法をご紹介します。
Figmaの各ブラウザには独自のアクティブメモリ制限があり、ファイルのメモリー使用率が60%、70%、80%に達するとアラートが表示され制限されることがあります。
メモリー使用率はFigma「メインメニュー」→「閲覧」→「メモリー使用率」から確認することができます。
主に上記を行うことでメモリ使用量を抑えることができます。
その中でも「ページ内のデータの作り方に原因がないか見直す」についてはデザインデータを作成する際に気をつけることができるため、こちらの原因を細かく調べてみました。
Figmaはレイヤーが表示されていない場合でもレイヤーの情報が保管、レンダリングされ、メモリー使用に大きく関係するため、必要ない非表示レイヤーはこまめに削除しましょう。
数が多い場合は、非表示レイヤーを一括で削除できるプラグインを利用するのもよさそうです。
オートレイアウト、フレーム、グループは便利ですが、入れ子構造の使い過ぎはシンプルな要素でも情報量が増え動作が重くなってしまうため、不要な入れ子を作らないように気をつけましょう。
以下はやりがちな例です。
不要な入れ子はデータが重くなるだけではなく、後の調整のし辛さやレイヤーの探しにくさなどパフォーマンス低下の原因になることも多いため、こまめに確認しましょう。
メインコンポーネントだけではなく、コピーしたひとつひとつのインスタンスにもバリアントの情報が上乗せされているため、バリアントの数が多いコンポーネントはそれだけデータも重くなります。
最初できるだけ計画的に作成し、不要になったバリアントは削除したり、コンポーネントの適用先を確認してインスタンスの切り離しを行うこともメモリー使用量を抑えるために必要です。
複雑なベクターやSVGの画像は重くなる原因となることが多いため、できるだけ軽くなるようにレイヤー数を減らして簡素化するなど対処する必要がありそうです。
例えば自分は、イラストレーターで作成したり素材サイトでダウンロードしたベクターイラストやロゴをコピーしてFigmaで使用する際、ペーストした時に何層にもなる複雑なレイヤーになっている場合はすぐに統合（Alt+Shift+F/選択して右クリック）したり、SVG画像をJPGにするなどしています。
イラストだけではなく、統合できる複数のレイヤーなどは統合することでかなりデータ量を減らすことができます。
Figmaに画像を大量に配置したり大きい画像を使用すると元のサイズですべて保持されるため、ファイルサイズが重くなりメモリー使用量にも影響してしまいます。
画質低下には気を付ける必要がありますが、使用するサイズに合わせてリサイズ・圧縮することでパフォーマンスが向上します。
この場合も非表示レイヤーと同じように、Figma上で画像を圧縮したりJPEG形式に変換できるプラグインがあるため利用すると便利です。
また、 Figmaで画像をリサイズした後 Ctrl（⌘） + Shift + C でPNGとしてコピーし、再度 Ctrl（⌘） + V でペーストすると、ペーストされた画像はリサイズされたサイズで新しい画像として扱わるため、元のファイルサイズが保持されなくなることから配置する前や配置してすぐのタイミングでリサイズするのがよさそうです。
基本的には軽いFigmaですが、決して重くならないというわけではなく、重くて業務の効率が落ちてしまうということが実際にあって今回原因と対処法についてご紹介しました。
プロジェクトの規模によって適切にデータを作成していけばとても便利なので、うまく対処していきたいと思います。
