目次
Figmaとは
コンポーネントとは
コンポーネントを作成する前に
ボタンのコンポーネントを作成する
チェックボックスのコンポーネントを作成する
実際に使ってみる
まとめ
Figmaとは
FigmaとはWEB制作において手軽にかつ簡単にデザインやワイヤーフレームを作成するための便利なデザインツールです。
今回Figmaのコンポーネントの作成方法を紹介したいと思います。
コンポーネントとは
Figmaのコンポーネントとは「再利用されるデザイン要素を管理して柔軟かつスピーディに修正や変更が行える」機能です。
ボタンや入力ボックスなんかはひとつのページ内でも同じデザインを使い回す事が多く、複数ページにもなると膨大な量のデザイン要素をページレイアウト上に当て込むことが多くなるかと思います。
そんな場合、いざボタンを全体的に見直す必要が出てきてしまったらひとつひとつボタンを修正するのは大変な作業になりますよね。このボタンをコンポーネント化しておく事でコンポーネント化された元ボタンを修正すれば各ページに配置されたボタンが全て修正後のボタンに置き換わるといった大変便利な機能です。
デザイン制作においてコンポーネントを作成する場合、デザインに目が行きがちですがコンポーネントに動きをつけるちょっとしたひと手間を加える事でよりコンポーネントが使いやすくなると思います。
今回はそんなひと手間加えたコンポーネントの作成手順をボタンとチェックボックスを使って紹介したいと思います。
コンポーネントを作成する前に
コンポーネントを作成する前にサンプルの画面を用意しておきましょう。
ボタンのコンポーネントを作成する
1.ボタンを作成する
長方形とテキストをグループ化してボタンを作成します。
ボタンのスタイルはお好みで調整しておきましょう。
グループ化したボタンを選択して画面上部の赤枠の「コンポーネントの作成」を押してコンポーネント化します。
2.バリアント（プロパティ）を追加する
コンポーネント化したボタンを選択したまま画面上部の赤枠の「バリアントの追加」を押してバリアントを追加します。
バリアントの追加は画面右側にある赤枠のプロパティ「＋」からも追加できます。
3.バリアントをもうひとつ追加する
コンポーネントのボタン下部にある赤枠の「＋」を押してバリアントの数を3つにします。
この3つのバリアントは
「通常のボタン」
「フォーカスがあたった場合のボタン」
「クリックされた場合のボタン」
をそれぞれ表現するために用います。
4.バリアント（プロパティ）の名称を変更する
バリアント（プロパティ）の名称をわかりやすく変えておきましょう。
画面右側にある赤枠の「プロパティ1」をわかりやすいよう「状態」という名前に変えておきます。
5.各バリアントの名称を変更する
画面左側にある赤枠から各バリアントの名称を変えましょう。
「状態=バリアント2」を「状態=フォーカス」に、
「状態=バリアント3」を「状態=クリック」にします。
「デフォルト」はそのままにしておきましょう。
6.各バリアントのボタンスタイルを調整する
赤枠にあるような感じでフォーカスやクリックに応じたボタンスタイルを調整しましょう。
7.デフォルトのボタンに動きをつける
デフォルトのボタンにマウスオーバーの動きをつけます。
ボタンのコンポーネントから「デフォルト」を選択した状態で右側の「プロトタイプ」タブから「インタラクション」の「＋」を押して「インタラクション詳細」の赤枠の設定を行います。
8.フォーカスのボタンに動きをつける
次にフォーカスのボタンにクリックしたときの動きをつけます。
ボタンのコンポーネントから「フォーカス」を選択したた状態で右側の「プロトタイプ」タブから「インタラクション」の「＋」を押して「インタラクション詳細」の赤枠の設定を行います。
この時のイベントは「クリック」ではなく「押下中」を選択しましょう。
ここまでがボタンのコンポーネントの作成手順となります。
チェックボックスのコンポーネントを作成する
1.チェックボックスを作成する
続いてチェックボックスを作成します。
ボタンと同じように長方形とテキストをグループ化してチェックボックスを作成します。
チェックボックスのスタイルはお好みで調整しておきましょう。
グループ化したチェックボックスを選択して画面上部の赤枠の「コンポーネントの作成」を押してコンポーネント化します。
2.バリアント（プロパティ）を追加する
コンポーネント化したチェックボックスを選択したまま画面上部の赤枠の「バリアントの追加」を押してバリアントを追加します。
バリアントの追加は画面右側にある赤枠のプロパティ「＋」からも追加できます。
3.バリアントを追加して数を4つにする
コンポーネントのチェックボックス下部にある赤枠の「＋」を押してバリアントの数を4つにします。
この4つのバリアントは
「チェックなし」
「チェックなしでフォーカスがあたった場合」
「チェックあり」
「チェックありでフォーカスがあたった場合」
をそれぞれ表現するために用います。
4.バリアント（プロパティ）の名称を変更する
ここでもバリアント（プロパティ）の名称をわかりやすく変えておきましょう。
画面右側にある赤枠の「プロパティ1」をわかりやすいよう「状態」という名前に変えておきます。
5.各バリアントの名称を変更する
画面左側にある赤枠から各バリアントの名称を変えましょう。
「状態=デフォルト」を「状態=None」に、
「状態=バリアント2」を「状態=None_Focus」に、
「状態=バリアント3」を「状態=Checked」にします。
「状態=バリアント4」を「状態=Checked_Focus」にしましょう。
6.各バリアントのチェックボックススタイルを調整する
赤枠にあるような感じでフォーカスやチェックの有無に応じたチェックボックススタイルを調整しましょう。
7.Noneのチェックボックスに動きをつける
Noneのチェックボックスにマウスオーバーの動きをつけます。
チェックボックスのコンポーネントから「None」を選択した状態で右側の「プロトタイプ」タブから「インタラクション」の「＋」を押して「インタラクション詳細」の赤枠の設定を行います。
8.None_Focusのチェックボックスに動きをつける
None_Focusのチェックボックスにマウスオーバーの動きをつけます。
チェックボックスのコンポーネントから「None_Focus」を選択した状態で右側の「プロトタイプ」タブから「インタラクション」の「＋」を押して「インタラクション詳細」の赤枠の設定を行います。
ボタンのイベントの時は「押下中」を選択しましたがチェックボックスでは「クリック」を選択します。
9.Checkedのチェックボックスにマウスオーバーの動きをつけます。
Checkedのチェックボックスにマウスオーバーの動きをつけます。
チェックボックスのコンポーネントから「Checked」を選択した状態で右側の「プロトタイプ」タブから「インタラクション」の「＋」を押して「インタラクション詳細」の赤枠の設定を行います。
10.Checked_Focusのチェックボックスに動きをつける
Cheked_Focusのチェックボックスにマウスオーバーの動きをつけます。
チェックボックスのコンポーネントから「Cheked_Focus」を選択した状態で右側の「プロトタイプ」タブから「インタラクション」の「＋」を押して「インタラクション詳細」の赤枠の設定を行います。
ここでもイベントは「クリック」を選択します。
「インタラクション詳細」内の赤枠で「None」を選択する事でクリックの度にチェックボックスの✓マークがついたり消えたりするようになります。
ここまでがチェックボックスのコンポーネントの作成手順となります。
実際に使ってみる
1.アセットからサンプル画面にボタンとチェックボックスを配置する
それでは実際に使ってみましょう。
画面左側の赤枠「アセット」を選択して各コンポーネントをサンプル画面にドラッグして配置します。
配置したら画面右上の赤枠の「▶」を押してプレゼンテーションを開始します。
2.プレゼンテーションを押して画面を操作してみる
ボタンやチェックボックスにフォーカスやクリックのイベントが反応して動きが出ているのがわかります。
まとめ
WEBデザインにおいて顧客にイメージを伝えたり、開発メンバーでイメージを共有する事はとても大切な作業となります。
その為にはただの絵を見せるよりもアニメーションも付け加えるとよりイメージしやすいものになると思います。
その手間を惜しんでしまっては後々大変な思いをする事も多いのではないでしょうか？
今回はボタンとチェックボックスを作成しましたが入力ボックスやリストボックス等の様々なデザイン要素で応用できますのでこれを作っておけば様々なデザイン作成を効率よくスピーディに開発を進められます。
開発においてはよくソフトウェア技術をライブラリ化や標準化なんかして開発効率や生産性を高めようなんて言う事がありますが、意外とこういったデザインのコンポーネント化等の開発の上流で扱うものの標準化の方がより生産性が高まるんじゃないかと思ったりしました。