Zenn
👨‍🎨

Figma で component を活用する

2022/04/04に公開
Figma
デザイン
tech

🧩 Component?

Component は，名前の通り細かい部品を Figma 上で使いまわすことができる機能です．

component のデザインは利用箇所で同期されているので，今後のデザイン変更にも素早く対応することができます．簡潔に言うと DRY 原則をいい感じに守ることができます!
また，自ずと細かい部品ごとのデザインが作られるので，フロントエンドエンジニアの方々にページのデザインを待っている間にコンポーネントを実装してもらうということも可能です．

🪄 Component を作る

  1. Component のデザインを作って
  2. 右クリックして "Create component" を押す ( Ctrl+Alt+K でも🙆 )
  3. Component が生える

このとき，component の名前が "Component 1" などになっていてわかりにくいので，名前をダブルクリックして「ボタン」などにするとよりよいと思います．

✨ Component を利用する

📋 複製して利用する

上の手順で作った component (main component) を何らかの手順で複製すると，main component 自体がコピーされる代わりに，その main component の instance が作成されます．この 2 つは Layers パネルや Canvas 上のアイコンで見分けることができます．( 💠 的なアイコンが main component, ◇ 的なアイコンが instance です )

🗃 Asset から利用する

作成した component は，左の Assets パネルからドラッグアンドドロップで呼び出すこともできます．

✏️ Component を編集する

🌏 全ての instance を変更する

Main component を編集すると，その main component の instance 全てで変更が反映されます．


上が main component で下が instance．Main component 上で変更があるとそれが instance にも反映される．

🧩 個々の instance を変更する

Instance を変更することもできます (override と呼ばれます)．

  • Override された変更はその instance のみ影響があります．
  • Override された変更は，Main component 上で変更があっても維持されます．


上が main component で下が instance．Instance 上でテキストを変更したあと (override) に main component でテキストを変更しても override のほうが強いので影響されない．

上の例ではテキストの内容を override しましたが，テキストのスタイル は override していないので，main component でテキストのスタイルや位置を変更すると instance にも適用されます．

🎭 Component の見た目の種類を増やす

Component は複数の見た目を持つことができます (Variant といいます)．

🔬 Variant の仕組み

Component で variant を有効にすると，以下の設定項目が追加されます．

  • Property
    その component で設定可能な内容．例えば 大きさ など．
  • Value
    そのプロパティで設定可能な値たち．例えば 大きさ property の variant は大 中 小．

ボタンだと，このようなプロパティが考えられます．

Property の名前 Value 1 Value 2 Value 3
style primary secondary disabled
icon nothing right arrow trash can

✨ Variant を使ってみる

説明を容易にするために，Variant を使いたいケースのストーリーを導入しておきます．

ここにメッセージダイアログの component を作りました．

いまのところは成功時の component しかないのですが，他に エラー と 警告 も増やしたいと考えています．大きさ等も変わらず，唯一変わるのは枠線の色のみなので，variant を使って 1 つの component にまとめてしまうことにしました．

Variant を有効にする

Variant は以下の手順で有効にできます．

  1. Component をクリックする．
  2. 右の Design パネルで "Variant" の右にあるプラスアイコンをクリックする
  3. Variant が有効になります．

Variant を有効にすると，自動的に 2 つ目の Variant が作成されます．

Value の値を適切に設定する

デフォルトでは，以下のような property と value が設定されています．

Property の名前 Value 1 Value 2
Property 1 Default Variant 2

わかりにくいので，以下のように変更してみます．

Property の名前 Value 1 Value 2
種類 成功 エラー

Value を変更する

  1. Value を変更したい variant をクリックする．
  2. 右の Design パネルで value を変更する．

Property を変更する

  1. Canvas 上か Layers 上のコンポーネントの名前をクリックする．
  2. 右の Design パネルで property の名前を変更する．

Variant ごとにデザインを変える

対応する variant を編集すると，variant ごとのデザインを作成することができます．

このようなデザインにしてみました．

さらに Variant を増やす

任意の variant を複製すると，新しい variant と value が component に追加されます．
以下の GIF では，「警告」variant を新しく作っています．

Variant を使う

通常のように component を呼び出したあとに，右の Design パネルで value を選択することができます．

👋 おわり

Component を使うと，ボタンのデザインの改修をしたいけど全部のボタン編集するの面倒くさすぎるとかがなくなるので，ぜひ活用してください!

🧑‍💻 Author

フライさんです．Twemoji が好きです．

GitHubで編集を提案

Discussion