画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法

画像をFigmaのキャンバスに配置する手順を紹介します。

手順

Figmaのデザインファイルを開きます。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像1

ウィンドウ左上のメニューボタンをクリックします。ドロップダウンメニューが表示されますので、 [ファイル]サブメニューの[画像を配置...]の項目をクリックします。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像2

画像選択ダイアログが表示されますので、配置したい画像を選択して開きます。

マウスポインタの右下に選択した画像のサムネイルが表示された状態になります。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像3

画像を配置したい場所にマウスポインタを移動し、クリックします。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像4

画像が配置されます。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像5

画像の配置ができました。

複数画像をまとめて配置する:画像を配置メニューを利用

複数画像をまとめて配置する場合の手順です。

今回、下図の6つの画像を配置します。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像6

ウィンドウ左上のメニューボタンをクリックします。ドロップダウンメニューが表示されますので、 [ファイル]サブメニューの[画像を配置...]の項目をクリックします。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像7

画像選択ダイアログが表示されますので、配置したい画像を複数選択して開きます。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像8

マウスポインタの右下に選択した画像のサムネイルが表示され、画像数もラベルで表示された状態になります。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像9

キャンバスをクリックすると、画像が配置されます。マウスポインタの右下の画像のサムネイルは、 次に配置される画像のサムネイルに変わり、画像数のラベルも一つ減ります。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像10

クリックするごとに2つ目、3つ目の画像が配置されます。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像11 画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像12
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像13 画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像14

画像が配置できました。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像15

複数画像をまとめて配置する:エクスプローラーからドラッグ&ドロップする

別の方法として、エクスプローラーからドラッグ&ドロップする方法もあります。
エクスプローラーで配置したい画像を複数選択し、キャンバス上にドラッグ&ドロップします。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像16
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像17

ドロップすると画像が整列された状態で、配置されます。
画像をFigmaのキャンバスに配置する。複数画像をまとめて配置する方法:画像18


複数の画像をキャンバスに配置できました。

AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2024-04-01
Copyright © 1995–2025 iPentec all rights reserverd.