【フレーム機能を活用】Figmaで画像をリサイズする方法
公開日 :
- デザイン
こんにちは！アンドエイチエーのデザインチームです。
Figmaで画像を扱っていると、こんな経験をしたことはありませんか？
バナーやカードのサイズを変えたらトリミング位置がずれてしまった、あるいは画像が歪んでしまった……。Figmaに慣れてきた頃にぶつかりやすい、あるあるのお悩みですよね。
今回はそんな問題をすっきり解決できる「サイズ変更に強い画像オブジェクトの作り方」をご紹介します！
手順は大きく3つのSTEPで構成されています。
- STEP 1：画像をキャンバスに配置する
- STEP 2：画像をフレームで囲む
- STEP 3：画像に制約を設定する
それでは順番に見ていきましょう。
※今回紹介する方法はアンドエイチエーが運営するYouTubeチャンネル「Figma Design Tips」でも公開中です
目次
STEP 1：画像を配置する
まずはFinder（Windowsの場合はエクスプローラー）から画像をFigmaのキャンバスにドラッグ＆ドロップで配置します。
画像が配置されたら、右側デザインパネルの「塗り」と表示されているサムネイル部分をクリックして、ステータスが「塗り」のままになっていることを確認しておきましょう。
ここではあえてトリミングモードに変更しないのがポイントです。理由は後ほどSTEP 3で改めて説明します。
STEP 2：画像をフレームで囲む
STEP 2では、配置した画像をフレームで囲み、フレーム側で表示範囲をコントロールできるようにしていきます。
① 画像オブジェクトを選択した状態で右クリックし、「選択範囲のフレーム化」を選択します。
② 作成されたフレームを選択し、デザインパネルの「コンテンツを隠す」にチェックを入れます。
これでフレームの外側にはみ出た画像が非表示になります。
試しにフレームのサイズを変えてみると、はみ出た部分がきれいに隠れているのが確認できます。「コンテンツを隠す」をオフにすると、フレーム外の画像がそのまま表示されてしまうのがわかります。
確認できたら、「コンテンツを隠す」をオンに戻して次のステップへ進みましょう。
STEP 3：制約を設定する
最後のSTEPは制約の設定です。
制約とは、親要素（フレーム）のサイズが変わったとき、子要素（画像オブジェクト）がどのように追従するかを指定する設定です。これを正しく設定することで、フレームをリサイズしたときに内側の画像がきちんとついてくるようになります。
まずフレームの中にある画像オブジェクトを選択してください。
このとき、デザインパネルのレイアウトセクションにあるアスペクト比ロックはオフにしておきましょう。アスペクト比ロックがオンのままだと、制約が正しく機能しないパターンがあります。
制約は水平方向と垂直方向の2軸で設定できます。今回は代表的な3つのパターンを紹介します。
制約パターン1：横幅だけが変わるケース
バナーの横幅を調整するシーンなどに最適なパターンです。
| 方向 | 設定値 |
| 水平方向 | 拡大縮小 |
| 垂直方向 | 中央 |
フレームの横幅を広げたり狭めたりしてみると、画像がフレームいっぱいにフィットしながら上下方向は中央に固定されているのが確認できます。
制約パターン2：縦横どちらも変わるケース
コンポーネント化してさまざまなサイズで使い回す場合などに有効です。
| 方向 | 設定値 |
| 水平方向 | 拡大縮小 |
| 垂直方向 | 拡大縮小 |
フレームの縦横どちらのサイズを変えても、内側の画像が常にフレームいっぱいにフィットします。
制約パターン3：上端を基準に固定するケース
画像の上部（例：人物の顔や商品名など）を必ず見せたい場合に便利なパターンです。
| 方向 | 設定値 |
| 水平方向 | 拡大縮小 |
| 垂直方向 | 上 |
フレームの高さを変えると、画像の上端を基準にしてトリミングが変化します。下側のみがカットされるため、上部に重要な被写体がある場合に役立ちます。
今回は3パターンを紹介しましたが、状況に応じて制約を使い分けることで、どんなサイズ変更にも対応できる柔軟な画像配置が可能になります。
まとめ
いかがでしたでしょうか。
今回紹介した方法を整理すると、次の3STEPです。
- 画像をキャンバスに配置（塗りモードのまま）
- 画像をフレームで囲み「コンテンツを隠す」をオン
- 画像オブジェクトに制約を設定してフレーム側でリサイズ
この方法はラフ段階の素早い画像配置はもちろん、オートレイアウトとの組み合わせやコンポーネント化して使い回すシーンでも大幅な効率アップにつながります。
Figmaのオートレイアウトやフレームの概念に苦手意識がある方でも、画像の扱いについてはぜひ今回の方法を取り入れてみてください！
今回ご紹介した方法の詳細はアンドエイチエーのYouTubeチャンネル「Figma Design Tips」でも動画を公開中です。
動画も役に立ったという方は高評価とチャンネル登録をいただけたら幸いです。
それではまた次回の記事でお会いしましょう！
