画像を複数のサイズに一括でトリミング・リサイズする

プリセット、カスタムサイズ、スマートなフォーカルポイント、エクスポートのオプションを使って、画像を一括でトリミング・リサイズします。

動画チュートリアル：画像のトリミングとリサイズ

この動画では、HyperCropプラグインを使ってFigmaから画像を一括でトリミング・リサイズする方法を解説します。

Figmaのページを切り替えると、そのページに保存されたトリミングサイズとエクスポート設定が読み込まれます。トリミングサイズが保存されていないページでは、デフォルトのプリセットから始まります。

HyperCropには数十種類のサイズプリセットが用意されているので、人気のプラットフォームやデバイスごとのサイズを自分で調べて入力しなくても、画像を簡単に一括トリミングしてエクスポートできます。

リストをスクロールし、各項目の横にあるチェックボックスをクリックすると、サイズを追加（または削除）できます。サイズにチェックを入れるとselected sizesリストに追加され、チェックを外すと削除されます。

次のカテゴリにある数十種類のプリセットから選べます。

  • Facebook
  • Google Ads
  • Instagram
  • LinkedIn
  • 用紙
  • スマートフォン
  • Pinterest
  • スクリーン
  • Snapchat
  • タブレット
  • Twitch
  • Twitter (X)
  • YouTube

カスタムのトリミングサイズのプリセットを追加する ​

リストをスクロールし、各項目の横にあるチェックボックスをクリックすると、サイズを追加（または削除）できます。サイズにチェックを入れるとsizesリストに追加され、チェックを外すと削除されます。

幅または高さに「Auto」を使う ​

幅と高さのどちらか一方だけを指定し、もう一方の値をHyperCropに自動で決めさせたい場合は、Crop WidthとCrop Heightのどちらか一方に入力し、もう一方は空欄のままにします。空欄の入力欄には、そのことを示すAutoというプレースホルダーが表示されます。固定する幅または高さが決まったら、Add Custom Crop Size + ボタンをクリックして、使用できるカスタムのトリミングサイズに追加します。

カスタムのトリミングプリセットを削除する ​

使用できるトリミングの一覧からカスタムプリセットを削除するには、カスタムのトリミングサイズの横にあるTrashアイコンをクリックし、Deleteをクリックして確定します。selected sizesリストから削除されるとともに、使用できるトリミングの一覧からも完全に削除されます。

一括トリミングする画像を選ぶ ​

一括トリミングできる画像はすべて、HyperCropプラグインの右側に表示されます。リスト内の画像の横にあるチェックボックスをクリックすると、その画像を一括トリミングの対象に含めるか除外するかを指定できます。

選択した画像の数に、選択した画像サイズの数を掛けたものが、HyperCropからエクスポートされる画像の総数になります。

HyperCropに表示するには、画像にエクスポート設定が必要です。Figmaの画像・レイヤーをHyperCropプラグインに表示するには、トリミングしたいレイヤーに少なくとも1つのエクスポート設定を追加してください。Figmaの右側の列にあるExport見出しの下の + アイコンをクリックすると追加できます。

まとめて選択・選択解除する。すべての画像の選択を一度に解除（または再選択）するには、リストの一番上にあるX of XX Images Selectedラベルの横のチェックボックスをクリックします。

トリミングのフォーカルポイントを指定する ​

デフォルトでは、HyperCropはCenter/Centerの基準位置で画像を一括トリミング・リサイズします。つまり、画像のフォーカルポイントは常に画像のちょうど中央になります。

フォーカルポイントを画像の別の位置、たとえばTop/LeftやCenter/Rightに変えたい場合もあるでしょう。

その場合は、フォーカルポイントを切り替えたい画像にマウスを移動し、垂直（↕）と水平（↔）のセレクトボックスをクリックして、それぞれ目的のオプションを選びます。

スマートトリミング機能を有効にする ​

垂直（↕）と水平（↔）のセレクトボックスで手動でフォーカルポイントを指定したくない場合は、Content AwareとDetect Facesのトグルを使えます。

これらの機能は、どちらか一方（または両方）を有効にできます。有効（または無効）にしたい画像にマウスを移動し、それぞれのトグルスイッチをクリックします。

