FigmaでWebデザインをする上で必須となってくるのが、作成したデザインを再利用することができるコンポーネントの作成です。
ボタン・見出し・カード型UIなど、同じサイト内で共通で使うパーツを管理することができます。

「コンポーネントって何が便利なの？」
「バリアントってなに？いつ使うの？」

と思っている方へ、Webボタンの作成を通して実践的に解説致します。

Figmaのコンポーネントとは？

例えば、Webサイトでは同じデザインのボタンを複数使用することがありますよね。
そのたびにコピーして配置で作成していると、

• 修正漏れが発生する

• デザインにズレが生じる

• 作業時間が増える

といった問題が起こりやすくなります。

そこで便利なのが、コンポーネント機能です。

作成した元デザインをコンポーネント化することで、
元データであるメインコンポーネントを修正すると複製したデザインにも変更が反映される仕組みです。

まずは実際にボタンを作りながら、コンポーネントの便利さを体験してみましょう。

まずはシンプルなボタンを作ってみよう

今回作成するボタンは以下の通りです。

• 背景は赤

• 文字は白

• 角丸あり

• 横長のシンプルなボタン

1.テキストレイヤーを追加する

フォントサイズや文字色も設定しますが、白文字をこのまま打ってしまうとキャンバスが白の場合見えないので見やすい色にしておきます。

2.テキストレイヤーをオートレイアウトのフレームに変換する

オートレイアウトを使用することで、

• 余白調整

• テキスト量の増減

• フォントサイズの変更

などの修正に柔軟に対応できるようになります。

3.背景色や角丸など、ボタンのスタイルを設定する

ボタンが完成しました！
続いてこのボタンをコンポーネント化してみましょう！

ボタンをコンポーネント化する方法

コンポーネントに変換する

コンポーネント化すると、レイヤーパネルのアイコンが変わります。

インスタンスを複製してみる

インスタンスは元データのコンポーネント（Figma公式では「メインコンポーネント」と呼ばれています）と連動しているため、メインコンポーネントを修正するとインスタンスにも変更が反映されます。

メインコンポーネントを修正するとインスタンスが一括変更される

実際にボタンの背景色を変更してみましょう。

ボタンのメインコンポーネントの背景色を青に変更してみました。
複製したボタンインスタンスにも同じ変更が反映されていることを確認してみてください。

Webデザインは同じパーツを繰り返し使用することが多いため、たとえば上記のようにボタンの色を変更する修正が入った場合などに、作業効率が大きく向上します。
これがコンポーネントの大きなメリットと言えます。

インスタンスのテキストを打ち換えても、メインコンポーネントのテキストは変更されません。
このように同じデザインで違うテキストのボタンを複製していくことができます。

※右クリックメニューで「変更をメインコンポーネントにプッシュ」すると、メインコンポーネントに変更が反映され、インスタンスすべてにも反映されますので、覚えておくと便利です。

テキスト量の増減によって複製したボタンのテキストのはみ出しやズレが発生しないように、
ボタン幅はコンテンツを内包にしておくと便利です。

バリアントを使って状態違いを作ろう

次に、バリアント機能を使ってボタンの状態違いを管理してみます。

Figmaのバリアントとは？

たとえば、Webボタンの状態には次のようなものがあります。

• 通常状態（Default）

• ホバー状態(Hover)

• 無効状態(Disabled)

• 色違い(Primary / Secondary)

このように状態が違うボタンのデザインをあらかじめ作成しておいて、デザイン内で簡単に使い分けできるように管理することができます。

通常ボタンとホバー状態を作る

Hover側は少し背景色を濃くしたり、塗りと線のカラーを反転させたりすると、変化がわかりやすくなります。

Default（通常）/Hover（ホバー）

とレイヤー名を付けておき、それぞれをコンポーネント化します。

バリアントをまとめる

2つのボタンの状態を持つコンポーネントが作成されました。
この方法でコンポーネント化した場合は「Component 1」等のデフォルトのコンポーネント名になるので、任意で分かりやすい名前を付けておきます。
今回は「btn_CONTACT」としておきます。

※バリアントは、1つの要素をコンポーネント化した後、右側のデザインパネルに表示される「プロパティ」横の「＋」をクリックすると、メインコンポーネントの枠外に「＋」のアイコンが表示されるのでそちらをクリックすることでも追加が可能です。（下図参照）

また、＋のアイコンを押すとコンポーネント内のバリアントを1ずつ追加していくことができます。

アイコンあり＋なし／PCデザイン＋SPデザイン
などの状態違いのボタンも一つのコンポーネントで管理すれば、より便利でスピーディにWebデザイン作成をすすめることができます。

作成したバリアントを使ってみよう

まず、アセットパネルを開いて、作成したボタンを配置します。
ボタンコンポーネントをクリックして「インスタンスを挿入」またはドラッグ&ドロップでインスタンスをキャンバス上に配置します。

配置したボタンインスタンスを選択すると、右側のプロパティパネルにデフォルトのプロパティ名である「プロパティ 1」等の項目が表示されます。
ここをクリックするとプロパティ名が変更できるので、今回は「State」※と入力します。
※このプロパティ名には任意の名前を付けることができますが、ボタンの状態を管理する場合は「State」としておくのが一般的で分かりやすいです。

このstateプロパティのセレクトボックスで

Default／Hover

を切り替えるだけで、ボタンのデザインを変更できます。

たとえば、通常時は「Default」、マウスを乗せた状態をデザインで表現するときは「Hover」を選択するといった使い方ができます。

色違いのバリアントを作成した場合も、同じようにプロパティを切り替えるだけで表示を変更できます。

実務では、デザイナーが同じボタンを何度も作り直すのではなく、バリアントを切り替えながら画面を作成していくことが一般的です。

まとめ

いかがでしたでしょうか。
コンポーネント・バリアントにはまだまだ便利な機能があるのですが、一度に詰め込みすぎて基本がわからなくなるより一歩ずつ実践で使いこなせるようになりましょう。

最後に、初心者がつまづきやすいポイントと解決法のヒントを簡単にまとめました。

• コンポーネントとインスタンスがわからなくなる…

  メインコンポーネントは分かりやすい場所にまとめて、チーム内で共有しやすくしましょう。

• バリアント名がぐちゃぐちゃになる…

  最初は、Default,Hover,Primary,Secondaryなどシンプルで分かりやすい名前をつけましょう。

• 機能がたくさんあり、難しそう…

  コンポーネントやバリアントは奥が深い機能ですが、まずはボタン作成を通して基本操作に慣れましょう。

今回は、Webボタン作成を通してFigmaのコンポーネント・バリアント機能を簡単に紹介しました。
最初は難しく感じるかもしれませんが、実際に手を動かしながら試すことで少しずつ理解できるようになります。

まずはシンプルなボタン作成から、コンポーネント・バリアントに触れてみてくださいね。