figma-insert-big-image-plugin
公開日: 2023.01.13  | 更新日: 2023.01.13

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

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

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

insert-big-image1

この記事のターゲット

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

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


Insert Big Image」の使い方

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

insert-big-image-plugin

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

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

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

insert-big-image2
insert-big-image3

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

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

insert-ibg-image4

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

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

insert-big-image5

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

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

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

figma-how-to-crop-and-mask

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

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

figma-plugins-for-image-processing

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

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

figma-connect-with-arrows

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告