Figma初心者向け！基本的な使い方と便利機能5選
Webデザインの世界へようこそ！近年、Webサイトやアプリケーションのデザインに欠かせないツールとして注目を集めているのが「Figma（フィグマ）」です。ブラウザ上で動作し、共同編集も容易なため、多くのデザイナーやチームに採用されています。
この記事では、これからFigmaを学び始める初心者の方に向けて、アカウントの作り方、画面の見方、最初のデザインの作り方から、知っておくと作業効率が格段にアップする便利な機能5つ、そして覚えておきたいショートカットまでを順番にご紹介します。
この記事でわかること
- Figmaとは？なぜ人気なの？
- Figmaを始める準備（アカウント作成）
- 基本的な画面構成と操作
- はじめの一歩：ボタンを1つ作ってみよう
- Figmaの便利機能5選
- 作業が速くなる基本のショートカット
- 初心者がつまずきやすいポイント
Figmaとは？なぜ人気なの？
Figmaは、UIデザイン、プロトタイピング、デザインシステムの構築などが可能なオールインワンのデザインツールです。主な特徴は次の通りです。
- ブラウザベース: インストール不要で、どのPCからでもアクセス可能。
- リアルタイム共同編集: チームでの作業が非常にスムーズ。
- 豊富な機能: ベクター編集、オートレイアウト、コンポーネント化など、高度なデザイン作業に対応。
- 無料プランあり: 個人利用や学習目的なら無料で始められる。
Figmaを始める準備（アカウント作成）
Figmaを使うには、アカウントの登録が必要です。登録は無料で、数分で終わります。
- Figmaの公式サイト（figma.com）を開き、右上の「無料で始める」ボタンを押します。
- メールアドレス、またはGoogleアカウントで登録します。
- 画面の案内に沿って、名前や利用目的などを入力します。
- 登録が終わると、そのままブラウザで使い始められます。Mac / Windows向けのデスクトップアプリも用意されています。
無料の「Starterプラン」で始められます。チームで共有するファイルの数などに上限がありますが、個人用の下書き（Drafts）は別です。学生・教員向けには教育機関向けの無料プランもあります。最新の条件は公式サイトで確認してください。
基本的な画面構成と操作
Figmaでデザインファイルを開くと、画面は大きく4つの領域に分かれています。
- 左側：ページ・レイヤーのパネル ページの切り替えと、画面に置いた要素の一覧です。要素の順番や名前をここで管理します。
- 中央：キャンバス デザインを作る作業スペースです。
- 右側：デザインパネル 選んだ要素の位置、大きさ、色、文字の設定などを変えます。上のタブで「デザイン」と「プロトタイプ」を切り替えます。
- 画面下部：ツールバー フレーム、図形、テキストなどのツールを選びます（以前のデザインの画面では上部にありました）。
基本的な図形の作成、テキストの入力、色の変更など、直感的に操作できるUIになっています。まずは次の3つの動きを覚えておくと、迷いません。
- キャンバスを動かす: スペースキーを押しながらドラッグします。
- 拡大・縮小: Cmd（Windowsは Ctrl）を押しながらマウスホイールを回します。
- 要素を選ぶ: 移動ツール（V）で、要素をクリックします。
はじめの一歩：ボタンを1つ作ってみよう
実際に手を動かすのが、いちばんの近道です。ここでは、四角い背景に文字を乗せた「ボタン」を1つ作ります。
- フレームを作る: ツールバーで「フレーム」を選びます（ショートカットは F）。右側のパネルに「スマホ」「タブレット」「デスクトップ」などのサイズの一覧が出るので、好きなものを選ぶか、キャンバス上でドラッグして作ります。ここでは練習用に、幅400・高さ300のフレームにしましょう（右側のパネルの「レイアウト」にある W と H に数値を入力します）。フレームは、デザインを置く「画用紙」のようなものです。
- 四角形を描く: 四角形ツール（R）を選び、フレームの中でドラッグして描きます。右側のパネルで、次の数値を入力しましょう。
- 大きさ：「レイアウト」の W に160、H に48
- 位置：「位置」の X に120、Y に126（フレームのちょうど真ん中に置かれます）
- 角の丸み：「外見」の欄にある角の丸みの数値に8
- 色：「塗り」の色のコードに 70C498
- 文字を入れる: テキストツール（T）を選び、四角形の上をクリックして「ボタン」と入力します。右側のパネルで、文字の大きさを16、太さを太字にして、色のコードを 1B4332 にします。最後に、四角形と文字の両方を選び、「位置」にある左右中央・上下中央の揃えのボタンを順に押すと、文字がボタンの真ん中に収まります。
- 書き出す: 完成したフレームを選び、右側のパネルの下のほうにある「エクスポート」の「＋」を押して、PNGなどの形式を選んで書き出します。
Figmaの便利機能5選
基本の操作に慣れたら、次の5つの機能を覚えていきましょう。デザインの作業が、ぐっと速く、きれいになります。
便利機能①: オートレイアウト (Auto Layout)
オートレイアウトは、要素間の余白や配置を自動で調整してくれる非常に強力な機能です。ボタンやリスト、カードなど、繰り返し使うUIコンポーネントを効率的に作成・管理できます。
たとえば、文字だけを選んで Shift + A を押すと、その文字を囲むフレームが自動で作られます。そのフレームに色と余白を付ければ、文字を増やしたり減らしたりしても、ボタンの大きさが自動で変わります。
やってみよう：
- 新しく「ボタン」と入力したテキストを作り、そのテキストだけを選んで Shift + A を押します。
- できたフレームを選び、右側のパネルで塗りの色、角の丸み、左右の余白（パディング）を設定します。
- 文字を「お申し込みはこちら」のように長くして、ボタンの幅が自動で広がることを確認します。
便利機能②: コンポーネント (Components)
繰り返し使用するデザイン要素（ボタン、アイコン、ヘッダーなど）をコンポーネントとして登録できます。マスターコンポーネントを編集すると、そのインスタンス（コピー）全てに修正が反映されるため、デザイン修正の手間を大幅に削減できます。
先ほどのボタンを選んで、Cmd + Option + K（Windowsは Ctrl + Alt + K）を押すと、コンポーネントになります。コピーをいくつか並べてから、元のボタンの色を変えてみてください。コピーのほうにも同じ変更が反映されます。
便利機能③: プロトタイピング (Prototyping)
デザインした画面同士を繋ぎ合わせ、実際のWebサイトやアプリのようなインタラクティブな動作確認ができる機能です。クリックやホバーなどのトリガーを設定し、画面遷移やアニメーションを簡単に作成できます。
このプロトタイピング機能を使うことで、デザインの段階でユーザー体験を検証し、手戻りを減らすことができます。クライアントへの提案時にも、実際の動きを見せながら説明できるため、より具体的なイメージを共有しやすくなります。
やってみよう：
- フレームを2つ作り、1つ目にボタンを置きます。
- 右側のパネルで「プロトタイプ」のタブに切り替えます。
- ボタンを選び、ボタンから2つ目のフレームへ矢印をつなぎます。
- きっかけ（トリガー）を「クリックしたとき」にして、画面右上の再生ボタンで動きを確かめます。
便利機能④: バリアント (Variants)
コンポーネントの異なる状態（例: ボタンの通常時、ホバー時、非アクティブ時など）をまとめて管理できる機能です。これにより、デザインシステムをより整理しやすくなります。一つのコンポーネントセット内で複数のバリエーションを定義し、プロパティパネルから簡単に切り替えることができます。
コンポーネントに慣れてきたら、ステップアップとして挑戦してみてください。ボタンの「通常」と「ホバー」の2つの見た目を、1つのコンポーネントにまとめるところから始めるのがおすすめです。
便利機能⑤: プラグイン (Plugins)
Figmaには豊富なプラグインが用意されており、これらを活用することで作業効率をさらに向上させることができます。例えば、ダミーテキスト生成（Lorem ipsum）、アクセシビリティチェック、画像の一括リサイズ、Unsplashなどのストックフォトサービス連携、アイコンライブラリへのアクセスなど、デザイン作業の様々な場面で役立つプラグインが見つかります。Figma Communityから簡単に検索・インストールできます。
インストールしたプラグインは、メニューや、クイックアクション（Cmd + /、Windowsは Ctrl + /）から呼び出して使います。
作業が速くなる基本のショートカット
Figmaは、ショートカットを覚えるほど作業が速くなります。まずは、よく使うものだけで十分です。Windowsの場合は、Cmd を Ctrl、Option を Alt に読み替えてください。
ツールを切り替える
- V：移動ツール
- F：フレーム
- R：四角形
- O：楕円
- L：線
- T：テキスト
- P：ペン
- H：手のひらツール（キャンバスの移動）
- C：コメント
要素を操作する
- Cmd + D：複製
- Cmd + G：グループ化（解除は Shift + Cmd + G）
- Cmd + Option + G：選んだ要素をフレームで囲む
- Shift + A：オートレイアウトを追加
- Cmd + Option + K：コンポーネントを作成
- Option を押しながらドラッグ：複製しながら移動
- Option を押しながら要素にカーソルを合わせる：ほかの要素との距離を表示
画面を見やすくする
- Shift + 1：すべての要素が見えるように表示
- Shift + 2：選んだ要素にズーム
- Cmd + /：クイックアクション（機能やプラグインを検索して実行）
初心者がつまずきやすいポイント
無料なのに、ファイルが作れなくなった
無料のStarterプランでは、チームで共有するファイルの数に上限があります。個人用の下書き（Drafts）で作業するか、不要なファイルを整理して対応しましょう。
要素が選べない、思った場所が選択されない
フレームやグループの中の要素は、1回のクリックでは中身ではなく外側が選ばれることがあります。ダブルクリックで中に入るか、Cmd（Windowsは Ctrl）を押しながらクリックすると、奥にある要素を直接選べます。
うっかり要素を動かしてしまう
動かしたくない要素は、選んで Shift + Cmd + L を押すと、ロックできます。もう一度押すと解除されます。背景などをロックしておくと安心です。
次に学ぶこと
基本と便利機能がひと通り分かったら、次のステップに進みましょう。
- 好きなWebサイトを1ページ選び、Figma上で再現してみる
- ボタンやカードをコンポーネントにして、使い回せる形に整える
- 自分でテーマを決めて、Webサイトを1ページ分デザインする
作ったデザインは、そのままポートフォリオの材料になります。作品のまとめ方は、未経験からの転職を成功させるポートフォリオ作成のコツで紹介しています。
まとめ
Figmaは非常に多機能ですが、まずは基本的な操作と今回ご紹介したような便利機能を使いこなすことで、デザイン作業が格段にスムーズになるはずです。ヒガキャリeラーニングのコースでもFigmaの操作は基礎からしっかり学べますので、ぜひ実際に触って、その魅力を体験してみてください！
