こんにちは！現役フリーランスデザイナーのてらしいです。前回の記事ではFigmaのアカウント作成から基本操作まで、ご紹介しました。実際に手を動かしてみて、Figmaの直感的な操作感に驚いているかもしれませんね。
今回は、Figmaの真価をさらに引き出す「コンポーネント」と「オートレイアウト」のご紹介です。
「デザインシステム」とか「レスポンシブデザイン」とか、ちょっと難しそうな言葉が出てきたな…と思ったあなた、大丈夫です！私も最初はそうでした。でも、安心してください。これらの機能をマスターすれば、あなたのデザイン作業は劇的に効率化されます。
なぜこれらの機能がデザイナーにとって不可欠なのか、そしてどうすれば効率的に使いこなせるのか、具体的な活用術を惜しみなくお伝えします。Figmaを制する者がデザインを制する理由が、きっとさらに深く理解できるはずです！
1. デザインを「部品化」する！コンポーネントとバリアントでデザインシステムを構築
Figmaの「コンポーネント」機能は、デザインの一貫性を保ち、効率を爆発的に高めるための最重要機能です。そして、「バリアント」は、そのコンポーネントをさらに柔軟に管理するための強力な拡張機能と言えます。これらを使いこなすことで、単にデザインを作るだけでなく、「デザインを資産として管理し、再利用可能なシステムを構築する」という、より高度なレベルのデザイナーへとステップアップできます。
1-1. コンポーネントの基本と再利用性：なぜデザインは部品化すべきなのか？
想像してみてください。あなたは今、クライアントから大規模なウェブサイトのリニューアル案件を受けています。そのサイトには、同じデザインの「お問い合わせボタン」が何十箇所、何百箇所も散りばめられています。ある日、クライアントから「ボタンの色をブランドカラーに合わせて青から緑に変更してほしい」と依頼が来ました。
もしコンポーネントを使っていなければ、あなたは何百箇所のボタンを一つ一つ手作業で探し出し、色を変更しなければなりません。気が遠くなるような作業ですよね。しかも、変更漏れのリスクもつきまといます。
しかし、Figmaのコンポーネントを使っていれば、この手間はほとんどゼロになります。
コンポーネントとは、「再利用可能なデザイン要素のマスター（親）」のことです。一度コンポーネントとして登録しておけば、それを複製して好きな場所に配置できます。この複製されたものを「インスタンス（子）」と呼びます。
そして、最も重要なのがここです。マスターコンポーネント（親）に変更を加えると、その変更が**すべてのインスタンス（子）に自動的に、リアルタイムで反映されるんです。**これがコンポーネントの最大のメリットであり、現代のデザインワークフローにおいて不可欠な理由です。この「一度作れば何度でも使える、しかも一括で更新できる」という特性が、デザイン作業の効率を劇的に向上させます。
【コンポーネントの作り方】 まずは、基本的なコンポーネントの作成方法から見ていきましょう。
ボタンの背景となる四角形と、その上に配置するテキストレイヤーなど、コンポーネントにしたいデザイン要素を作成します。これらを必要に応じてグループ化しておくと管理がしやすくなります。今回はボタンをサンプルにコンポーネント化します。
作成した要素（またはグループ）を選択します。
右部のツールバー中央付近にある「コンポーネント作成アイコン（ひし形が重なったようなアイコン）」をクリックします。または、Macなら「Option + Cmd + K」、Windowsなら「Alt + Ctrl + K」のショートカットキーでも作成できます。
コンポーネント化されると、元の要素はマスターコンポーネントとなり、紫色でハイライト表示されます。また、左側のサイドバーにあるレイヤーパネルの「アセット」タブに、このマスターコンポーネントが登録されます。
【インスタンスの使い方】 アセットパネルに登録されたマスターコンポーネントから、必要な場所に複製して利用するのがインスタンスです。
左側のサイドバーで「アセット」タブをクリックします。
アセットパネルに表示されている作成したコンポーネントを、キャンバス上の好きな場所にドラッグ＆ドロップします。これでインスタンスが作成されます。 もしくは対象のコンポーネントをクリックし、「インサートインスタンス」をクリックすれば作成されます。
作成されたコンポーネントをクリックして、紫色の枠で囲まれていれば成功です。親要素から生まれた子要素（インスタンス）です。
この「部品化」の考え方は、単に効率を上げるだけでなく、デザインの一貫性を保つ上でも非常に重要です。バラバラなデザインはユーザーを混乱させ、ブランドイメージを損なう可能性があります。コンポーネントを適切に利用することで、常に統一されたユーザー体験を提供でき、将来的な修正や機能追加の際の手間を大幅に削減できます。
まさに、デザインを「資産」として積み上げていくための第一歩であり、デザイナーとしてのあなたの価値を向上させる強力な武器となります。
1-2. バリアント（variant）によるコンポーネントの柔軟な管理：状態変化をスマートに表現
コンポーネントは非常に便利ですが、「ボタン」一つとっても、「通常時（Default）」「マウスオーバー時（Hover）」「クリック時（Pressed）」「無効時（Disabled）」「アイコン付き」「アイコンなし」など、様々な「状態」や「タイプ」が存在しますよね。これらを一つ一つ別々のコンポーネントとして管理していると、アセットパネルがボタンだらけになってしまい、管理が煩雑になります。
そこで登場するのが、Figmaのバリアント（Variant）です。
バリアント（variant）とは、一つのコンポーネントの中に、複数の「状態」や「タイプ」をまとめる機能です。これにより、単一のマスターコンポーネントで、様々なパターンをスマートに管理できるようになります。
例えば、「Button」というマスターコンポーネントの中に、「type: primary / state: default」「type: primary / state: hover」「type: secondary / state: disabled」といった複数のバリアントを作成し、プロパティとして管理できます。
【バリアントの作り方】
まずは、バリアントとしてまとめたい、それぞれの状態やタイプを持つコンポーネントを個別に作成します。
例えば、色違いのボタンや、テキストの有無が異なるボタンなどです。
サンプルで #button_white #button_red を配置しました。
作成した複数のコンポーネントをすべて選択すると、右側のプロパティパネルにある「Design」タブの下部に「Combine as variants」ボタンをクリックします。
すると、選択したコンポーネント群が一つにまとめられ、紫色の点線で囲まれたバリアントセットが作成されます。
プロパティパネルには「Property 1」などのデフォルトのプロパティ名と値が表示されます。
- このプロパティ名を「State」「Type」「Size」など、分かりやすい名前に変更します。
- 各バリアントを選択し、プロパティパネルでそのバリアントが持つ「値」を設定します（例：「State: Default」「State: Hover」など）。
バリアントを使う最大のメリットは、作成したインスタンスを選択した際に、右側のプロパティパネルからドロップダウンリストで簡単に状態やタイプを切り替えられる点です。
これにより、レイヤーパネルがコンポーネントの羅列で溢れかえることなく、非常にスマートに、そして直感的にデザインを管理できるようになります。
1-3. デザインシステム（Style Guide）の考え方とFigmaでの実装
コンポーネントとバリアントの概念をさらに発展させたものが、現代のデザインワークフローにおける中心的な概念である「デザインシステム」です。
デザインシステムとは、単なるUIパーツ集ではありません。それは、デザインの原則、ガイドライン、再利用可能なコンポーネント、スタイル（色、タイポグラフィ、スペーシングなど）を体系的にまとめた、生きているドキュメントです。
これにより、チーム全体で一貫したデザインを効率的に作成・運用し、ブランドイメージを統一しながら、ユーザー体験の質を高めることができます。
Figmaは、このデザインシステムを構築・運用するのに最適なツールです。その理由は、コンポーネントとバリアントの強力な機能だけでなく、以下のFigmaの特性にもあります。
【Figmaでのデザインシステム実装のポイント】
スタイル（Styles）の活用
デザインシステムの中核となるのが、定義された「スタイル」です。Figmaでは、色、タイポグラフィ（フォントの種類、サイズ、行間など）、エフェクト（影など）、グリッドなどのスタイルを登録し、一元管理できます。
これにより、例えば「メインカラー」を一つ変更するだけで、そのスタイルが適用されているすべての要素の色が一瞬で更新されます。
右側のプロパティパネルで、塗りやテキストの横にある「四つの点」アイコンをクリックして、既存のスタイルを適用したり、新しいスタイルを登録したりできます。
コンポーネントライブラリの作成と公開
デザインシステムを運用する上で最も一般的な方法は、すべてのコンポーネントとバリアント、そしてスタイルをまとめた専用のFigmaファイルを「デザインシステムファイル」として作成することです。
「Publish library」をクリックしてチーム内で共有すれば、0からコンポーネントを作る必要がなく、マスターファイルのみ修正すれば、他のファイル内にあるコンポーネントにすべて反映されます。
命名規則の統一
コンポーネントやスタイルの命名規則をチーム内で統一することは、デザインシステムの管理性と検索性を向上させる上で非常に重要です。
例えば、「Button/Primary/Default」「Color/Brand/Primary」のようにスラッシュで階層化する命名規則は、Figmaのアセットパネルやスタイルパネルでグループ化されて表示されるため、非常に視覚的に分かりやすくなります。
デザインシステムを導入することで、デザイナーだけでなく、エンジニアやプロダクトマネージャー、マーケターなど、プロダクト開発に関わる全てのステークホルダーがデザインのルールを理解しやすくなり、コミュニケーションコストが大幅に削減されます。
結果として、開発プロセス全体の効率と品質が向上し、より高品質なプロダクトを迅速に市場に投入できるようになります。フリーランスとしてクライアントワークを行う際も、デザインシステムを提案・構築できるスキルは、あなたの価値を大きく高め、長期的なパートナーシップに繋がるでしょう。
1-4. アセットパネルの活用と共有ライブラリ：チームでデザイン資産を共有する
左側のサイドバーにある「アセットパネル」は、あなたが作成したコンポーネントや、チームで共有されているコンポーネント、そしてスタイルを管理し、利用するためのハブとなる場所です。このパネルは、Figmaが提供する「デザインシステム」の入り口とも言えます。
アセットパネルには、大きく分けて2つのセクションがあります。
- ローカルコンポーネント
現在開いているFigmaファイル内で作成されたコンポーネントが表示されます。まだ共有ライブラリとして公開されていない、このファイル固有のコンポーネントです。 - チームライブラリ
チームで共有されているコンポーネントやスタイルが表示されます。
特に重要なのが「チームライブラリ」です。これはFigmaの有料プランで利用できる機能ですが、大規模なプロジェクトや、複数のデザイナーが関わるチームでデザインシステムを運用する際には必須となります。チームライブラリを公開することで、異なるFigmaファイル間（例えば、Webサイトのデザインファイルとモバイルアプリのデザインファイル）で、同じコンポーネントやスタイルを共有できるようになります。
【チームライブラリの活用方法】
まず、コンポーネントやスタイルをまとめた「デザインシステム」専用のFigmaファイルを作成します。
そのファイルを開き、左側のサイドバーにある「Assets」をクリック。
対象ライブラリーを右クリック「Publish library」をクリックします。これで、このファイルをチームライブラリとして公開できます。
※ただし、Starterプランでは公開できないため、Professionalプラン（有料）へ切り替える必要があります。
別のFigmaファイルを開き、左側のサイドバーのアセットパネルの一番上にある「Books」アイコン（リソースアイコン）をクリックします。ここで、公開されているチームライブラリを有効にすることで、そのライブラリ内のコンポーネントやスタイルがアセットパネルに表示され、利用できるようになります。
これにより、プロジェクトごとにデザイン要素を複製する手間がなくなり、常に最新かつ一貫性のあるデザイン資産をチーム全体で利用できるようになります。
私はフリーランスとして複数のプロジェクトに関わっていますが、この共有ライブラリのおかげで、どのプロジェクトでもスムーズにデザイン作業を進められ、クライアントからの信頼も得やすくなっています。
2. レスポンシブデザインの強力な味方！オートレイアウトでどんな画面にもフィット
現代のデジタルプロダクトは、PC、タブレット、スマートフォン、さらにはスマートウォッチなど、非常に多様な画面サイズやデバイスで利用されます。それぞれの画面サイズに合わせてデザインを調整することを「レスポンシブデザイン」と呼びますが、Figmaの「オートレイアウト（Auto layout）」機能は、このレスポンシブデザインを驚くほど簡単に、そして効率的に実現してくれます。
オートレイアウトをマスターすることは、手動での調整地獄から解放され、デザインの変更や拡張に柔軟に対応できる、真のレスポンシブUIを構築する鍵となります。
2-1. オートレイアウトの基本設定と使い方：要素が自動で並ぶ！
オートレイアウトとは、フレーム内の要素が、その内容や親フレームのサイズに応じて自動的に配置やサイズ調整される機能です。
例えば
- ボタンのテキストが長くなっても、ボタンの幅が自動的に広がる。
- 複数の項目が並んだナビゲーションバーで、項目を追加・削除しても、残りの項目が自動的に均等に配置される。
- 要素の並びを縦から横、横から縦に一瞬で切り替えられる。
これらは、オートレイアウトが自動的に要素間の間隔やパディングを計算してくれるためです。
【オートレイアウトの設定方法】 基本的な使い方から見ていきましょう。
ボタンのテキストとアイコンなど、オートレイアウトを適用してまとめたい複数のオブジェクトを選択します。または、すでにグループ化されているものでも構いません。
右側のプロパティパネルの「Design」タブの下部にある「Auto layout」セクションを見つけます。その横にあるボタンをクリックするか、「option + command + A」のショートカットキーを押します。
すると、選択したオブジェクトがオートレイアウトが適用された新しいフレーム（Frame1）にまとめられます。
このフレームは、レイヤーパネル上でもアイコンで識別できます。 オートレイアウトフレームを選択すると、右側のプロパティパネルに様々な設定項目が表示されます。
主要な設定項目は以下の通りです。
- 方向（Direction）: フレーム内の要素を「縦（Vertical）」に並べるか、「横（Horizontal）」に並べるかを設定します。
- 間隔（Spacing between items）: フレーム内の各要素間の余白を設定します。
- パディング（Padding）: フレームの内側の余白、つまりフレームの境界線とコンテンツの間のスペース（上下左右）を設定します。
これらの設定を調整するだけで、要素が自動的に整列し、内容の変化に柔軟に対応するデザインを驚くほど簡単かつ迅速に作成できます。
2-2. パディング、ギャップ、アラインメントの制御：細かな調整で完璧なレイアウトに
オートレイアウトの真の力を引き出すためには、パディング、ギャップ、アラインメントという3つの概念を深く理解し、使いこなすことが不可欠です。これらを適切に制御することで、どんなコンテンツや画面サイズにも「フィット」する完璧なレイアウトを構築できます。
パディング（Padding）
オートレイアウトフレームの「内側」の余白です。フレームの境界線と、そのフレーム内のコンテンツ（要素）との間に設定するスペースを指します。
例えば、ボタンのテキストとボタンの背景の端との間の余白、カードのコンテンツとカードの枠との間の余白などを設定する際に使います。これはCSSのpaddingプロパティと同じ概念です。
ギャップ（Spacing between items）
オートレイアウトフレーム内の「要素間」の余白です。フレーム内の個々の要素と要素の間に設定するスペースを指します。 例えば、ナビゲーションメニューの各項目間のスペース、フォームの入力欄と信ボタンの間のスペースなどを設定する際に使います。 プロパティパネルの「Spacing between items」で数値を設定します。
アラインメント（Alignment）
オートレイアウトフレーム内で、その中の要素をどのように配置するかを設定します。左揃え、中央揃え、右揃え、上揃え、下揃えなど、様々な配置方法があります。 また、要素が親のオートレイアウトフレームのサイズに合わせてどのように伸縮するか（Resizing）も非常に重要です。
- Hug Contents（コンテンツを抱きしめる）
要素のコンテンツのサイズに合わせてフレームが自動的に伸縮します。例えば、テキストの長さに合わせてボタンの幅が自動的に変わるように設定できます。 - Fill Container（コンテナを埋める）
親フレームのサイズに合わせて、要素が自動的に拡大・縮小します。これはレスポンシブデザインで特に重要です。 - Fixed Width/Height（固定幅/高さ）
要素のサイズを固定します。
これらの設定を組み合わせることで、非常に柔軟で予測可能なレイアウトを作成できます。最初は少し複雑に感じるかもしれませんが、実際にFigmaでオートレイアウトフレームを作成し、数値を変更したり、Resizingの設定を切り替えたりして、どのような変化が起こるのかを試してみるのが一番の近道です。
2-3. ネスト（入れ子）構造で複雑なレイアウトを構築：オートレイアウトは重ねて使う！
オートレイアウトの真の力は、オートレイアウトフレームの中に別のオートレイアウトフレームを配置する「ネスト（入れ子）」構造にあります。つまり、オートレイアウトフレーム自体を、別のオートレイアウトフレームの「要素」として扱うことができるのです。
これにより、非常に複雑なUIでも、細かく分解されたオートレイアウトフレームの組み合わせとして構築することが可能になります。まるでレゴブロックを積み重ねるように、小さな部品（オートレイアウトフレーム）を組み合わせて大きな部品（オートレイアウトフレーム）を作り、最終的に一つの完成されたUIを構築するイメージです。
【ネスト構造の具体例】
例えば、以下のようなカードコンポーネントを考えてみましょう。
一番外側のオートレイアウトフレーム（縦方向）
画像、タイトル、本文、ボタンを縦に並べる。
カードの中のオートフレーム（縦方向）
画像：通常の画像オブジェクト。
タイトルと本文：これら2つのテキストレイヤーをさらに別のオートレイアウトフレーム（縦方向）でまとめて、コンテンツのブロックを形成。
ボタン：ボタン自体が、テキストと背景を含むオートレイアウトフレーム（横方向）として作成されている。
このように、小さなオートレイアウトフレームを組み合わせて、より大きなオートレイアウトフレームを作成していくことで、複雑なUIでも簡単にレスポンシブ対応させることができます。
ネスト構造を意識することで、デザインの変更や調整が格段に楽になります。
例えば、上記のカードコンポーネントで、タイトルが長くなっても、オートレイアウトが自動的に作用し、その下の本文やボタンが自動的に下に移動し、レイアウトが崩れる心配がありません。あるいは、画像とテキストの間に新しい要素を追加したい場合も、手動で全ての要素をずらす必要がなくなります。
このネストの考え方を理解し、実践することで、あなたは「壊れないデザイン」を作れるようになります。これは、大規模なプロジェクトにおいて、デザイナーがチームから絶大な信頼を得る上で非常に重要なスキルです。
2-4. レスポンシブ対応のUIデザイン実践：Figmaで自在にサイズ調整
オートレイアウトを駆使することで、様々な画面サイズに対応したレスポンシブデザインを効率的に作成できます。もはや、PC用、タブレット用、スマホ用と、同じデザインを複数作成する必要はありません。
1.最小単位からオートレイアウトを適用
まずはボタンや入力フォーム、テキストブロックなど、UIの最小単位となる要素からオートレイアウトを適用していきます。これが「壊れない部品」の基盤になります。
2.ネスト構造でまとめる
最小単位のオートレイアウトフレームを組み合わせ、セクション（例：ヘッダー、フッター、カードリストなど）ごとにオートレイアウトフレームでまとめていきます。
3.制約（Constraints）との組み合わせ
オートレイアウトフレーム自体を、親のフレーム（例えば、ウェブサイトのページ全体を表すフレーム）内でどのように配置・伸縮させるかを、制約機能（右側のプロパティパネル）と組み合わせることで、より柔軟なレスポンシブ対応が可能です。
- 「Left & Right」で左右の余白を保ちつつ横幅を可変にする。
- 「Top & Bottom」で上下の余白を保ちつつ高さを可変にする。
- 「Scale」で全体を拡大縮小させる。 これらの設定をオートレイアウトと組み合わせることで、親フレームのサイズが変わったときに、子要素が意図した通りに反応するようになります。
4.画面幅のテスト
異なる画面幅のフレーム（例：デスクトップ、タブレット、モバイルの各フレーム）を複数作成し、そこに完成したデザインをコピー＆ペーストして配置します。オートレイアウトと制約が正しく機能していれば、自動的にレイアウトが調整され、各デバイスに最適化された表示が確認できるはずです。
オートレイアウトをマスターすれば、もう画面サイズが変わるたびに手作業で要素を調整する手間から解放されます。これは、デザイナーの生産性を飛躍的に向上させるだけでなく、エンジニアとの連携もスムーズになります。エンジニアはあなたのFigmaファイルを見て、どのようにレスポンシブに対応させるべきかを明確に理解できるようになるため、手戻りが減り、開発スピードも上がります。
まとめ：Figmaの強力な機能で、あなたのデザインワークフローを革新しよう！
今回は、Figmaの「コンポーネント」と「オートレイアウト」という、デザインを効率化し、一貫性を保ち、レスポンシブに対応させるための強力な機能について解説しました。
最初は少し専門的に聞こえるかもしれませんが、これらの機能を使いこなすことは、現代のUI/UXデザイナーにとって間違いなく必須のスキルです。
- コンポーネントとバリアント: デザインを部品化し、再利用性と管理性を高めることで、デザインシステム構築の基盤となります。これにより、あなたは「常に一貫性のあるデザイン」を「効率的」に生み出せるようになります。
- オートレイアウト: 要素の自動配置とサイズ調整を可能にし、レスポンシブデザインの作成を劇的に効率化します。これにより、あなたは「どんな画面にも対応できる壊れないデザイン」を「迅速」に構築できるようになります。
これらの機能を使いこなせば、あなたは単に美しいデザインを作成するだけでなく、「拡張性があり、メンテナンスしやすいデザイン資産」を生み出せるデザイナーへと進化できます。
これは、フリーランスとして高単価な案件を獲得し、クライアントから長期的な信頼を得る上で非常に重要な要素です。Figmaを味方につけることで、あなたのデザイン業務は飛躍的にレベルアップし、より価値のある仕事に取り組むことができるようになります。実際の案件でもデザインシステムの構築が必須だったりします。
ぜひ、今回の内容を参考に、実際にFigmaで手を動かし、コンポーネントとオートレイアウトを体験してみてください。きっと、あなたのデザインワークフローが劇的に変わるはずです。
次回は、Figmaのもう一つの強力な機能である「プロトタイプ」について、さらに深く掘り下げていきます。動くデザインの作成方法から、ユーザーテストへの活用まで、あなたのデザインを次のレベルへと引き上げる方法をお伝えします。お楽しみに！
Figma guide series
Figmaマスターへの道 #1：未経験からUI/UXデザイナーになったフリーランスが語る、Figmaを制する者がデザインを制する理由
Figmaマスターへの道 #2：迷わない！Figmaの始め方と爆速で慣れるための基礎の基礎