Figmaは、UI/UXデザインにおいて今やスタンダードとも言えるツールです。
ですが、Figmaには他のツールにはない強力な「固有機能」がいくつもあります。
この記事では、Figmaを使うなら最初に覚えておくべき基本機能12選を、具体的な用途とともにご紹介します。
目次
Figmaでまず覚えるべき基本機能12選｜オートレイアウト・バリアント・プロトタイプなど
1. オートレイアウト（Auto Layout）
- 何ができる？
要素の間隔やパディングを自動で管理し、ボタンやカードなどを柔軟にリサイズできる。 - 使いどころ
レスポンシブ対応、テキスト量に応じて伸縮するボタン、一覧の繰り返しレイアウトなど。
2. コンポーネント（Component）
- 何ができる？
再利用可能なパーツ（ボタン・カードなど）を一元管理できる。 - 使いどころ
ボタン・ナビ・カード・モーダルなど、UIの共通部品。
3. バリアント（Variants）
- 何ができる？
ひとつのコンポーネントに複数の状態（通常／ホバー／選択中など）を持たせる。 - 使いどころ
ラジオボタン、トグルスイッチ、フォームの入力状態など。
4. インスタンスの上書き（Instance Overrides）
- 何ができる？
親のコンポーネントのデザインを保持しつつ、個別のテキストや画像などを変更可能。 - 使いどころ
コンポーネント化したカードの中で、タイトルだけ変えたいときなど。
5. プロトタイピング（Prototyping）
- 何ができる？
画面同士をリンクし、クリックやホバー時の動作を再現できる。 - 使いどころ
アプリのモックアップ、サイトの動き確認、クライアントへのプレゼンなど。
6. スマートアニメーション（Smart Animate）
- 何ができる？
スムーズな遷移・アニメーションが可能になるプロトタイプ機能。 - 使いどころ
カルーセルの切り替え、メニューの開閉アニメーションなど。
7. コメント機能（Comment）
- 何ができる？
特定の位置にピンを打って、直接フィードバックができる。非デザイナーでも使いやすい。 - 使いどころ
社内レビュー、クライアント確認、修正指示など。
あわせて読みたい
Figma│コメントを非表示にする方法
Figmaで作業中、コメントの吹き出しが邪魔に感じることはありませんか？ 特に画面を比較・整理したいときや、クライアントに画面を見せたいときに、コメントが視認性を…
8. コンポーネントプロパティ（Component Properties）
- 何ができる？
コンポーネントに対して、チェックボックスやテキスト入力、表示切り替えなどのオプションを持たせられる。 - 使いどころ
「チェック済み／未チェック」「表示／非表示」などのUI操作要素に最適。
9. スタイル管理（Styles）
- 何ができる？
色・文字・効果などのデザイン要素をスタイルとして再利用・一元管理できる。 - 使いどころ
ブランドカラーや見出し・本文のテキストスタイルの一貫性維持。
10. ライブラリ共有（Team Library）
- 何ができる？
チームでコンポーネントやスタイルを共有し、常に統一されたデザインを保てる。 - 使いどころ
チーム開発、ブランドガイドライン、複数人でのデザイン設計。
11. フィグマミラー（Figma Mirror）
- 何ができる？
スマホでリアルタイムにデザインを確認できるアプリ。 - 使いどころ
モバイルアプリのUI確認、現場での動作確認に便利。
12. プラグイン（Plugins）
- 何ができる？
アイコン挿入、翻訳補助、架空データ生成など、Figmaに便利な機能を追加できる。 - おすすめプラグイン例
→ Unsplash、Content Reel、Autoflow、Clean Document など。
まとめ
| 機能 | 概要 | 主な用途 |
|---|---|---|
| オートレイアウト | 自動整列・リサイズ | レスポンシブ対応 |
| バリアント | 状態ごとの管理 | ホバー・選択状態など |
| プロトタイプ | 遷移・クリック設定 | モックアップ・プレゼン |
| コメント | フィードバックのやり取り | チーム連携・レビュー |
| スタイル／ライブラリ | 一元管理・共有 | チームデザイン統一 |
これらの機能を押さえることで、Figmaの使いこなしレベルが一段階アップします。
特にAuto Layout・Component・Variantは、早めにマスターすると長期的な効率が格段に変わります。
