figmaでコンポーネントを作ってみよう！

はじめに

こんにちは！フクロウラボでデザイナーをしている鈴木です。
今回はコンポーネント制作の方法をまとめていきたいと思います！
コンポーネント制作はfigmaの練習方法として一番効率がよかったので初心者さんはぜひ参考にしてみてください🌱

◆ 制作するもの

今回はボタンとラベルを作成していきます。

◆コンポーネントを作成

さっそく制作していきます。
ボタンとラベルは作り方が同じなのでボタンを一緒に作っていきます😉

ボタンを作成

1. 適当な四角いフレームとテキストを用意

2. テキストを四角の中に配置

3. オートレイアウトを追加

4. テキストの位置・左右上下のパディング・ラウンドサイズ指定

5. 「❖アイコン」押下でコンポーネントにする

6. 名前をダブルクリックで「Button」に変更

1.適当な四角いフレームとテキストを用意

2.テキストを四角の中に配置

3.オートレイアウトを追加

4.テキストの位置・左右上下のパディング・ラウンドサイズ指定

5.コンポーネントにする

これで一旦マスターコンポーネントが形になりました。
これだけでも特に困ることはありませんが、ボタンやラベルには色々なテキストが入ると思いますので、より作り込むためにテキストを変えられるようにしていきます。

テキストを入力・変更できるようにする

1. マスターコンポーネント内のテキストを選択

2. 右上の「テキスト」あたりをホバーして出てくる「丸の中に矢印が入っていくような」アイコンを押下

3. ポップが出てくるので「+」を押下

4. 「プロパティまたはバリアブルの作成」ポップが開かれるので、名前と値を入力

5. 「プロパティを作成」ボタンを押下

プロパティを作成

マスターコンポーネントが正しくできているか確認

1. 制作したマスターコンポーネントを選択

2. 「プロパティまたはバリアブルの作成」で設定した「名前・値」が、右側に「Text・Button」と表示されている

マスターコンポーネントを確認

インスタンスが正しくできているか確認

1. マスターコンポーネントをコピーして「インスタンス」を制作・選択

2. 「プロパティ」に設定した「名前（Text）」「値（Button）」が右側に表示されているので、「値（Button）」を「ボタン」に変更

3. インスタンスのテキストが変わる

「名前（Text）」「値（Button）」が右側に表示

値を変更してインスタンスのテキストが変わる

これでコンポーネントは完成です。
次は、作成したコンポーネントに状態変化があるかを考えていきます。

◆ バリアントを追加

figmaにはバリアントという機能があり、コンポーネントの状態をまとめておくことができます。
また、バリアントでまとめておくと状態の切り替えが簡単にできるのでコンポーネント制作において必須機能となります。

必要な状態を洗い出す

◯ ボタンコンポーネント
ボタンはデフォルト以外にも様々な状態があります。
必要な状態を洗い出し、ここでは下記の状態を作成していきます。

• Default（通常）

• Hover（カーソルを当てた時）

• Focus（クリックした瞬間）

• Error（エラーや警告の意味がある時）

• Disable（非活性の時）

◯ ラベルコンポーネント
ラベルはinput要素ではないので、状態がない場合がほとんどかと思います。
なので、今回はラベルにバリアントは必要ないということになります🙅‍♀️

バリアントを追加

状態を洗い出したら、状態の数だけボタンが必要になります。
しかし、バリアントを使用すればボタンを自分でコピーする必要はなく、1クリックで複製してくれます。

1. 分かりやすいように状態を記載する

2. マスターコンポーネントを選択

3. 右上にある「◇の中に+があるアイコン」を押下でバリアントを追加

4. マスターコンポーネントにバリアントが追加され、四角で囲われる

5. 四角下にある「▢の中に+があるアイコン」を押下してバリアントを状態分増やす（今回は5こ）

1.分かりやすいように状態を記載する

2.マスターコンポーネントを選択
3.右上にある「◇の中に+があるアイコン」を押下でバリアントを追加

4.マスターコンポーネントにバリアントが追加され、四角で囲われる

5.四角下にある「▢の中に+があるアイコン」を押下してバリアントを状態分増やす

これでバリアントを追加することができました。

プロパティの追加

バリアントにすることができたらボタンの状態を設定していきます。

1. ボタンのカラーをそれぞれ変更

2. コンポーネント名を選択

3. 右上にある「プロパティ1」というテキストをダブルクリックで名前を変更（今回はVariantに変更）

4. ボタンを1つずつ選択して、それぞれVariant名を変更（各状態の名前を入力）

1.ボタンのカラーをそれぞれ変更

2.コンポーネント名を選択
3.右上にある「プロパティ1」というテキストをダブルクリックで名前を変更

4.ボタンを1つずつ選択して、それぞれVariant名を変更

プロパティを追加したので、これでコンポーネントは完成です🎉
制作したコンポーネントが問題ないか、実際に使用し確認していきたいと思います。

◆ 使い方

実際に制作したコンポーネントを使っていきたいと思います。

1. マスターコンポーネントをコピーしてインスタンスを追加

2. 追加したインスタンスを選択

3. 右上にあるプロパティの「Variant」を選択（ボタンのみ）

4. 右上にあるプロパティの「Text」にテキストを入力

5. デザインに配置

1.マスターコンポーネントをコピーしてインスタンスを追加
2.追加したインスタンスを選択

3.右上にあるプロパティの「Variant」を選択（ボタンのみ）

4.右上にあるプロパティの「Text」にテキストを入力

あとは好きなところに配置してコンポーネントを使用できます！

さいごに

コンポーネントの作り込み、いかがだったでしょうか？
人によって作り込みレベルや手順は違うかもしれませんが、以上のことができればそんなに困ることはないのかな〜と思います！
たくさんコンポーネントを制作するとfigmaにも早く慣れることができると思うので、ぜひ参考にしていただけると幸いです。