今回は、「Figma」のコンポーネント機能をがっつり使って行こう！の会です。最近知った便利な機能をブログにまとめてみました。Figma使っていますか？エンジニアは使えて損はないと思います。ブログを書くエンジニアには必須の技術といっても良いでしょう。すべての資料をFigmaで作ればきっとスキルアップする！！
ご挨拶
ども！皆さんFigma使っていますか？最近、コーディングの時間よりも執筆とFigmaとMTG時間が伸びている龍ちゃんです。程よく検証もしているのですが、今動かしているプロダクトはもれなくレビュー待ちなので、体が空いてしょうがないです。
今回は「Figma」のお話です。「Figma」を覚えてから、社内のエンジニアに布教しているのですが、徐々に波が広がっているような気がしてうれしいですね。前回は「Figmaを使いこなす第一歩」として便利な機能の紹介をしました。今回は一つの機能である「コンポーネント」の「プロパティ」と「バリアント」という部分についての紹介です。
僕が現時点で認識している機能の紹介なので、まだすべてを使えているわけではないですが、知らない人はやってみてください。知っている人はこっそり教えてください。
それでは本題に入っていこうと思います。
コンポーネントの基本
ここでは、コンポーネントを使うことの意義について紹介しておきます。キホンの使い方に関しては、前回記事の「ちゃんとコンポーネントを使おう」という章で紹介しています。知りたい人は、そちらを読んでから戻ってきてください。
「なぜ？コンポーネントを使うのか？」という部分について書いていきたいと思います。コンポーネントの良いところとしては、「再利用容易である」という点です。
デザインカンプを作成する場合は、パーツが共有できる部分があります。そのパーツレベルで調整を行いたい場合、コンポーネント化していなければ、個別にパーツを微調整する必要があります。これはひどく手間です。
コンポーネント化していれば、メインのコンポーネントを調整するだけで変更を適用することができます。文字だけではわかりにくいと思うので、動画を撮影してみました。
メインのコンポーネントの背景色を変更することで、子コンポーネントの背景色が変更されていることがわかるかと思います。コンポーネントの意義としては以上です。
バリアント
「バリアント」とは、コンポーネントのパターンを複数登録することができる機能です。お試しにメモ用コンポーネントを作成してみました。
コンポーネントでバリアントを作成した場合は、以下の動画のように変更することができます。
背景色や透明度などが異なるコンポーネントは、一度作成すればなかなかいじることがないのでバリアント登録する価値があります。例えば、「ダークモードの切り替え」用のコンポーネントなどでは効果を発揮します。
それでは、バリアントの作成方法について解説していきたいと思います。バリアントの作成方法としては、二つの方法があります。
それぞれ解説を入れていきます。
コンポーネントをバリアントとして統合する
まずは適当なコンポーネントを二つ用意します。そのコンポーネントを一括で指定すると、右側に「バリアントとして統合」というボタンが出てきます。
これで、動画と同じことができます。
コンポーネントからバリアントを作成する
まずは適当なコンポーネントを一つ用意します。そのコンポーネントを指定すると画面上部に「バリアントの追加」というボタンが出てきます。
クリックすると、指定していたコンポーネントと同一のコンポーネントが作成されます。あとはカスタマイズを行えば設定完了です。
上部のメニューバーだけでなく、画面から作成することもできます。小さいプラスボタンを押すことで、バリアントを追加することができます。
プロパティ
「プロパティ」では、コンポーネントに対して入力可能な要素を差し込む機能です。コンポーネントで入力可能な要素であることを、明示的に表現することができます。これも文字だけだとわかりにくいので、以下に出しておきますね。
テキストやブール値（boolean）などが特に使用する機会が大きいです。文字の内容を変更したい場合は、「テキスト」のプロパティを設定します。表示と非表示を変更したい場合は、「ブール値」のプロパティを設定します。
それでは、設定方法について説明していきたいと思います。まずは、プロパティを設定したいコンポーネントを作成します（例としては上部のフォームを用います）。コンポーネント内で、プロパティを設定したい項目を指定します。
コンポーネントでプロパティに設定できる要素の場合は、画面の「ここ！」をクリックすることでプロパティを設定することができます。「レイヤー」の場合は、表示非表示を切り替えるブール値を設定することができます。「テキスト」の場合は、テキストの値を切り替えるテキスト値を設定することができます。
バリアントとプロパティの合わせ技
イメージとしては難しいかもしれませんが、バリアントはプロパティの一種であると考えると考えやすいです。「テキスト」や「ブール値」のプロパティでは、色の変更などはできません。ちなみにですが、バリアントは命名を「True・False」で行うと「ブール値」を設定することができます。サンプルを以下に置いておきます。
これによって「バリアント」の指定も「ブール値」ですることができます。ブール値で設定したものは、2の階乗分設定する必要があるというものです。
また、順番としては「プロパティ」の設定を行ってから「バリアント」を製造することをお勧めします。理由としては、「プロパティ」の設定を複数回行う手間が増えてしまいます。これは、試してみましょう。
終わりに
お疲れ様です。今回は、「Figma：コンポーネント」の機能紹介になりました。「Figma」を使いだして、一年が経ちます。最初はこんなに長く使うツールになるとは思っていませんでした。
フロントエンドエンジニアにとっては、なくてはならないツールだと思っています。これは超絶便利なので、まだ学んでいない人はここから入門していきましょう。
Figmaの公式リファレンスを置いておきます。
Figmaの勉強方法はいろいろあると思います。最近では、「(サンプルDL特典付)はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門」がおすすめです。ちょうど無料期間があって中身を読んだのですが、これはじっくり読みたいなと思いました。まだ、技術書が積んであるので、片づけたら買いに行きます。
皆さんも勉強をしましょうね( *´艸｀)ではまた～
