コンポーネントについて解説

こんにちは。今回はUIデザインを作成する上で重要な要素となってくるコンポーネントについてと実際の作り方を解説していきたいと思います。

 

まず、コンポーネントとはウェブやアプリのUIデザインで使われる部品のような要素です。ボタンやフォームなど、再利用できる小さなパーツを指し、これらを組み合わせてUI全体を作成していきます。コンポーネントを使うことで、デザインや開発の効率が上がり、メンテナンスがしやすくなります。

 

またコンポーネントのバリアントとは、1つのコンポーネントをベースにしつつ、異なるスタイルや状態のバリエーションを持たせる方法です。これにより、たとえばボタンコンポーネントで「プライマリ」「セカンダリ」「アイコン付き」など複数のデザインを1つのコンポーネントにまとめて管理できます。

このようなものですね。

バリアント化することで、一括で状態の管理がしやすくなります。またまとめて管理されることで、複数のデザイナーでデザイン作成する際に齟齬が生じづらくなります。

今後デザインに変更が加わった際にも対処のハードルが低くなります。

 

コンポーネントを作成してみよう

ではコンポーネントはどのように作成するのか？をfigmaを元に解説していきます。

figmaとはデザイン作成ツールで主にUIデザインを作成するために使用されます。

弊社もUIデザインを作成する際はfigmaを使用しています。複数人で共同作業ができるのでビジネス向きなツールとなります。

 

まずはfigmaでボタンを作成してみましょう。

1.フレームを作成：Fキーで「フレーム」を選択し、適当なサイズ（例：80x40pxなど）のフレームを作成します。これがボタンの背景になります。

2.背景色を設定：右側のプロパティパネルで、ボタンのフレームに色を設定します。

3.角丸の設定：ボタンに柔らかい印象を与えるため、フレームのコーナー半径を設定します。

4.テキストツールを選択：Tキーで「テキスト」を選択し、フレーム内にテキストを追加します。

5.フォントと色を設定：適切なフォントとサイズ、色をプロパティパネルで設定します。

6.オートレイアウト：Shift+Aを押すとオートレイアウト化されます。これにより、自分が設定した数値で余白が自動的に配置されます。

7.アイコンを設置：必要に応じてアイコンを付け加えても良いでしょう。

また、アイコンはバリアント化したアイコンを挿入すると自由に入れ替えすることができます。

各アイコンをそれぞれコンポーネント化し、適切な名前をつけすべてのアイコンを選択し、右クリックから「バリアントを追加」を選択します。これで1つの「アイコンセット」として管理できるようになります。

アイコンの入れ替えを行いたい場合、右側のプロパティパネルでアイコンを選択するだけで、ボタン内のアイコンを簡単に切り替えることができます。

そうするとこのようにボタンのコンポーネントが作成されます。

バリアントの作り方

次にバリアントの作り方を解説していきます。

1. バリアントを追加：コンポーネントを選択した状態で右側のプロパティパネルから「+」をクリックして、バリアントを追加します。
2. スタイル変更：例えば「Disable」や「Hover」などのバリアントを追加し、それぞれのバリアントごとに色やテキストのスタイルを変更します。

このようになります。通知用のアイコンを新たに追加し、ボタンの左部分にも入れ替え自由なアイコンを設置しました。

また「Disable」は押せないことが分かるようにグレーアウト化し「Hover」の方はカーソルを重ねた際に色の変化が分かるように色をパステルにしてみました。

今回は上記3種類しか作成していませんが、セカンドカラーやアクセントカラーのボタンを作成しても良いかと思います。

ブール値

そしてfigmaにはコンポーネント化に伴い他にも便利な機能があります。

その中の一つがコンポーネントプロパティの設定の一つである「ブール値」です。

ブール値とは「真（True）」または「偽（False）」の2つの状態を持ちます。ブール値は要素の表示・非表示などのON/OFF切り替えに活用されます。

Figmaでブール値を使う場合、特にコンポーネント内で要素の表示や非表示を切り替えるために便利です。たとえば、アイコン付きのボタンコンポーネントを作成し、アイコンの表示/非表示を切り替えることで、ボタンのデザインを簡単に変えられます。

使用例として、ボタンにブールプロパティを追加してアイコンを表示・非表示にすることができます。

やり方は下記となります。

1. ボタンコンポーネントの作成：ボタンの基本的なコンポーネントを作成します。テキストとアイコンを含めたボタンデザインを用意します。
2. ブールプロパティの設定：
   • アイコン要素を選択し、右のプロパティパネル内にある「ブール値プロパティを設定」を選択します。
   • 新しいプロパティに「Show Icon」などの名前をつけます。
3. プロパティの切り替え：ボタンのインスタンスを使うと、プロパティパネルに「Show Icon」オプションが表示されます。ここでチェックボックスをON/OFFすることで、アイコンの表示・非表示を切り替えることができます。

このように右のプロパティパネルで表示の切り替えができるようになります！

 

ブール値を活用するとプロパティのON/OFF操作だけでデザインを簡単に変更でき、各インスタンスの管理が楽になります。

作例では紹介していませんが、エラーメッセージを載せてON/OFFの切り替えをできるようにすることで、簡単にエラーのコンポーネントを表示させることができます。

 

これで状態やアイコンによって見た目を入れ替えたり場合によっては非表示できるボタンコンポーネントが完成しました。

何か変更が発生した際も一律で管理しているので対応しやすいですし、新たな状態を作成する必要が生じた際も増やしやすいです。

 

今回はコンポーネントのfigmaでの活用方法を紹介してみました。

最初は設定できる内容が多く、戸惑うこともあるかと思いますが使い続けていく上で慣れていくのでぜひ使ってみてください！