お知らせバーです。

【Figma】無料のフリー素材サイトから取得した画像を切り取る方法!

新人ブロガー

フリー素材サイトからイラストセットをダウンロードしたんだけど、Figmaで画像の切り抜きもできるの?

先輩ブロガー

もちろん。Figmaは画像の加工もできるわ♪

この記事でわかること!

  • Figmaでフリー素材のイラストセットをトリミングする方法
  • Figmaで画像をトリミングする方法
目次

Figmaで画像を切り取る方法は?

イラストACなどのフリーのイラスト素材サイトで提供されている画像の中には、1枚のファイルに複数のイラストがセットになって提供されていることがあります。

この場合、必要な部分をトリミング(切り抜き)して使うことが多いです。

Figmaなら、画像のトリミング機能を使って画像の切り抜きができます。

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

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

Figmaで画像をトリミングする手順(解説)

STEP
トリミングしたい画像を用意します。

画像を用意します。今回は、イラストACさんから下のイラストセット画像をダウンロードしました。

イラストACはフリー素材の配布サイトです。
無料イラスト【イラストAC】

\1分のユーザー登録で無料で使えます!/

Figma イラスト画像のトリミング方法
先輩ブロガー

今回は上のイラストセットの中のケーキの画像だけ切り抜いてみますね。

STEP
Figmaで画像ファイルを読み込みます。

用意したイラスト(または写真)ファイルをFigmaに読み込みましょう。

ドラッグ&ドロップで簡単に読み込むことができます。よくわからない方は下記の記事を参考になさってください。

Figmaで画像ファイルを開く方法

STEP
画像を複製します。

そのままトリミングしても良いのですが、一旦画像を複製して使います。

「ケーキを切り抜いたあとにドーナツの画像も欲しい」と要望がでることもあるかもしれません。このような時のために画像をコピーして元画像をデザインファイル上に残しておくと良いでしょう。

Figmaでオブジェクトをコピペする方法

Figma イラスト画像のコピー(複製)方法

▲画像を複製するにはAltキー(Macの場合:Optionキー)を押しながらマウスでドラッグします。

画像の複製方法
Windowsの場合:Altキーを押しながらドラッグ
Macの場合:Optionキーを押しながらドラッグ

STEP
画像を選択します。
Figma イラスト画像のトリミング

▲画像が複製できたら、どちらか一方の画像を選択した状態にします。

STEP
画像のプロパティの中の「プロパティ」をクリックします。
Figma イラスト画像のトリミング

▲Figmaの右側のサイドバーの中の「塗り」プロパティをクリックして「拡大」をクリックします。

Figma イラスト画像のトリミング

▲トリミングをクリックします。

STEP
青い枠線を切り抜く形に調整します。
Figma イラスト画像のトリミング

▲図のように青い枠線が表示されます。

Figma イラスト画像のトリミング

▲青い枠線を切り取りたい形にドラッグ&ドロップで調整し、エンターキーを押します。

STEP
画像を切り抜くことができました。
Figma 画像のトリミング

▲画像を切り抜きできました。

新人ブロガー

簡単だね。

画像のトリミングをやり直しする方法は?

トリミングしたすぐあとでしたら、「Ctrl+Z(ひとつ前に戻るショートカット)」を押すとトリミングした操作をなかったことにできます。

Figmaのトリミングは、あとから何度でもやり直しができます。

例えば、「やっぱり、ケーキじゃなくてドーナツを切り抜きたい」という時は、画像をダブルクリックしてもう一度、画像のプロパティを開いて青い枠線を表示させ、枠線のサイズを調整します。

詳しくは動画の後半で解説していますのでご覧ください。

画像の複数個所をトリミングする方法は?

例えばケーキとドーナツを別々にトリミングしたい時は、ケーキをトリミングしたあと、元画像をコピーしてドーナツをトリミングすればOkです。

詳しくは動画の後半で解説していますのでご覧ください。

まとめ

先輩ブロガー

Figmaで画像のトリミングについて解説しました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次