Content Aware ​

Content Awareオプションを有効にすると、HyperCropはスマートトリミングのモデルを使って、画像の中で重要な部分や注目すべき部分がどこにあるかを判断します。顔をトリミングするのが難しいサイズの組み合わせがない画像では、この設定を有効にする必要はありません。有効にすると、画像のトリミングに時間がかかるためです。

Detect Faces ​

Detect Facesオプションを有効にすると、HyperCropは顔認識のモデルを使って、画像の中で顔がどこにあるかを判断します。画像に顔が含まれていない場合や、顔をトリミングするのが難しいサイズの組み合わせがない場合は、この設定を有効にする必要はありません。有効にすると、画像のトリミングに時間がかかるためです。

ブラウザの対応状況。ブラウザの互換性の問題により、HyperCropのDetect Faces機能はSafariではサポートされていません。別のブラウザ（Chromeなど）か、Figmaデスクトップアプリでプラグインを実行してください。

一括トリミングのエクスポート設定を行う ​

トリミングサイズと画像を選び、画像ごとのトリミング設定に問題がなければ、画像を一括でトリミングしてエクスポートする準備ができました。

設定パネルを開くには、HyperCropのヘッダーにあるBatch Cropボタンをクリックします。

一括トリミングの設定パネルを開いたら、Image Format（JPGまたはPNG）、Image Compression（画像の品質・サイズを指定）、Image Fill（スマートトリミング以外にのみ適用）などを選べます。

カスタムのファイル名形式を追加する ​

一括トリミングでは、エクスポートするすべての画像に適用されるカスタムのファイル名形式を指定できます。命名規則をそろえたり、画像をわかりやすいサブフォルダ構成にまとめたりするのにとても便利です。

このフィールドは任意です。空欄のままにすると、デフォルトの #{collection}/#{name}_#{width}x#{height} が使われます。

ファイル名に使える変数 ​

下の変数はどれでも、通常のテキストや文字（アンダースコアや英数字など）と一緒に、カスタムのサブフォルダ・ファイル名のパターンに自由に組み合わせて使えます。

  • #{name} Figmaのレイヤー名（例：「My Figma Layer Name」）
  • #{collection} サイズプリセットのコレクション名（例：「facebook」）
  • #{label} サイズプリセットのコレクションのラベル（例：「profile」）
  • #{width} リサイズ後の画像の幅（例：「1024」）
  • #{height} リサイズ後の画像の高さ（例：「768」）

サブフォルダを作成する。サブフォルダを作成するには、カスタムのファイル名形式の任意の位置に「/」を追加します。たとえば #{collection}-crops/#{width}x#{height}/#{name} とすると、facebook-crops/1024x768/my_figma_layer_name.jpgのような動的なフォルダ構成が作成されます（変数はコレクションと幅・高さの組み合わせごとに置き換えられます）。

一括トリミングした画像をパソコンにダウンロードする ​

すべてのオプションとファイル名形式を思いどおりに設定したら、Crop & Download Imagesボタンをクリックして、「HyperCrop」による画像の一括トリミング・リサイズ処理を開始します。

この処理では、選択したすべての画像について、選択したサイズをすべて処理します。そのため、画像やサイズが多いほど時間がかかります。

一括トリミングの処理が完了すると、画像をダウンロードできることを知らせる確認画面が表示されます。Figmaからパソコンに.zipファイルをダウンロードするには、HyperCropプラグインのDownload your .zip fileボタンをクリックします。

Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。

エクスポートした.zipファイルを開く ​

Figmaからパソコンに.zipファイルをダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると、すべての画像とサブフォルダを含むフォルダに展開されます（HyperCropのエクスポート設定で指定したサブフォルダ・ファイル名のパターンに従います）。

一括トリミングした画像を現在のFigmaファイルに挿入する ​

または、すべてのオプションとファイル名形式を思いどおりに設定したあとで、Crop & Insert to Figmaボタンをクリックすると、トリミングした画像をFigmaに直接挿入できます。現在のFigmaファイルにまったく新しいページが作成され、トリミングしたすべての画像レイヤーがそのページに挿入されます。