Figma基礎08では、オートレイアウトを使ってボタンを作成しました。今回は、もう一度簡単なボタンを作成し、そのボタンを使って、
について学習します。コンポーネントを使うと、同じパーツを何度も作り直す必要がなくなります。また、バリアントを使うことで、色や状態の異なるパーツもまとめて管理できます。
そのあとは作成したボタンをスマートフォン画面に配置し、クリックすると別の画面へ移動する簡単なプロトタイプを作成してみましょう。
1. オートレイアウトでボタンを作成しよう
まず、新しいFigmaファイルまたは練習用のページを用意します。
Figma基礎08で学習したオートレイアウトを使って、練習用のボタンを作成します。
任意のフレームを作成し、テキストツールで、Buttonと入力します。
テキストを選択し、オートレイアウトを設定して、上下・左右に余白を追加します。
以下は画像例の設定です
などに設定します。
細かな数値は、作成するデザインに合わせて変更してかまいません。
ボタンの作成方法が分からない場合は、「08 Figmaのオートレイアウト」を確認してください。
2. ボタンをコンポーネントにしよう
作成したボタンは、このままでも使用できます。しかし、Webサイトやアプリでは同じボタンを何度も使用することがあります。
そのたびに同じボタンを作成すると、あとから色や形を変更したい場合に、すべてのボタンを1つずつ修正しなければなりません。
そこで使用するのがコンポーネントです。
作成した Button を選択し、右クリック、コンポーネントの作成を行います。
コンポーネントは、繰り返し使用するパーツの元となるデザインです。
複数の場所で使用するパーツをコンポーネントにしておくと便利です。
レイヤーパネルでは、メインコンポーネントであることを示すアイコンも確認してみましょう。
3. インスタンスを作成しよう
作成したコンポーネントを複製すると、元のコンポーネントとつながりを持ったインスタンスとして使用。
メインコンポーネントをコピーして横に並べるとインスタンスになっています。
次に、元となるコンポーネントの文字などを変更します。背景色の変更やパティングなども可能です。
元のコンポーネントを変更すると、インスタンス側にも変更が反映されることを確認します。
このように、共通するパーツをコンポーネントとして管理すると、複数の場所で同じデザインを使用していても修正しやすくなります。
コンポーネントとインスタンスの違い
インスタンスは、元となるコンポーネントとのつながりを持ったパーツです。元のコンポーネントで色や形などを変更すると、その変更はインスタンスにも反映されます。
一方で、インスタンス側でも一部の内容を個別に変更できます。例えば、インスタンス側で文字や背景色を変更した場合、その変更は元のコンポーネントには影響しません。
コンポーネント → インスタンスには影響する
インスタンス → コンポーネントには影響しない
また、インスタンスを元のコンポーネントから完全に切り離したい場合は、インスタンスを選択して右クリックし、「インスタンスを切り離す」を選びます。インスタンスを切り離すと、通常のフレームやパーツとして扱われるようになり、元のコンポーネントを変更しても反映されなくなります。
4. バリアントを作成しよう
コンポーネントだけでも便利ですが、Webサイトでは同じボタンでも、色や用途、状態によってデザインを変えたい場合があります。
例えば、通常のボタン ホバーしたときのボタン グレーのボタン などです。このように、同じパーツの種類違いをまとめて管理するための機能が、バリアント（Variant）です。
今回は、オレンジ色の角丸ボタンをもとに、3種類のボタンを作成してみましょう。
まず、元となるボタンのコンポーネントを選択します。右側のプロパティパネルにある 「バリアントを追加」 をクリックすると、同じボタンが複製され、1つのコンポーネントセットとしてまとめられます。
複製されたボタンの背景色を変更し、デザインの違うボタンを作成してみましょう。
さらに、コンポーネントセットの下に表示される 「＋」 をクリックして、もう1種類追加します。
今回は、デフォルト ホバー グレー の3種類を作成します。
バリアントを使うと、別々のボタンを管理するのではなく、「Button」という1つのパーツの中に複数の種類をまとめて管理できます。
使う際にプロパティからバリアントの種類を変えることが可能です。
5. バリアントを切り替えてみよう
次に、実際の画面でバリアントを使ってみます。スマートフォン用のフレームを1つ作成します。作成したButtonコンポーネントのインスタンスを、スマートフォンフレームの中に配置します。
配置したインスタンスを選択すると、右側のプロパティからバリアントの種類を切り替えることができます。同じButtonコンポーネントでも、設定を変更するだけで別のデザインに切り替えられることを確認します。
このようにバリアントを使うと、色違いや状態違いのパーツを効率よく管理できます。
6. プロトタイプ用の画面を2つ作成しよう
次に、作成したボタンを使って簡単なプロトタイプを作ります。先ほど作成したスマートフォンフレームを複製し、2つの画面を用意します。
iPhone 17 - 1 にはデフォルトのボタン、iPhone 17 - 2 にはホバーボタン色の異なるボタンを配置してみましょう。
今回はボタンをクリック右側のプロパティパネルを「プロトタイプ」に切り替えます。
iPhone 17 - 1 のボタンを選択し、ボタンの横に表示される「＋」を iPhone 17 - 2 のフレームまでドラッグして接続します。
インタラクションの設定では、
- トリガー：クリック時
- アクション：次に移動
- 移動先：
iPhone 17 - 2
を設定します。必要に応じて、画面が切り替わるときのアニメーションも設定してみましょう。
戻る動きも確認したい場合は、iPhone 17 - 2 のボタンから iPhone 17 - 1 へ同じように接続します。
プロトタイプとは？
プロトタイプとは、Figmaで作成した複数の画面をつないで、実際にクリックしたときの動きや画面遷移を確認するための機能です。
- ボタンをクリックすると次の画面へ移動する
- メニューをクリックすると別のページを表示する
- 戻るボタンで前の画面へ戻る
といった動きを設定できます。
まだHTMLやJavaScriptを使って実際のWebサイトを作っているわけではありませんが、「このボタンを押したら、どこへ移動するのか」をコーディング前に確認できます。
7. プレビューしよう
プロトタイプ右上の「プロトタイプビュー」の下矢印をクリックします。「新しいタブに表示」を選択すると別画面にプレビューが表示されます。ここではわかりやすいように、ボタンの下に１ページ目、２ページ目と追加しています。
今回学習した内容
| 機能 | 役割 |
|---|---|
| オートレイアウト | ボタンの文字と余白を整える |
| コンポーネント | 繰り返し使うパーツの元を作る |
| インスタンス | コンポーネントを各画面で再利用する |
| バリアント | 同じパーツの種類違いをまとめる |
| プロトタイプ | 画面同士をつないで動きを確認する |
| プレビュー | 実際にクリックして動作を確認する |