Figma超入門：初心者が最初の1週間で覚えるべき9つの基本操作

Posted on by

“最速でFigmaに慣れるための完全ガイド”

WebデザインやUIデザインを始めようと思ったとき、多くの人が最初に触れるツールが Figma（フィグマ）。
無料で使えて、操作も直感的で、バナー・LP・アプリUIまで幅広く作れる万能ツールです。

しかし最初は、

  • どこから触ればいいかわからない
  • 何ができるツールなのか曖昧
  • 使い方を調べても情報が点在している

そんな状態になりがち。

そこでこの記事では、
初心者が“最初の1週間”で覚えるべき、たった9つの操作 をまとめました。

これだけマスターすれば、
バナー・ワイヤー・簡単なUIデザインは確実に作れるようになります！

Day 1〜2：Figmaの基礎操作編

① フレーム（アートボード）を作る

Figmaの“画面の土台”になるのが Frame（フレーム）。
Webやアプリの各画面は、このフレームの中に作ります。

できること

  • PC画面サイズ（1440px）
  • スマホ画面（iPhone 14 / 390px）
  • カスタムサイズも自由

フレーム名をページ名にすると、デザイン整理が格段に楽になります。

② 文字（Text）の入力と基本設定

Figmaで最もよく使うのが文字ツール。

ここだけ覚えればOK

  • 文字サイズ（font-size）
  • 行間（Line Height）
  • 太さ（Regular / Medium / Bold）
  • 文字揃え（中央・左揃え）

行間＝フォントサイズ × 1.4 を基本にするとキレイに見えます。

③ 図形ツール（Rectangle / Ellipse / Line）

UIデザインの90%は図形でできています。

  • Rectangle（四角）
  • Ellipse（丸）
  • Line（線）

これらを組み合わせるだけで、
ボタン・カード・バナー・背景など何でも作れます。

丸み（Corner Radius）も頻繁に使うので要チェック。

Day 3：配置と整列で“きれいなデザイン”に

④ 整列（Align）と分布（Distribute）

Figmaで整ったデザインを作るには必須の機能。

よく使う整列

  • 横中央揃え
  • 縦中央揃え
  • 左右揃え
  • 上下揃え

分布

複数の要素の間隔を均一に揃える。

この機能を使うだけで、
初心者でも“プロっぽいデザイン”に近づきます。

⑤ グループ化 / レイヤー構造の理解

Figmaはレイヤー管理が命。

基本操作

  • Cmd + G：グループ化
  • Option + ドラッグ：複製
  • Layerの順番（前後関係）

レイヤーを整理して名前をつける習慣をつけておくと、後の成長スピードが格段に変わります。

Day 4〜5：Figmaの“コア機能”を覚える

⑥ Auto Layout（超重要｜Figmaの本質）

Figma最大の特徴が Auto Layout。

これを使うと：

  • 要素が増えても崩れない
  • 余白が自動調整される
  • ボタンやカードUIが簡単に作れる
  • レイアウト修正に強いデザインになる

よく使う設定

  • Padding（内側余白）
  • Gap（要素の間隔）
  • Horizontal/Vertical方向
  • Content / Fixedの幅設定

Auto Layoutを理解すると、デザインの質と速度が一気に向上します。

⑦ コンポーネント化（再利用の仕組み）

UIデザインでは「使い回せるパーツ」が重要。

コンポーネント化すると

  • ボタンを1つ変更すると、全画面に反映
  • UIの統一感が保たれる
  • 修正がラク
  • プロジェクト全体が崩れにくい

最初に作るべきコンポーネント：

  • ボタン
  • カード
  • ナビゲーション
  • 入力欄（Input）

⑧ Style設定（色・文字・影）

デザイン全体の統一のカギは スタイル化。

  • Color Style
  • Text Style
  • Drop Shadow
  • Grid Style

特に Text Style（文字スタイル） は早めに設定するのがオススメ。
どのページも読みやすくなり、作業効率も倍に。

■ Day 6〜7：実務で役立つ操作を覚える

⑨ プロトタイプ（画面遷移）

Figmaのプロトタイプ機能を使うと：

  • ボタンをクリック → 次の画面へ
  • モーダル表示
  • スマホスワイプ
  • アニメーション（Smart Animate）

など“動くUI”が作れるように。

クライアントやチームへの説明が格段にしやすくなります。

最初の1週間で作れるデザイン例

ここまでの9つの操作ができれば、以下が作れます。

✔ SNSバナー

✔ WebサイトのTOPデザイン（簡易）

✔ LPのヘッダー

✔ カードUI

✔ スマホアプリの画面

✔ ログイン画面

✔ プロトタイプ（画面遷移）

特別なセンスは不要。
仕組みを理解すれば誰でもできるようになります。

■ 9つの基本操作を効率よく覚えるコツ

✔ 模写が最短ルート

プロのUIを真似するだけで、ルールが身につく。

✔ 毎日10分だけ触る

触る頻度がスキルに直結。

✔ Auto Layoutを徹底的に使う

最初は難しく感じますが、本質は“箱に要素を入れるだけ”。

✔ コンポーネントは早めに作る

後で修正がラクになる。

✔ SNSでアウトプット

作ったものをXで投稿するとモチベが続く。

まとめ：Figmaの基礎は“9つだけ”覚えれば十分

初心者が最初の1週間で覚えるべき操作はこの9つ：

  1. フレーム
  2. テキスト
  3. 図形
  4. 整列
  5. グループ化
  6. Auto Layout
  7. コンポーネント
  8. スタイル設定
  9. プロトタイプ

この9つを理解できれば、
あなたはもう“Figmaを使える人”の仲間入りです。

ここからは、模写・リデザイン・ポートフォリオでさらに成長できます。