はじめに
figmaとは、Webブラウザ上で簡単にデザインを作れるデザインツールです。
デザインツールといえば、代表的なAdobe IllustratorやXDが挙げられますが、近年はfigmaを使用する場合も多くなってきているのではないでしょうか？
今回はそんなfigmaの基本機能でもあるコンポーネント機能についてまとめてみました。
コンポーネント機能とは
コンポーネント機能とは、簡単にいうと「よく使用するパーツを再利用できるようにする機能」です。同じデザインページ内のオブジェクトやパーツをコンポーネントしておくと、レイアウト調整や変更がしやすく非常に効率的に作業を進めることができます。
パーツの再利用であれば「単にパーツをコピーして使いまわせばいいのでは？」と思う方もいるかもしれません。
コンポーネント機能にはパーツの情報を登録する「メインコンポーネント」と、登録したパーツを実際に呼び出して使用する「インスタンス」があります。コンポーネント機能の便利な部分は、このメインコンポーメントの修正をインスタンスに自動反映できる点です。
そのため、「ちょっとこのボタンの色変更したいかも…」といった場合に、メインコンポーネント一つの修正で、複数ページにある同一ボタン全ての修正が完了し、作業効率が大きく変わります。
メインコンポーネントの作り方
メインコンポーネントの作り方はとても簡単です。
いくつか作業手順は用意されているのですが、今回は私がよく使用するツールバーから呼び出す方法をご案内いたします。
1.コンポーネントしたい要素全体を選択します。
2.画面上部にあるツールバーから「❖アイコン」もしくは、ツールチップ内の「コンポーネントの作成」をクリックします。
3.選択した要素が、レイアーエリアで「❖Component 」となっていれば成功です。
※コンポーネントの名前は簡単に変更できます（右クリック）
❖のマークがついている要素がメインコンポーネントである印になります
インスタンスの作成方法
メインコンポーネントができれば、実際にデザインで使用していくパーツでるインスタンスの作成です。
こちらに関しては、単純にメインコンポーネントをコピー＆ペーストで大丈夫です。
ただ、同一ページ内で複数のフレームを作っている時など、いちいちページのどこかにあるメインコンポーネントまで戻ってコピペはちょっと効率が悪いですよね…。
そんなときは、レイアーエリアの隣にある、「アセットタブ」もしくはヘッターエリアにある「コンポーネントボタン」を押してください。同一ページで作成したコンポーネントが一覧で表示されます。
もちろん、ここからメインコンポーネントをドラックしてインスタンスを作成することができます。
メインコンポーネントとインスタンスの関係
続いて、メンコンポーネントとインスタンスの関係についてみていきます。
上記でメインコンポーネントの変更はインスタンスに自動反映されると紹介しました。実際の動作を見ていきましょう。
例として黒いrambleボタンのインスタンスを複数用意しました。こちらのメインコンポーネントを選択し、背景色を変えてみましょう
このように一瞬で反映されます。もちろん、要素のサイズ変更やテキスト変更にも対応しています。
また、「メイン」から「インスタンス」の反映はメインの内容が絶対的に反映されますが、逆に「インスタンス」の変更は「メイン」には反映されません。
そのため、似たようなパーツでちょっとした違いがあるデザインの作成もインスタンスのレイアウトを調整すれば、簡単に行うことができます。
Variants（バリアント）の設定方法
最後に、variant（バリアント）機能をご紹介いたします。
こちらは、簡単に説明すると「同一パーツに対して複数のパターンを登録できる機能」です。個人的にコンポーネント機能では、この機能が一番便利だと思います。
例として、WEBサイトのボタンをイメージしてください。
一般的に、WEBサイトでは、ボタンには大体「通常時、ホバー時、 非活性時」の3パターンあるのではないでしょうか。
もちろん「それぞれの状態でメインコンポーネントを作成する」というのも可能です。けれど、同一パーツを一つのメインコンポーネントで管理できた方が便利ですよね。そんな痒いところに手が届くのがvariant機能です。
設定方法
1.設定したいメインコンポーネントを選択します。
2.デザインパネルにある、「プロパティ」にある＋をクリックします。内部の「バリアント」を選択します。
3.メインコンポーネントが紫の枠で囲われます。この下にある＋をクリックすると、自動的にメインコンポーネントが複製されます。今回は例に出したWEBサイトのボタンと同じく3つ作成しました。
4.プロパティを再度確認すると、右手にデフォルトと表記が増えています。
こちらは複製した分だけ、プルダウンで変更が可能です。右クリックでそれぞれ名前を変更することができるので、デフォルト・hover・ disabledとしました。
あとは、各ステータスに合わせて、デザインを変更していきます。
5.その後、通常通りインスタンスを作成します。
すると、そのインスタンスもメインコンポーネントと同じくバリアントの状態が選択できるようになっています。ここから、好きな状態を選択すると、瞬時に登録された状態が呼び出せます。
このようにvariant機能でバターンを管理していくとより効率的に作業をすすめることができます。
まとめ
今回はfigmaのコンポーネント機能についてご紹介しました。
他にも複数のvariantを組み合わせる方法などもあり、特にボタンiconの管理などでは使用頻度も高いと思うので、デザインをされる場合などはぜひコンポーネントやvariant機能を使用してみてはいかがでしょうか？
参考：https://help.figma.com/hc/en-us/sections/4403935997847-Components