Figmaで画像の画質が悪くなる原因と解決策をパパッと解説！【Insert Big Image】

Figmaは、WebデザイナーやUI/UXデザイナーにとって非常に便利なツールです。しかし、Figmaを使用していると、たまに画像の画質が悪くなってしまうことがありますよね。実は、画質が悪くなる原因は2つあります。

この記事では、Figmaで画像の画質が悪くなる原因と、その解決策についてパパッと解説していきます。

Figmaで画像の画質が悪くなる2つの原因

まずはじめに、Figmaで画像の画質が悪くなる2つの原因をご紹介します。

画質が悪くなる原因は、以下の2点です。

• 画像を読み込むのに時間がかかっている（待つだけでOK）
• 画像のサイズが大きすぎる（要対策）

画像を読み込むのに時間がかかっている（待つだけでOK）

Figmaで画像の画質が悪くなる1つ目の原因は、「画像の読み込みに時間がかかっている」ことです。

同一ファイル上で画像をたくさん使うと、Figmaデザインファイルを立ち上げた際、読み込むまで時間がかかります。過去に使用した画像が表示されなかったり、画質が悪くなっている場合は、30秒～1分程度待ってみてください。

それでも改善されない場合は、以下の方法を試してみてくださいね。

• デザインファイルを再度立ち上げる
• Figmaを再起動する
• WiFi接続が切れていないか確認する

画像のサイズが大きすぎて、自動で圧縮されている（要対策）

Figmaで画像の画質が悪くなる2つ目の原因は、「画像のサイズが大きすぎる」ことです。

Figmaには、画像を読み込むサイズの上限値が設定されています。以下の条件を超えてしまうと、Figma上で自動的に画像が圧縮され、画質が悪くなってしまいます。

• 画像の横幅または高さのどちらかが4096pxを超える

単に画像が圧縮されるだけならいいのですが、かなり画質が悪く、ボケボケの画像になってしまいます。

次の章では、Figmaで大きいサイズの画像を使いたいときの解決策をご紹介していきます。

Figmaで画像の画質が悪くなるときの2つの解決策

解決策①：「Insert Big Image」というプラグインを使う

Figmaで画像の画質が悪くなるときの、最も簡単な解決策は「Insert Big Image」というプラグインを使う方法です。

「Insert Big Image」プラグインのインストール方法は、以下の通り。

1. 上部のメニューから、リソースタブをクリック
2. 「プラグイン」タブをクリック
3. 「Insert Big Image」を入力
4. 「Insert Big Image」をクリック（実行）

Insert Big Imageを実行すると、以下のようなウィンドウが表示されます。

「Choose Image Files」をクリックし、Figmaで使用したい4096px以上の画像を選択、アップロードしてください。

すると、以下のように画像が配置されました。Insert Big Imageでは、Figmaで圧縮されないサイズに自動で画像を切り分けてくれるということです。

尚、「Insert as a @2x image」にチェックをつけると、半分のサイズで出力されます（※画像上側）。

アップロードされた画像のサイズを変える場合のポイント

「Insert Big Image」でアップロードされた画像は、複数の画像がグループ化されているような状態です。

画像の比率を変えずにサイズを変えたい場合は、以下のようにしてください。

• グループ全体を選択
• Shiftを押しながら四隅の枠線をドラッグ

解決策②：サイズ変更ツールを使う

2つ目の解決策は、サイズ変更ツールで画像サイズを変更してからFigmaにアップロードする方法です。

複数の画像をまとめてサイズ変更したい場合、Figmaプラグインを使いたくない場合は、こちらの方法でもいいと思います。

今回は、Google検索で一番上にあった「サルワカ道具箱」というツールをご紹介します。

サイトにアクセスし、以下の手順で画像サイズを縮小してください。

1. サイズ変更する画像を選択
2. 指定したサイズに縮小
3. 画像をダウンロード
4. Figmaにアップロード

まとめ：4096px以上の画像を使うときは気をつけよう

今回は、Figmaで画像の画質が悪くなる原因と解決策についてご紹介しました。

Figmaで4096px以上の画像を使ってしまうと、自動で画質が悪くなります。特に仕事でFigmaを利用する場合は、画質が悪いことに気づかずデザイン作業を進めてしまわないように気をつけておきましょう。