パソコン作業は基本的に、「コピペをすれば、いくらでも作業効率が上がる」なんて、安直に考える人もいるかもしれません。
おそらく、エクセルでもパワポでも、コピペをすることはあるけど、結構その後の修正などが大変になったという経験がある人もいるんじゃないでしょうか？
Figmaも多分に漏れず、コピペは手軽にできますが、そのあとで、コンテンツ内容によって書き直しや微調整をする作業は大量に発生します。
そんな時に、そうした作業を最小限にとどめることができる Component という機能を覚えておきましょう。
Componentとは？
Figmaには、何度も同じObjectやグループなどの要素を複製するための、
Component（コンポーネント） という仕組みがあります。
コンポーネントは、
再利用するデザインパーツを定義しておく機能です。
ボタン、入力フォーム、ナビゲーション、カードなど、
繰り返し使うものをコンポーネントにしておくと、同じデザインを効率よく管理できます。
Component機能を理解するために、次の２つの言葉を覚えておきましょう。
Main component（メインコンポーネント）
-> 再利用するパーツの元になるもの
Instance（インスタンス）
-> メインコンポーネントを配置して作った利用側のパーツ
例えば、ボタンのデザインを1つ作り、それを
メインコンポーネントにした場合、
そのボタンをページ内に複数配置すると、それぞれが
Componentのインスタンスになります。
メインコンポーネントのデザインを変更すると、その変更がすでに配置されているインスタンスにも反映されます。
コピーしたオブジェクトであれば、そのあと変更する時にコピーした全てを一つずつ変更対応する必要がありますが、
Componentは、インスタンスとして複製されたものを、全て一元管理して編集することができます。
これはかなり効率的で便利な機能なんですよね。
ボタンをComponentにするチュートリアル
1. Component化させるボタンを１つ作ります。
このボタンは、テキストを、Auto Layout 化したObjectです。
2. Componentにする
右クリックして「コンポーネントを作成」を選択。
Component化すると、フレームの枠が紫色に変わります。
ショートカットは、以下の通り。
Win : Ctrl + Alt + K
Mac : Option + Cmd + K
3. Componentを複製して配置
Componentを配置するには、メインコンポーネントをコピペするだけです。
コピペされたComponentは、インスタンスと呼ばれ、
Figmaの見た目としては、「Frame」の名称が表示されなくなります。
レイヤーパネルの、アイコンには、「Frame *」と書かれていますが、アイコンが少し違うのがわかりますか？
4. メインコンポーネントを変更
元のメインコンポーネントを変更すると、インスタンスも同時に変更されるのを確認しましょう。
Componentに向いているもの
何でも、Componentとして登録すれば良いというものではありません。
Component化にむているものは、
「同じデザインを繰り返し使い、後からまとめて変更する可能性があるパーツ」
です。
以下のようなパーツが対象になるでしょう。
・ボタン
・テキスト入力欄
・ヘッダーやナビゲーション
・商品・サービス紹介カード
・アイコン
・ダイアログやモーダル
逆に、そのページに一度しか登場せず、今後も再利用する予定がない装飾などは、無理にコンポーネントにする必要はありません。
最初からすべてをコンポーネント化すると、かえって管理が複雑になります。再利用する見込みがあるか、共通デザインとして管理したいかを基準に考えるとよいでしょう。
Web制作の視点で考えるComponent
HTMLやCSSでWebサイトを作る場合も、共通パーツを再利用する考え方があります。
例えば、PHPの共通テンプレートや、フロントエンドのコンポーネントを使えば、ボタンやヘッダーなどの構造・見た目を共通化できます。
Figmaのコンポーネントも、考え方としてはそれに近いものです。
ただし、Figmaのコンポーネントはデザインデータ上の仕組みです。
PHPやJavaScriptのように、そのままWebサイトのプログラムとして実行されるわけではありません。
Figma上で共通パーツを管理しておくことで、実装前にデザインの統一性を保ちやすくなります。
あえて似たような思考で考えるのであれば、Class属性の定義と似ていると考えるといいでしょう。
同じクラス名を持っていると、そのスタイルが適用されるので、インスタンスの概念に違いですからね。
あとがき
同じボタンを10個作ること自体は、それほど難しくありません。
問題は、作った後に変更が発生したときでしょう。
1個ずつ修正するのか、元になるパーツを変更してまとめて反映するのか。
もちろん、パーツの数が増えるほど作業は大きくなります。
コンポーネントは、単なる作業の時短機能ではなく、
デザインを変更・管理しやすくするための仕組み
なわけです。
0 件のコメント:
コメントを投稿