こんにちは、ラフデザインスクールの「ラフスクール運営事務局」です。
Figmaを触り始めたばかりの方から「機能が多すぎて、何から覚えればいいか分からない」という相談をよくいただきます。実は、Figmaは全部を一気に覚える必要はありません。先に“実務で使う頻度が高い順”で覚えると、制作スピードが一気に上がります。私たちも受講生さんを見ていて、伸びる方ほど「よく使う10個」を先に押さえて、作品づくりに入るのが早い印象です。この記事では、Figma初心者がまず覚えるべき10機能を、実務での使用順にまとめました。今日から制作に使えるよう、できるだけわかりやすく紹介します。

まずこれだけ！制作の土台になる3機能（フレーム／レイアウト／整列）

最初は「画面を作る土台」を押さえるだけでOKです。

① フレーム（Frame）

Webデザインでいう“画面の枠”です。
LPやサイトを作るときは、まずフレームを作って、その中に要素を置きます。

• PC幅（例：1440）
• スマホ幅（例：375）
  など、画面サイズの目安にもなります。

② レイアウトグリッド（Layout grid）

ガイド線のようなものです。
カラムや余白のルールが作れるので、見た目が一気に整います。

• 12カラム
• 余白（マージン）
  を設定すると、配置が迷いにくいです。

③ 整列・分布（Align / Distribute）

ボタンやカードを「きれいに揃える」機能。
初心者ほど“なんとなく置く”でズレが出がちなので、整列は必須です。

• 左揃え・中央揃え
• 等間隔に並べる
  を使うだけで、プロっぽく見えます。

次に覚える3機能（オートレイアウト／制約／コンポーネント）

ここからが「作業が速くなる」ゾーンです。実務では超頻出です。

④ オートレイアウト（Auto layout）

要素を並べたときに、余白や並びを自動で保ってくれる機能です。

• ボタンの中の文字が増えても崩れない
• カードの中身が増えても余白が保たれる
  など、レスポンシブ的な作り方にも繋がります。

⑤ 制約（Constraints）

親フレームのサイズが変わったとき、要素をどう追従させるか決める機能。

• 右に固定
• 上下左右に固定
• センター固定
  などを設定しておくと、スマホ版の調整が楽になります。

⑥ コンポーネント（Component）

同じパーツを使い回すための機能です。
例：ボタン、ヘッダー、カード、見出しパーツ
一度作ってコンポーネント化すると、全体の統一感も出ますし、修正も一括でできて時短になります。

実務で差がつく2機能（スタイル／バリアント）

「それっぽい」から「仕事として整理されている」状態に近づく機能です。

⑦ スタイル（Styles：文字・色・影など）

文字サイズや色をスタイルとして登録しておくと、ルールが崩れにくくなります。

• 見出し：32px
• 本文：16px
• メインカラー：#〇〇
  などを決めておくと、デザインの品質が安定します。

⑧ バリアント（Variants）

コンポーネントの“状態違い”をまとめる機能です。
例：ボタンの

• 通常／ホバー／押下
• 大／中／小
  などをセットで管理できます。UI案件では特に役立ちますが、LPでも「ボタンのサイズ違い」などで便利です。

最後に覚える2機能（プロトタイプ／共有・書き出し）

最後は「見せる」「渡す」ための機能です。転職・副業どちらにも必須です。

⑨ プロトタイプ（Prototype）

画面遷移やクリックの動きをつけられます。

• 「このボタンを押したら次の画面へ」
• 「メニューを開く」
  など、簡単な動きがあるだけで、提案が伝わりやすくなります。

⑩ 共有・書き出し（Share / Export）

提出や納品のための機能です。

• URLで共有（閲覧のみ／編集可など）
• PNG/JPG/SVGで書き出し
  副業では納品形式が大事なので、書き出しは必ず練習しておきましょう。
  ※「2倍書き出し（@2x）」などが必要な場面もあります。

まとめ

Figma初心者が最初に覚えるべき10機能は、フレーム／グリッド／整列 → オートレイアウト／制約／コンポーネント → スタイル／バリアント → プロトタイプ／共有・書き出し の順で押さえるのが実務的です。

全部を完璧に覚えるより、まずこの10個だけ使って「1作品を完成」させるのが一番の近道です。
ラフスクール運営事務局として感じるのは、Figmaは“操作を覚える”より“作りながら覚える”方が伸びるということ。

もし「どの機能をどう使えば作品になるか」で迷ったら、制作課題に落とし込んで一緒に整理できますので、気軽に相談してください。