「Figmaで幅が4096pxより大きい画像を高解像度で取り込む方法」のサムネイル画像
公開日: 2023.01.13  | 更新日: 2023.01.13
この記事は最終更新から2年以上経っています

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

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

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

Insert Big Imageプラグインで大きな画像を取り込む操作デモ

この記事のターゲット

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

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


Insert Big Image」の使い方

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

Insert Big Imageプラグインの設定パネル

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

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

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

高解像度画像を分割して取り込む操作デモ取り込んだ大きな画像をFigma上で確認する操作デモ

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

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

分割された画像を結合する操作デモ

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

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

Insert Big Imageの出力結果を確認する操作デモ

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

「Figmaで画像を○や□などの好きな形に切り抜く方法」のサムネイル画像

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

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

「Figmaでおすすめの写真・画像加工のTipsまとめ」のサムネイル画像

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

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

「Figmaで簡単にフローチャートや画面遷移図をつくる方法」のサムネイル画像

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

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

今回は、デスクまわりの作業環境を少しずつ整えてきた中で、実際に使っていて満足度の高かったアイテムをまとめて紹介します。

最新の記事を見る
広告
この記事を書いた人
うえんつ
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
今回は、デスクまわりの作業環境を少しずつ整えてきた中で、実際に使っていて満足度の高かったアイテムをまとめて紹介します。
広告