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でコメントを非表示にする方法｜Shift+Cと「解決」の使い分け
Figmaでコメントの吹き出しが邪魔なときは、Shift + C を押します。 もう一度押すと戻ります。 非表示になるのは自分の画面だけです。 コメント自体は残り、ほかのユー…
8. コンポーネントプロパティ（Component Properties）
- 何ができる？
コンポーネントに対して、真偽値（boolean）やテキスト、レイヤーの表示切り替えなどの設定を持たせられる。 - 使いどころ
アイコンの表示・非表示の切り替えや、ラベルテキストの差し替えなど。
9. スタイル管理（Styles）
- 何ができる？
カラー、テキスト、エフェクトなどのデザイン属性を登録し、一括管理・再利用できる。 - 使いどころ
ブランドカラーや見出し・本文のタイポグラフィの一貫性維持。
10. ライブラリ共有（Team Library）
- 何ができる？
コンポーネントやスタイルをライブラリとして公開し、複数ファイルで共有できる。チームライブラリは有料プランの機能で、更新の反映には利用先での確認・適用が必要。 - 使いどころ
チーム開発、デザインシステムの運用、複数人でのUI設計。
11. モバイルアプリのミラー表示（Mirror）
- 何ができる？
FigmaモバイルアプリのMirrorタブで、PC側で選択した最上位フレームをプレビューできる。同じアカウントへのログインと対象ファイルの編集権限が必要。 - 使いどころ
モバイルアプリのUI確認、実機でのサイズ感や視認性の検証。
12. プラグイン（Plugins）
- 何ができる？
アイコン挿入、翻訳補助、ダミーデータ生成など、外部拡張機能を追加して作業を自動化・効率化できる。 - おすすめプラグイン例
Unsplash、Content Reel、Autoflow、Clean Document など。
Figmaの関連する操作手順や機能解説は、以下の記事もあわせて参考にしてください。
あわせて読みたい
Figmaの使い方まとめ｜操作・素材・ツール・トラブル対処
Figmaについて書いた記事を、目的別に分類しました。 操作に迷ったときと素材を探すときで入口を分けています。 各カテゴリーは閲覧数の多い順に表示しています。 記事…
書籍で体系的に学びたい場合はこちらを参照してください。
あわせて読みたい
Figmaのおすすめ書籍｜段階別に1冊ずつ選ぶ
Figmaを学ぶための書籍を段階別に紹介。1冊目に選ぶべき手を動かす入門書、実務のハンドオフまで学べる本、UIの判断力を養うアイデア集、Webデザインの土台を固める入門書まで、いまの段階に合う1冊が選べます。
PSDファイルを読み込む手順はこちらを参照してください。
あわせて読みたい
Figma│PSDデータを読み込むプラグイン「psd.to.design」
PSDデータをFigmaへ移行する際、別ツールを経由した変換ではデザインの再現に手間がかかるケースがあります。 Figmaプラグイン「psd.to.design」を使うと、PSDデータを…
余白やサイズを8の倍数で設計する考え方はこちらを参照してください。
あわせて読みたい
8の倍数の一覧（8〜2000）｜早見表・見分け方とUIデザインでの使い方
8の倍数を小さい順に並べた一覧です。 8, 16, 24, 32, 40, 48, 56, 64, 72, 80 … と、8ずつ増えていきます。 この記事では2,000までの数値を一覧表にまとめています。 …
テキストが編集できない場合の対処法はこちらを参照してください。
あわせて読みたい
Figma│文字サイズが変更できない・テキストを編集できない時の対処法
Figmaで文字を編集できないときは、ファイルの編集権限と使用フォントを先に確認します。 他の人から引き継いだデータや複製したテキストには、スタイルが設定されてい…
Figmaの基本的な使い方は、ほかにも書いています。
あわせて読みたい
Figma│Page（ページ）機能の使い方
Figmaのグループやフレームは、同じキャンバス内の要素を整理する機能です。 キャンバス単位で画面を切り替えて管理できるPage（ページ）機能を使うと、用途ごとに作業…
あわせて読みたい
Figma│セクションの使い方
Figmaのフレームやスライスの役割は知っていても、セクションをどう活用すべきか迷うことがあるかもしれません。 フレームはコンポーネントを配置してレイアウトを作成…
あわせて読みたい
Figma│ファイルのサムネイル（カバー画像）を設定する方法とサイズ
Figmaのファイルが増えてくると、ファイル一覧画面での見分けがつきにくくなります。 サムネイル（カバー画像）を設定しておくと、視認性が向上して目的のファイルを探…
あわせて読みたい
Figma│拡大縮小の3つのやり方｜表示・枠・中身ごと
Figmaの「拡大縮小」には、大きく3つの意味があります。 どれをしたいかで操作が変わります。 やりたいこと操作ショートカット画面の表示だけ大きくしたいズームShift +…
まとめ
| 機能 | 概要 | 主な用途 |
|---|---|---|
| オートレイアウト | 自動整列・リサイズ | レスポンシブ対応 |
| バリアント | 状態ごとの管理 | ホバー・選択状態など |
| プロトタイプ | 遷移・クリック設定 | モックアップ・プレゼン |
| コメント | フィードバックのやり取り | チーム連携・レビュー |
| スタイル／ライブラリ | 一元管理・共有 | チームデザイン統一 |
繰り返し使う部品はコンポーネントにし、部品の並び方や余白はオートレイアウトで設定すると、変更箇所を管理しやすくなります。
特にAuto Layout・Component・Variantの操作を習得しておくと、UIの設計速度や保守性の向上が期待できます。