Figmaでコンポーネントをつくる6つのコツ

Figmaでコンポーネントを綺麗につくるのが大好き！デザイナー4年目の中川です。
デザインで繰り返し使うパーツはできる限り綺麗なコンポーネントとしてつくっておきたい！という熱い気持ちを持っているデザイナーの人に向けて、今日はコンポーネントづくりのコツをご紹介していきます。

コンポーネントを綺麗に設計することで、作業の時間短縮につながり、エンジニアさんにも迷わずデータを渡すことができます。また、デザインの揺れやミスも防ぐことができます。

コンポーネントとは？

本題に入る前にFigmaのコンポーネントについて簡単におさらいします！デザイン内で再利用する要素のことをコンポーネントと呼びます。普段ウェブサイトをデザインする時は、繰り返し使用するカード、ナビゲーション、ボタンなどをコンポーネント化することが多いです。

コンポーネントのつくりかたのおさらい

コンポーネント化したいオブジェクトを選択し、右サイドバーのコンポーネントアイコンをクリック、もしくは[opt＋⌘＋K]でコンポーネント化できます。

コンポーネントの状態を増やしたい時は、コンポーネントを選択した状態で右サイドバー右上の＋がついたアイコンを押すと「バリアント」を追加できます。

増やしたボタンの見た目を調整します。塗り状態のボタンを作成したのでもう一つのボタンは枠線のスタイルにします。その後、コンポーネント全体を選択すると右サイドバーにプロパティと書かれた場所をクリックするとフィールドが入力状態になります。今回は「status」と入力します。

今度は上のボタンのみを選択した状態で、ボタンの状態を表す文言を右サイドバーのstatus横のフィールドに入力します。上のボタンは「fill」、下のボタンは「outline」にします。

作成したコンポーネントは左サイドバーのアセットパネルからドラッグ＆ドロップでキャンバスに持ってくることができます。右サイドバー内のプロパティからコンポーネントの状態を切り替えることができます。

1.テキストプロパティでテキスト変更しやすいコンポーネントに

テキストプロパティを付与することで、テキストの変更がしやすくなります。項目名を入れてあげることで、何のテキストを入れるのかも明確になります。

コンポーネントのテキスト部分を選択した状態で、
1.右サイドバーのテキストプロパティ横のアイコンをクリック
2.パネル内の＋ボタンを選択
3.「テキスト」と入力
4.「プロパティを作成」をクリック

テキストプロパティを付与しておくと、コンポーネント選択時に右サイドバーからテキストの打ち替えが可能になります。

複数テキストが入るカードのコンポーネント作成時などに設定しておくととても便利です💡

2.ブーリアン値で出しわけする要素を設定しておこう

コンポーネント内で出しわけする要素にはブーリアン値を設定しておきます。例で、ボタン内のアイコンを表示・非表示で切り替えられるよう設定していきます。

コンポーネント内の出しわけしたい要素（今回はアイコン）を選択した状態で、
1.外見タブの横のアイコンをクリック
2.パネルの＋ボタンをクリック
3.「アイコンを表示」にテキストを変更
4.「プロパティを作成」ボタンをクリック

これでコンポーネント選択時に、右のサイドバーからアイコンの表示・非表示が切り替えられるようになりました！

3.コンポーネント内にコンポーネントを使用するときはネストされたインスタンスをONに！

コンポーネントの中に、更にコンポーネントを入れる時にある設定を行うことで、コンポーネントクリック時にすぐ中のコンポーネントの状態を切り替えられるようになります。

カードコンポーネントの中に、選択・非選択状態のあるブックマークアイコンのコンポーネントを追加します。
カードコンポーネントを選択した状態で
1.右サイドバーのプロパティ横の＋アイコンをクリック
2.ネストされたインスタンスをクリック

プロパティの公開元という名前のパネルが出てくるので、チェックボックスに✅を入れます。

上記の設定を行うことで、インスタンス選択時に右サイドバーのコンポーネントのプロパティの下からブックマークアイコンの状態をすぐ切り替えられるようになりました💡

4.コンポーネントをオートレイアウトで整理

コンポーネント内の要素をオートレイアウトで組めるのはご存じですか？コンポーネントを選択した状態で[shift＋A]を押すことでオートレイアウトを組めます！コンポーネント同士の余白を綺麗に調整することができます。

5.命名規則を社内やチームで決めてこう

コンポーネントやバリアントの命名規則は社内やチームであらかじめ決めておくと良さそうです。neccoでは基本小文字の英語で統一しています！実装時にTailwind CSSを利用することが多いので、パーツ名はTailwind CSSのパーツ名を参照しています。

6.コンポーネントへの差し替えは⌘＋shift＋Rで！

コンポーネント化したパーツに差し替えたい！そんな時に、コンポーネントを[⌘＋C]でコピーして、[⌘＋shift＋R]ですぐに入れ替えができます！

最後に

ここまで読んでいただきありがとうございます！少しでもFigmaでコンポーネントをつくるときにお役に立てたら嬉しいです。丁寧で誰もが扱いやすいコンポーネントづくりをこれからも心がけていきます！