Figmaで幅が4096pxより大きい画像を高解像度で取り込む方法

今回は、Figma/FigJamで縦横いずれかの幅が4096pxより大きい画像を、サイズや解像度を維持したまま取り込むことができるプラグイン「Insert Big Image」の使い方の紹介です。Webブラウザの全ページのキャプチャや、高解像度の画像を分割せずに取り込みできます。

ちなみに、プラグインを使用せずに4096px以上の画像をインポートすることもできますが、以下のように幅が強制的に4096pxに固定された状態でインポートされるので、拡大して表示すると解像度が劣化していることがわかります。

この記事のターゲット

• Figma/FigJamで巨大な画像を劣化させずにインポートしたい方

• FigmaやFigJamで複数の画面キャプチャなどを一括でインポートしたい方

「Insert Big Image」の使い方

Figma・FigJamでリソースツールからプラグイン名で検索できます。また、Figma Communityの「Insert Big Image」ページからもアクセス可能です。

使い方は以下の通りです。

1. 画像をインポートしたいファイルを開き、プラグインを起動する

2. インポートしたいファイルをプラグインのダイアログにドラッグ＆ドロップ（またはファイル選択）する

以上で利用できます。非常に簡単ですね。

ファイルを複数選択して一括取り込みすることもできます。

ちなみに、インポートしたファイルはプラグインでどのように処理されているかというと、大きいサイズのファイルを分割してグルーピングしているようです。

インポートした画像を右クリックメニューから「グループを解除」すると、複数の画像に分割されていることがわかります。

この記事を読んだ方におすすめの記事

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

Figmaでおすすめの写真・画像加工のTipsまとめ

今回はFigmaで写真や画像を加工するときにおすすめの方法を目的別に紹介します。Figmaの基本機能でできることから無料のプラグインを使用する方法など、当サイトでも人気の解説記事をまとめましたので、参考にしてみてください。 ... 続きを読む

Figmaで簡単にフローチャートや画面遷移図をつくる方法

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む