Figma の始め方と基本操作ガイド【2024年最新】

1️⃣ アカウント作成から UI の把握まで

基本 UI のポイント

• 左パネル：Frames, Layers, Assets が配置されており、レイヤー構造やコンポーネントが一覧できる。
• 右プロパティパネル：選択したオブジェクトのサイズ・位置・スタイルを即時編集可能。
• ツールバー：Move (V), Frame (F), Rectangle (R) など、頻出ツールがショートカットキーと共に表示される。

Tip
初回は「Frames」だけでも作成できればデザインを開始できるので、細かい設定は後から慣れながら追加するとスムーズです。

2️⃣ レイアウトグリッドの正しい設定例

レイアウトグリッドは 一貫した UI を実現するための土台です。以下では モバイル画面（幅 360 px）向け の代表的な設定を示します。

設定手順

1. フレームを選択 → 右プロパティの Layout grid をクリック。
2. 「+」で新規グリッドを追加し、Columns に切り替える。
3. 上表の数値を入力し、Count, Gutter, Margin を設定する。

注意
同一ファイル内で複数のブレークポイント（例：モバイル／タブレット）を扱う場合は、フレームごとに別々のグリッドを作成し、コンポーネント化して再利用すると管理が楽です。

3️⃣ プロトタイプ作成の基本操作

画面遷移の流れ

1. Prototype タブへ切替
   デザインモード右上の Prototype をクリック。

2. ノード（青い円）で接続
   ボタンやアイコンなどリンクさせたいオブジェクトからドラッグし、遷移先フレームにドロップするだけ。

3. インタラクション設定

4. On Click → Navigate to（通常遷移）
5. 必要に応じて Overlay, Push, Smart Animate などを選択

主な遷移タイプと使いどころ

実装例
「一覧画面 → 詳細画面」へ Smart Animate を設定し、Duration = 300 ms、Easing = Ease‑in‑out とすると、要素が自然に拡大・移動して遷移します。

4️⃣ マイクロインタラクションの実装例

基本パラメータ

コンポーネント + Variants で実装する例

ボタンホバー

1. Default と Hover の 2 Variant を作成。
2. Prototype タブで Hover → Default に Smart Animate、Easing = Ease‑in、Duration = 150 ms を設定。

トグルスイッチ

1. On / Off の 2 Variant を用意。
2. 切替時は Overlay + Smart Animate、Duration = 250 ms、Delay = 0 ms。

モーダル表示

1. モーダルフレームを非表示状態で作成（Opacity = 0）。
2. ボタンからモーダルへ Overlay → 「Center」配置、Easing = Ease‑out、Duration = 300 ms を設定。

ポイント
コンポーネントの Variants と Smart Animate の組み合わせだけで、コードを書かずに高度なマイクロインタラクションが実装できます。

5️⃣ プレビュー・共有と最近のアップデート活用術

デバイスフレームでのプレビュー手順

1. 上部メニューの Present ボタンをクリック。
2. 表示されたデバイスリストから iPhone 14、Pixel 7 など目的の端末を選択。
3. 実際にタップ・スワイプが可能になるので、画面サイズやインタラクションを即座に確認できる。

公式ドキュメント: Figma Help – Present prototypes

共有・ハンドオフの流れ

最近追加された便利機能とプラグイン（信頼できる情報源）

注記
本稿で紹介したプラグインはすべて Figma の公式コミュニティページから取得できます。外部サイトの情報に比べ、公式リポジトリが最も信頼性が高いです。

6️⃣ まとめ

• アカウント作成 → 基本 UI 把握 だけでデザインをすぐに開始できる。
• レイアウトグリッドは 12 列（または用途別の 4 列） を統一し、ガターとマージンを明示的に設定することで、一貫性が保たれる。
• Prototype タブと Smart Animate の組み合わせ によりコード不要で高度な画面遷移が実装可能。
• Variants と Micro‑interaction パラメータ だけで、ボタンホバーやトグルスイッチなどの細かな動きを簡単に作れる。
• 公式プレビュー・共有機能 と Inspect タブ を活用すれば、デザインと開発のハンドオフがシームレスになる。
• 最新機能（Boolean Props）や公式プラグイン（Figmotion, Autoflow） は作業効率と表現力を大幅に向上させるので、ぜひ導入してみてください。

本ガイドは 2023 年末から 2024 年初頭にかけて公開された Figma の公式情報を元に作成しています。最新情報は常に Figma Release Notes を確認してください。