Figmaの基本操作 - フレーム・シェイプ・テキスト

Figma基本操作 — 最初の30分で覚えるべきすべて

Figmaを開いた瞬間、無限に広がる白いキャンバスと見慣れないパネル群に戸惑う人は多いです。しかし実際に使う機能は限られており、最初の30分で基本操作をマスターすれば、あとは実践しながら自然に身につきます。このレッスンでは、フレーム作成からレイヤー管理まで、実際の作業で使う操作を順番に解説します。

Figmaインターフェース — 5つのエリア

---

インターフェースの5つのエリア

① レイヤーパネル（左側）

デザイン内のすべての要素が階層構造で表示されます。フレーム > グループ > 要素という入れ子構造で管理されます。レイヤー名を分かりやすくつける習慣が、後の編集効率を大きく左右します。

操作ショートカット:

• ◆Alt/Option + 1: レイヤーパネルを表示
• ◆レイヤー名ダブルクリック: レイヤー名を変更
• ◆Ctrl/Cmd + G: 選択した要素をグループ化

② キャンバス（中央）

無限に拡張できる作業スペースです。ここにフレームや要素を配置してデザインを作ります。

ナビゲーション:

• ◆マウスホイール: 上下スクロール
• ◆Ctrl/Cmd + ホイール: ズームイン/アウト
• ◆スペース + ドラッグ: 画面移動（パン）
• ◆Shift + 1: 全コンテンツをフィット表示

③ デザインパネル（右側）

選択した要素のプロパティ（サイズ・位置・色・角丸など）を設定・確認するパネルです。要素を選択しないと表示が変わります。

④ ツールバー（上部）

各種ツールアイコンが並びます。主要なものはショートカットキーで呼び出す方が素早く操作できます。

⑤ プロトタイプタブ（右側パネルの切替）

デザインタブを「Prototype」に切り替えると、画面遷移のアニメーション設定ができます。

---

フレームの作成

フレームとは何か

フレームはFigmaの基本単位で、デバイスの画面を表すコンテナです。Webページ、スマートフォン画面、タブレット画面など、デザインの「ページ」に相当します。

💡 Figmaでは「アートボード」ではなく「フレーム」と呼ばれます。フレームはAuto Layoutと組み合わせることで、CSSのFlexboxに対応した動的なレイアウトが作れます。

フレームの作成手順

1. ◆ショートカット F を押してフレームツールに切り替える
2. ◆キャンバス上でドラッグしてフレームを描く
3. ◆右パネルに表示されるデバイスプリセットから選択する方法も可能（iPhone 14, MacBook, etc.）

主要なフレームサイズ:

---

シェイプツール

基本シェイプの作成

Shiftキーを押しながらドラッグ: 正方形・正円を作成できます。

シェイプの編集

シェイプをダブルクリックするとノード編集モードに入り、個々の点を移動して形を変えられます。Figmaのベクター編集はIllustratorに近い操作感で、アイコン作成にも対応します。

---

テキストツール

テキストの追加

1. ◆T キーを押してテキストツールを選択
2. ◆キャンバスをクリック → 1行テキストを作成
3. ◆キャンバスをドラッグ → 固定幅のテキストボックスを作成

⚠️ 「クリックで作成」と「ドラッグで作成」の違いに注意してください。クリック作成のテキストは文字量に合わせて自動拡張しますが、ドラッグ作成は固定幅で折り返します。用途に合わせて使い分けましょう。

テキストのプロパティ設定

右パネルのTextセクションで以下を設定できます。

• ◆フォントファミリー（Google Fontsが直接使用可能）
• ◆フォントウェイト（Regular, Bold, etc.）
• ◆サイズ（px）
• ◆行間（Line Height）
• ◆字間（Letter Spacing）
• ◆テキスト揃え（左/中央/右/両端）

---

画像の配置

画像を配置する方法

方法1: ドラッグ&ドロップ PCのファイルマネージャーから画像ファイルをFigmaキャンバスに直接ドラッグします。

方法2: 塗り（Fill）として配置

1. ◆長方形などのシェイプを作成
2. ◆右パネルのFillセクションで「+」を押して塗りを追加
3. ◆塗りの種類を「Image」に変更して画像を選択

💡 方法2はシェイプの形に合わせて画像をクリッピングできるため、丸い画像（アバター）や角丸カード内の画像配置に適しています。

---

レイヤー管理

命名規則の重要性

「Rectangle 47」「Group 12」のような自動命名では、後でどのレイヤーが何か分かりません。チームで作業する場合は特に、一貫した命名規則が必要です。

推奨命名規則:

グループとフレームの違い

• ◆グループ（Ctrl+G）: 要素をまとめて移動・操作するための一時的なまとまり。子要素は独自のレイアウトルールを持ちません。
• ◆フレーム（F）: Auto Layoutや個別の背景色・角丸を設定できる独立したコンテナ。コンポーネントはフレームから作成します。

---

必須ショートカット一覧

---

🏋️実践ワーク

1. ◆新しいデザインファイルを作成し、iPhone 14サイズ（390×844px）のフレームを1つ作成してください。
2. ◆フレーム内にヘッダー用の長方形（390×60px）を作成し、背景色を #6366f1 に設定してください。
3. ◆ヘッダー上に「アプリ名」というテキストを追加し、フォントサイズ18px、色を白（#ffffff）に設定してください。
4. ◆テキストをヘッダーの左右中央に揃えてください（Alignボタン使用）。
5. ◆各レイヤーに適切な名前をつけてください（frame/home, header/bg, header/title）。

📝まとめ

Figmaのインターフェースはレイヤーパネル・キャンバス・デザインパネルの3エリアが中心です。フレームで画面の枠を作り、その中にシェイプ・テキスト・画像を配置します。ショートカットキーを積極的に使うことで操作速度が大幅に向上します。次のレッスンでは、Figmaを使いながらデザイン4原則を実践的に学びます。