1.概要
Figmaには便利で高機能な機能が数多く用意されていますが、このページでは Figmaを初めて触る方が、まず押さえておきたい基本操作 に絞って解説します。
以下のnoteで紹介しているFigmaの活用方法もここで紹介している操作方法をもとに読み進められる内容となっています。
興味のある方はこちらもご覧ください。
note記事
https://note.com/junki_dogphoto/n/n9b23a2761c4e
※ 本資料は 2026年1月時点 のFigmaの画面構成・仕様をもとに作成しています。
今後のアップデートにより、インターフェースや名称が一部異なる場合がありますので、あらかじめご了承ください。
2.基本の操作方法
（1）ファイルの操作
ファイルの新規作成
Figmaのログイン後、アイコンをクリックしつつ新規ファイルを作成します。
左上のFigmaアイコン→ファイル→新規→Designでファイルが開きます。
ファイル一覧(ダッシュボード)を確認する
無料アカウントではファイルは3つまで作成できます。
ダッシュボードでは、ピンクで囲っているものがファイルにあたります（図参照）。
ファイルを開いている状態であれば、左上のFigmaアイコン→ファイルに戻るでダッシュボードに戻ります。
ファイルの保存
Figmaはオートセーブです。
ブラウザを閉じても、改めてログインすれば操作途中から作業を再開できます。
（2）画面の構成
（3）用語説明
操作方法を説明する上で最低限押さえておいてほしい用語だけをご説明します。
ドラフト
Figmaで作成したファイルを一時的に保存しておく場所です。
個人用の作業スペースで、他の人には共有できません。
（共有機能は無料アカウントでも使うことができます。別途設定が必要になります。）
基本的にはドラフト上でデザインをしていくことになります。
ページ
1つのFigmaファイルの中に作れる「作業の区切り」です。例えると、ファイル=ノート、ページ=ノートの1ページです。
ページは1ファイル内に複数作成できます。「＋」アイコンで追加できます。無料アカウントではファイルは3つまでですが、ページを分けることでたくさんのデザインの作成・管理が可能です。
オブジェクト
キャンバス上の図形やテキスト、画像などを総称してオブジェクトを呼びます。
図の場合、以下の3つのオブジェクトがあります。
・「洗濯物」というテキストボックス
・青い四角
・ティッシュの箱の写真
オブジェクトはクリックすることで選択できます。
レイヤー
キャンバス上にある要素を一覧で管理する仕組みです。透明なシートを重ねて管理しているようなイメージです。
個々のレイヤーは左サイドバーの レイヤーパネル に表示されます。
上下関係があり、上にあるレイヤーほど手前に表示されます。ドラッグして並べ替えができます。
分かりやすいよう名前をつけることもできます。
図では、先ほどのオブジェクトがそれぞれレイヤーとして挿入されていることが分かります。
・「洗濯物」というテキストボックス
・青い四角
・ティッシュの箱の写真
（4）図形
図形の作成方法
ツールバーにある四角形のアイコン（□） が図形ツールです。
真横の下矢印を押すと色々な図形が選択できますが、初心者の方は四角形、線、楕円の描き方を押さえておけば十分です。 ここでは、長方形を例に説明を進めます。 アイコンをクリックし、キャンバス上でクリックすると長方形のオブジェクトが作成されます。図形の寸法設定
寸法を変更するには、右サイドバーにあるレイアウト–サイズのWとHを変更します。数字を入力するか、矢印キーで調節します。
カーソルで直接拡大縮小もできます。
図形の見た目の変更
よく使う変更点は塗りつぶし/枠線/透明度です。
・塗りつぶし：右サイドバーにある塗りの色を変更します。塗りつぶしをやめて透明にしたいときは、「ー」アイコンをクリックします。
・枠線：右サイドバーにある線の色を変更します。線をなくすときは、「ー」アイコンをクリックします。
・透明度：右サイドバーにある外見–不透明度の数字を変更します。0%になると完全に透明になります。
（5）テキストボックス
テキストの作成方法
ツールバーにあるTのアイコン（T） がテキストツールです。
アイコンをクリックし、キャンバス上でクリックするとテキストボックスのオブジェクトが作成されます。 テキスト内でエンターを押せば改行されます。テキストの見た目の変更
よく使う変更点はフォント/色です。
・フォント：右サイドバーにあるタイポグラフィでフォントに関する変更が可能です。フォントの種類・文字サイズ・配置はよく使います。
・色：文字の色を変更します。
（6）グループ
レイヤーを複数選択してグループにまとめることができます。
グループを作成するとグループ単位での編集や操作がしやすくなります。また、グループごとに名前をつけることもでき、レイヤーの構造が分かりやすくなります。
図では洗濯物と青い四角レイヤーを洗濯物グループにグループ化しています。
複数のレイヤーを選択した状態で右クリック→選択範囲のグループ化でグループが作成されます。ショートカットはcont+Gです。
グループをダブルクリックすると名前を編集可能です。
（7）画像
画像の挿入方法
画像素材をFigmaのキャンバス上にドラッグ＆ドロップすることで、画像を挿入できます。
画像の寸法設定
寸法を変更するには、右サイドバーにあるレイアウト–サイズのWとHを変更します。数字を入力するか、矢印キーで調節します。
カーソルで直接拡大縮小もできます。
画像のトリミング
画像のトリミングが可能です。右サイドバーの画像の中にあるトリミングアイコンをクリックします。すると画像に青い枠のマークが表示されるので、これをカーソルで動かして調節します。