Figmaを使い始めるときに、まず覚えておきたいのは 画面のどこに何があるか という基本構成です。
このページでは、Figmaの画面を「スタート画面」「キャンバス」「レイヤーパネル」「プロパティパネル」「ツールバー」
に分けて紹介します。操作練習に入る前に、全体の見え方を軽くつかんでおきましょう。
スタート画面
Figmaを開くと最初に表示されるのが、この スタート画面 です。ここでは「何を作るか」を最初に選びます。
画面右上にある Design（デザインファイル）FigJam（ホワイトボード・付箋などの共同作業に使う） Sliders（テンプレートなど）・・・などが作成する内容によって、まずはクリックするボタンです。
Figma基礎では、基本的に「Design」をクリックして作業画面へ進みます。
最もよく使うのがこの「Design」ボタンです。
画面左側にある、「最近」「コミュニティ」「ドラフト」「すべてのプロジェクト」などはあとから見ていきましょう。
ではDesign をクリックして作業画面へ入りましょう。
キャンバス（中央エリア）
画面中央に広がる作業エリアが キャンバス です。
ここにフレーム（画面サイズ）を置き、図形・テキスト・アイコン・画像などを配置していきます。
- 実際の制作を行う“メインの作業場所”
- Ctrl / Cmd + ホイールで拡大縮小（ズーム）
- Spaceキーを押しながらドラッグするとキャンバスを移動できる
ワイヤーフレームも、バナーも、UIデザインも、すべてこのキャンバス上で作成します。
レイヤーパネル（画面の左側）
キャンバスの左には レイヤーパネル が表示されています。ここには、今のファイルの中にある要素がすべて一覧で並びます。
最初は 「アセット」タブ が開いているので、
アセット横の “ファイルアイコン” をクリック してレイヤーパネルに切り替えましょう。
レイヤーとは？
Figmaでは、作成した図形・テキスト・フレームなど、すべての要素が レイヤー として管理されます。
Photoshop や Illustrator を触ったことがある方は、同じイメージです。
レイヤーのポイント
- 上にあるレイヤーほど 手前 に表示される
- ドラッグで順番を入れ替え可能
- フレームの中にフレームを入れる “入れ子構造” が作れる
- 名前をつけると管理しやすく、後のコーディングにも役立つ
レイヤーはHTML/CSS の構造（親子関係）と似ているため、今後のワイヤーフレーム学習でも重要な部分になります。
プロパティパネル（画面の右側）
画面右側にあるのが プロパティパネル です。ここが Figma の中で最も大切なパネルで、選択した要素のすべての設定をここで変更できます。
プロパティパネルは、選択している内容によって表示が変わります。
- 何も選択していないとき
- フレームツールを選んだとき
- 図形を選んだとき
- テキストを選んだとき
たとえばテキストを選ぶとフォント・行間・サイズが表示され、文字以外の要素ではその項目が消えるなど、常に“今選んでいるもの”に応じて内容が切り替わります。
Figmaに慣れるコツは、右側のプロパティをよく見る習慣をつけること です。
ツールバー（画面下部）
画面下部の細長いエリアが「ツールバー」です。ここにFigmaの主要ツールが並んでいます。左から
- 選択・移動ツール
- フレームツール
- 長方形ツール 図形を作成する
- ペンツール 自由な線を描く
- テキストツール
- コメントツール
- アクション
またアイコン右にある 、他のツールが出てきます。
画面構成のまとめ
- キャンバス → 作業する場所
- レイヤーパネル → 要素の一覧
- プロパティパネル → すべての調整を行う
- ツールバー → 図形・テキストなどの操作
まずはこの4つの位置だけ覚えておけば、Figmaの画面で迷うことが少なくなります。
