PR: この記事にはアフィリエイトリンクが含まれています。購入により当サイトに手数料が支払われることがあります。
【Figma用語集】初心者が最初に覚えるべき30のデザイン用語
Figmaを始めたけど、用語がわからなくて困っていませんか？
「Frame? Component? なんのこと？」
Figmaのチュートリアルを見ても、専門用語が多くて理解が追いつかないという経験はありませんか？
実は、Figmaの操作そのものは直感的で簡単です。でも用語の壁があると、せっかくの学習効率が大きく下がってしまいます。
この記事では、Figma初心者が最初に覚えるべき30の用語を、カテゴリ別にわかりやすく解説します。
:::point この記事でわかること：
- Figmaの基本操作で使う用語
- レイアウト・配置に関する用語
- コンポーネント・スタイルの用語
- 共同作業・プロトタイプの用語 :::
【基本操作】まず覚えるべき10用語
1. Frame（フレーム）
デザインの枠組みとなる要素。画面サイズを決めたり、要素をグループ化したりするのに使います。
:::info Adobe XDの「アートボード」、Sketchの「アートボード」に相当する概念です。 :::
2. Layer（レイヤー）
デザイン要素の重なり順を表す概念。上にあるレイヤーが手前に表示されます。
3. Canvas（キャンバス）
デザインを作成する作業領域全体のこと。無限に広がる白い背景部分です。
4. Selection（選択）
オブジェクトをクリックして選ぶ操作。Shiftを押しながらで複数選択できます。
5. Group（グループ）
複数の要素をひとまとめにする機能。Ctrl/Cmd + Gで作成できます。
6. Zoom（ズーム）
画面の拡大・縮小。Ctrl/Cmd + マウスホイールで操作します。
7. Pan（パン）
キャンバスを移動する操作。スペースキー + ドラッグで行います。
8. Undo/Redo（元に戻す/やり直し）
操作の取り消し・復元。Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Zで実行。
9. Export（エクスポート）
デザインを画像やPDFとして書き出すこと。PNG、JPG、SVG、PDFに対応。
10. Import（インポート）
外部ファイルをFigmaに取り込むこと。画像やSVGを配置できます。
:::spec 用語学習のコツ
Figmaの用語は英語ベースのものが多いため、英単語の意味を知っているとイメージしやすくなります。デザイン単語帳では、日本語・英語両方で用語を学べるので、効率的に習得できます。 :::
【レイアウト・配置】覚えておきたい8用語
11. Alignment（アライメント/整列）
複数のオブジェクトを揃えること。左揃え、中央揃え、右揃えなど。
12. Distribution（均等配置）
オブジェクト間の間隔を均等にする機能。
13. Constraints（制約）
フレームのサイズが変わったときに、要素がどう動くかを設定する機能。レスポンシブデザインに必須。
14. Auto Layout（オートレイアウト）
要素を自動で整列・配置してくれる機能。ボタンの余白自動調整などに使用。
:::merit Auto Layoutのメリット
- 余白が自動で調整される
- 要素の追加・削除が楽
- レスポンシブ対応が簡単 :::
15. Padding（パディング）
要素の内側の余白。ボタン内のテキストと枠線の間隔など。
16. Margin（マージン）
要素の外側の余白。要素同士の間隔を調整。
17. Grid（グリッド）
デザインを整えるための格子状のガイド。レイアウトの基準線として使用。
18. Guides（ガイド）
要素を配置する際の補助線。ルーラーからドラッグして作成。
【コンポーネント・スタイル】効率化の要となる7用語
19. Component（コンポーネント）
再利用可能なデザイン部品。ボタンやアイコンなど、繰り返し使う要素を登録。
20. Instance（インスタンス）
コンポーネントのコピー。メインコンポーネントの変更が自動で反映される。
21. Variant（バリアント）
同じコンポーネントのバリエーションを管理する機能。ボタンの状態（通常/ホバー/押下）などを一元管理。
22. Override（オーバーライド）
インスタンスで一部だけ変更すること。テキストや色を個別に変えられる。
23. Style（スタイル）
色やフォント設定を保存したもの。デザイン全体で統一した見た目を保てる。
24. Color Style（カラースタイル）
よく使う色を登録して再利用できる機能。ブランドカラーの管理に便利。
25. Text Style（テキストスタイル）
フォント、サイズ、行間などの設定を保存。見出し、本文などを統一管理。
【共同作業・プロトタイプ】チームで使う5用語
26. Prototype（プロトタイプ）
画面遷移や動きをシミュレーションする機能。クリックで次の画面に移動、など。
27. Interaction（インタラクション）
プロトタイプでの操作と動作の組み合わせ。「クリックしたら〇〇が起きる」という設定。
28. Comment（コメント）
デザインにフィードバックを書き込む機能。チームメンバーとのやり取りに使用。
29. Version History（バージョン履歴）
過去のデザインを保存・復元できる機能。間違えても安心。
30. Share（共有）
デザインを他の人に見せる機能。リンクを発行して共有可能。
:::demerit 用語を知らないと起こる問題
- チュートリアルが理解できない
- チームメンバーとの会話が噛み合わない
- 機能を探すのに時間がかかる
- エラーメッセージの意味がわからない :::
用語を効率的に覚えるコツ
1. 実際に操作しながら覚える
用語を読むだけでなく、Figmaを開いて実際に触りながら覚えると記憶に残りやすくなります。
2. カテゴリごとに整理する
この記事のように、関連する用語をまとめて覚えると、概念同士の関係性が理解しやすくなります。
3. アプリで反復学習する
デザイン単語帳のようなアプリを使えば、スキマ時間に効率よく用語を復習できます。
よくある質問
:::qa Q. Figmaの用語は英語で覚えるべきですか？
A. はい、英語で覚えることをおすすめします。Figmaのインターフェースは英語がベースで、チュートリアルや記事も英語のものが多いためです。日本語で概念を理解しつつ、英単語も一緒に覚えておくと、学習リソースの選択肢が広がります。 :::
:::qa Q. Figma以外のツールでも同じ用語が使えますか？
A. 基本的なデザイン用語（レイヤー、マージン、パディングなど）は共通です。ただし、ツール固有の機能名（Auto Layout、Variantなど）は異なる場合があります。まずは基本概念を押さえれば、他のツールへの応用も効きます。 :::
:::qa Q. 30個の用語、どのくらいで覚えられますか？
A. 1日5〜10個ペースで、1週間程度が目安です。一度に全部覚えようとせず、実際にFigmaを使いながら少しずつ定着させていくのがコツです。 :::
まとめ
:::summary Figma用語学習のポイント
- 基本操作の用語（Frame、Layer、Canvasなど）をまず押さえる
- レイアウト用語（Alignment、Auto Layoutなど）で配置を理解
- コンポーネント用語（Component、Instance、Variantなど）で効率化
- 共同作業の用語（Prototype、Comment、Shareなど）でチーム連携
用語を知っているだけで、Figmaの学習速度は格段に上がります。デザイン単語帳を活用して、効率的にマスターしましょう。 :::
:::cta
デザイン用語をスキマ時間で効率的に学習
デザ単：デザイン単語帳 App
:::
関連記事
- デザイン用語30選｜初心者が最初に覚えるべき基礎単語
- CanvaやFigmaを使う前に知っておきたい「デザイン前提知識」
- デザイン本が難しいと感じたら「用語」を疑え
- デザインスクール vs 独学、どちらが向いている？
※ 画像出典：Unsplash（Balázs Kétyi）
よくある質問
関連トピック完全ガイド
詳細解説記事
このトピックに関する5件の記事で、 包括的な情報を提供しています。
