Web制作で知っておくべきFigmaの学習 #Day12「Instance/Override」

前回、コンポーネントをコピーしてインスタンスを複製する方法を学習しました。 でも、実際の作業になると、 サービス紹介ページに次の3つのボタンがあるとします。 「詳しく見る」 「資料をダウンロード」 「お問い合わせ」 どれも同じデザインにしたい一方で、表示する文字はそれぞれ異なります。 また、通常のボタンは青色にして、一部の重要なボタンだけオレンジ色にしたい場合もあるでしょう。 すべてを別々のFrameとして作ると、共通デザインを変更するときに手間がかかります。 反対に、すべてを完全に同じ状態にすると、用途に応じた使い分けができません。 そんな時は、Instance（インスタンス）と Override（オーバーライド）を理解しておくといいでしょう。

InstanceとOverrideとは？

Instance（インスタンス）

前回作成したメインコンポーネントを、別の場所で利用するために配置したもの（コピペしたもの）です。 元のコンポーネントとのつながりを保っています。

Override（オーバーライド）

インスタンス側で、元のコンポーネントの設定の一部を個別に変更することです。 ※前回注意として、書いたやつです。 例えば、メインコンポーネントのボタンに「詳しく見る」と設定しておき、インスタンス側では「お問い合わせ」に変更できます。 このとき、元のコンポーネントの文字は「詳しく見る」のままです。ほかのインスタンスにも、その変更が自動的に適用されるわけではありません。 要するに、変更したいところだけを書き換えたインスタンスという意味です。

便利に使うために

共通部分はメインコンポーネントで管理し、必要な部分だけインスタンス側で変更する。 部分的に書き換えるのもアリというルールでいいですね。

実際にインスタンスのボタンを変更してみる

Webのサービスページでよく使われるボタンを作って、ボタンの文字変更を確認してみましょう。

1. ボタンを作成

Auto Layoutを使って、ボタンを作成、Component 化する。

2. インスタンスを作成

3種類分のインスタンスを複製。

3. ボタンの文字を変更

インスタンスの文字だけを変更します。

4. ボタンの色を変更

さらに、ボタンの色も変更しちゃいましょう。 インスタンス側の色を変更した場合、メインコンポーネントを変更しても、連動して変更してくれなくなります。 でも、その方が都合がいいですよね。 そして、この状態をOverviewと言います。

5. Overviewのインスタンスを作る

Overviewをそのままコピーしても、インスタンスにはなりません。 変更を加えたインスタンスを、さらに Component 化することで、それをコピーすると、 変更後のインスタンスになります。

インスタンスのインスタンス化

Componentのインスタンスは、Overviewになっても、それをさらにComponent化することができます。 OverviewされたObjectは、変更していない属性は、メインコンポーネントの設定とリンクしてくれます。

Overrideには限界もある

ただ、インスタンスは、メインコンポーネントのコピーを自由に編集するための機能ではありません。 例えば、メインコンポーネントの中にテキストやアイコンが配置されている場合、個々の内容を変更できることはあります。 しかし、インスタンス側で自由に構造を組み替えられるとは限りません。 また、メインコンポーネント側でレイヤー構造を大きく変更すると、インスタンス側のオーバーライドに影響する場合もあります。 共通化するパーツを設計するときは、 どこを共通にし、どこを個別に変更する可能性があるのか を考えておくことが重要です。 例えば今回のようなボタンであれば、次のように整理できます。

- 共通にするもの：余白、角丸、フォント、基本の色 - 個別に変更するもの：ボタンの文字、用途によって必要な色

Web制作で考えるInstanceとOverride

Web制作でも、共通のテンプレートを利用しながら、ページごとに内容を変えることがあります。 例えば、共通のボタン部品を用意し、呼び出すときにラベルやリンク先を指定するような設計です。 FigmaのInstanceとOverrideも、考え方としては似ています。 ただし、FigmaのOverrideはデザインデータ上の変更であり、実際のWebサイトで使うコンポーネントの引数やプロパティと完全に同じものではありません。 この違いを理解しておくと、デザインを作る段階から、実装時に再利用しやすいパーツを考えられるようになります。 ここで、コーディングと似ていると考えた人は、Web制作上級者ですね。

あとがき

今回のポイントは、次の３つ

1. Instance は、メインコンポーネントを利用するために配置したもの 2. Override は、インスタンス側で一部の内容を個別に変更すること 3. 共通デザインを維持しながら、文字などを用途に合わせて変更できる

コンポーネントを使うと、共通部分を一括で管理できます。 しかし、すべてを同じにするだけでは、実際の画面に必要なバリエーションを表現できません。 大切なのは、共通部分を維持しながら、必要な違いを適切に扱うことです。 InstanceとOverrideは、そのための基本となる仕組みです。 しっかり利用して、効率の良いデザイン作業を進めましょう。