Figmaで画像をトリミングする方法

本記事では、Figmaで画像をトリミングする方法について説明します。

画像の不要な部分をトリミングする方法

Figmaで画像をトリミングする方法はいくつかあります。最初に、画像の不要な部分をトリミングする方法について説明します。

1. シェイプツールをクリック

画面上部にあるツールバーからシェイプツールをクリックします。

2. 「画像/動画を配置･･･」を選択

シェイプツールをクリックして表示されるメニューの中から「画像/動画を配置･･･」を選択します。

3. 配置する画像を選択して開く

「画像/動画を配置･･･」を選択すると画像を選択するウィンドウが開くので、配置する画像を選択してパネル右下にある「開く」をクリックします。

4. 「塗り」にある画像をクリック

画像を選択すると、右サイドバーに「塗り」という項目が表示されるので、この項目にある「画像」をクリックします。

5. 配置方法から「トリミング」を選択

「画像」をクリックすると、画像の設定パネルが表示されます。このパネルのサムネイル画像の左上に、デフォルトで「拡大」と表示されている画像配置設定の項目があるのでこれをクリックします。
プルダウンメニューが表示されるので、この中から「トリミング」を選択します。

6. 画像を任意のサイズにトリミングする

「トリミング」を選択すると、画像の角と辺にガイドが表示されるので、これをクリックしドラッグすることで、任意のサイズに画像をトリミングすることができます。

7.画像を任意の形にトリミングする

「トリミング」を選択すると、画像の角と辺にガイドが表示されるので、これをクリックしドラッグすることで、上の動画のように任意のサイズに画像をトリミングすることができます。

画像を任意の形にトリミングする

次に、画像を任意の図形（シェイプ）でトリミングする方法について説明します。

1. 楕円ツールを選択

画面上部にあるツールバーからシェイプツールのアイコンをクリックし、表示されたメニューの中から楕円ツールを選択します。
（※長方形ツールや多角形ツールなどを使う場合も同様の手順です）

2. 楕円のシェイプを作成

楕円ツールを使って円のシェイプを作成し、トリミングしたいエリアに配置します。

3. シェイプを画像の背面に移動

マスク機能を使ってトリミングする場合は、画像よりも背面にシェイプを移動させる必要があります。作成した円のシェイプを選択し、画面上部にあるメニューバーから「オブジェクト」＞「背面へ移動」を選択します。

4. 「マスクとして使用」をクリック

画像と背面にある円のシェイプを両方選択します。

その状態で画面上部にあるツールバー中央の「マスクとして使用」のアイコンをクリックします。

5. 円形にトリミング

これで画像が円形にトリミングされます。

トリミング編集した画像を書き出す方法

最後に、トリミング編集した画像を書き出す方法について説明します。

1. 編集した画像を選択

編集した画像を選択します。画像を選択すると右サイドバーに「エクスポート」という項目が表示されるので、これをクリックします。

2. エクスポートする

エクスポートパネルが開くと「〇〇をエクスポート」というボタンが表示されるので、これをクリックします。（今回の場合はマスク機能を使っているため「Mask groupをエクスポート」と表示されます）

3. ファイル名を設定し保存

ファイル名と保存先を入力・設定するパネルウィンドウが開くので、設定して右下にある「保存」をクリックします。

4. 書き出された画像を確認

上の画像のように、編集した画像を書き出すことができました。

まとめ

画像をトリミングする方法はFigmaを用いたWeb制作において必須の知識とスキルです。まずは、本記事を参考にして基本のトリミング方法をマスターしておきましょう!