Figma 画像のトリミングについて調べてみた!

画像のトリミングについて(Figma)

Figmaでは、画像をトリミングすることで不要な周辺部分を非表示にし、必要な範囲だけを表示することができます。
このトリミング処理は、あとから再調整することも可能で、カットされた部分の画像データ自体は削除されることはありません。

一度トリミングした画像でも、後から編集して表示範囲を変更することができます。

Figmaで画像をトリミングする手順

Figmaでは、以下の手順で画像を簡単にトリミングできます。


【手順】

  1. 画像を含むレイヤーを選択
     トリミングしたい画像の「塗り」が適用されているレイヤーを選択します。

  2. トリミングモードに切り替え
     以下のいずれかの方法でトリミングモードを有効にします:
    – ツールバーから トリミングのツール をクリック
     - 右サイドバーの「塗り」セクション内、画像のサムネイルをクリックし、表示される「画像モード」ドロップダウンから [トリミング] を選択

  3. 画像のトリミング操作
     画像周囲に表示される8つの青いハンドルを使って、以下の操作が可能です:
    トリミング:ハンドルをドラッグして表示範囲を調整
     - 位置の変更:画像そのものをドラッグして移動
     - サイズの変更:画像のエッジをドラッグして拡大・縮小
     - 回転:角の外側にカーソルを合わせて回転カーソルが出たら、クリック&ドラッグで回転
     - アスペクト比を固定してトリミング⌘ Command(Mac) または Control(Windows) を押しながら操作
     - 中央を起点にトリミングOption(Mac) または Alt(Windows) を押しながら操作

  4. トリミングを確定
     キャンバスの任意の場所をクリックするとトリミングが確定します。
     また、Esc または Return を押しても確定できます。