もう迷わない！Figmaの画面構成と必須ツールをやさしく解説

Posted on by

はじめてFigmaを開いた瞬間から迷わないためのガイド

Webデザイン・UIデザインを学び始めると、ほぼ必ず名前が出てくるツール Figma（フィグマ）。
無料で使えて、ブラウザだけで高機能なデザインが作れることから、多くの企業やクリエイターが導入しています。

しかし、初心者のうちは…

  • 画面のどこに何があるかわからない
  • ツールが多すぎて混乱する
  • Auto LayoutやComponentの存在すらわからない
  • どこを触ればデザインが始められるの？

と、最初の“画面理解”がつまずきポイントになりがちです。

そこでこの記事では、
初めてFigmaを開いても迷わないように、画面構成と必須ツールを徹底的にわかりやすく解説 します。

この記事を読み終わった頃には、

✔ 今どこを触っているのか
✔ どのツールを使えば良いのか
✔ どう作り始めれば良いのか

がスッキリ整理され、すぐにデザインを作り始められるようになります。

Figmaの画面は「4つのエリア」で理解すると迷わない

Figmaの画面は、次の4つに分けると理解しやすいです。

① 左：レイヤーパネル（Layers）

画面にあるすべての要素がここに一覧表示されます。
Figmaの操作で最も大事な場所のひとつ。

レイヤーパネルでできること

  • オブジェクトの選択
  • グループ分け・並び替え
  • 部品の名前管理
  • ページ切り替え

特に レイヤーの名前付け習慣 は後の作業効率を大きく左右します。

② 上：ツールバー（Tools）

図形、文字、Pen、Frameなどの基本ツールが揃う場所。

特に使うのは以下。

  • Move（選択ツール）
  • Frame（アートボード作成）
  • Rectangle（四角）
  • Text（文字）
  • Pen（線引き）
  • コメント機能

右上には 共有ボタン があり、URLだけで簡単に共有ができます。

③ 右：プロパティパネル（Properties）

“選択したものに合わせて” 内容が変化するゾーン。
Figmaの中で最も触る回数が多いエリアです。

プロパティパネルでは…

  • 位置・サイズの調整
  • フォント設定
  • 色の設定
  • Auto Layoutの設定
  • コンポーネント化
  • スタイルの登録

など、デザインの“属性”を変更できます。

④ 中央：キャンバス（Canvas）

実際のデザイン作業を行う場所。
ここにフレームを置き、文字や図形を配置していきます。

複数画面を並べたり、プロトタイプを作ったりもここで行います。

最低限覚えるべき“必須ツール”をわかりやすく解説

「結局、どのツールを使えばデザインできるの？」
そんな疑問に答えるために、まず覚えるべきツールだけに絞って紹介します。

① Move（選択ツール）Vキー

すべての基本。まずこれを使います。

  • クリックで選択
  • ドラッグで移動
  • Altドラッグで複製

ショートカット中心で操作できるようになると、作業速度が一気に上がります。

② Frame（Fキー）── 画面の“土台”を作る

Figmaではデザイン画面を Frame と呼びます。

使い方の例

  • PC画面：1440px
  • スマホ画面：390px
  • カスタム：自由設定

Frame を理解すると「どこから作ればいいか」が明確になります。

③ Rectangle（四角）Rキー

UIは四角でできている、と言われるほど重要。

  • ボタン
  • カード
  • 背景
  • セクション

錬金術レベルでいろんなUIが作れます。

④ Text（Tキー）── 文字入力ツール

デザインで最も多く使う要素は“文字”。

覚えておきたいポイント

  • フォント
  • フォントサイズ
  • 行間
  • 文字色
  • 太さ

行間はフォントサイズ × 1.4〜1.6 が基本。

⑤ Auto Layout（神機能）

Figmaの肝と言っていいほど重要。

  • 余白が自動で揃う
  • 要素を並べても崩れない
  • ボタン・カードが一瞬で作れる
  • リサイズに強くなる

最初は難しく感じても、慣れるともう戻れないほど便利。

⑥ Component（再利用パーツ）

UIを効率的に作るための機能。

  • 修正すると全パーツに反映
  • 一度作ると何度でも使える
  • 大規模デザインでも崩れにくい

最初に作るべきは「ボタン・ヘッダー・カードUI」。

⑦ Color Style / Text Style（スタイルの登録）

デザイン全体の統一感を保つための必須機能。

  • 色を登録
  • 文字スタイルを登録
  • 影や効果も保存できる

後から「全部の色を変えたい！」ときに一瞬で変更可能。

⑧ Zoom（ズーム操作）1・2キー

細かい作業には必須。

  • 1でズームアウト
  • 2でズームイン
  • Cmd＋スクロールでも可

スムーズに拡大縮小できるとストレスが激減します。

⑨ Prototype（画面遷移の設定）

作ったUIを“動かす”機能。

例：

  • ボタンを押す → 次の画面へ
  • モーダルを表示
  • スライドアニメーション

クライアントも「これならイメージが伝わる！」と感動してくれます。

Figmaの画面を迷わず使うためのコツ

初心者がつまずきやすいポイントを先回りして対処します。

① レイヤー名をつける習慣を“最初から”持つ

最初の敵はレイヤーのカオス。

名称例：

  • btn_primary
  • header
  • card_item
  • icon_search

名前をつけるだけで劇的に見やすくなります。

② Auto Layoutは「箱に入れる」と覚える

難しく考える必要はありません。

“箱に要素を入れるとキレイに並ぶ”

これだけ覚えておけば大丈夫。

③ わからなければ一度ツールを選択し直す

Figmaは選択しているものによって画面が変わるため、
迷ったら Vキー（選択に戻る） が最強のリセット。

④ とりあえず「フレーム → テキスト → 四角」で作り始める

最も基本であり、プロもこの流れで作っています。

最初に触れるべきFigmaの練習方法

ツールを覚えても、触らなければ意味がありません。

おすすめの練習法

  • Webサイトの模写
  • バナーの再現
  • LPのヘッダーだけ作る
  • アプリのログイン画面を作る
  • 既存デザインの改善（リデザイン）

1日15分でOK。
触った回数がそのまま成長スピードになります。

まとめ：Figmaは“画面構成”を理解すれば一気に使いやすくなる

最後にもう一度、Figmaの画面構成を復習します。

🔹 左：レイヤーパネル

構造を管理する場所

🔹 上：ツールバー

図形・文字・フレームを作る場所

🔹 右：プロパティパネル

属性を調整する場所

🔹 中央：キャンバス

デザインを作る場所

さらに使うべき必須ツールはこの8つ：

  1. Move
  2. Frame
  3. Rectangle
  4. Text
  5. Auto Layout
  6. Component
  7. Style
  8. Prototype

これらを理解していれば、Figmaで困ることはほとんどなくなります。

#Figma #Figma初心者 #Webデザイン #UIデザイン #UXデザイン #デザイン勉強 #Figma学習 #デザイン初心者 #今日の積み上げ #学習記録 #クリエイターと繋がりたい #デザイン垢さんと繋がりたい #デザイン独学 #デザイン練習 #毎日デザイン