コンポーネント管理がより簡単に！Figma Config 2022で追加された新機能「properties」を解説

どうも、figma愛好家のせっきーです。

さあ今日もfigmaでコンポーネントを登録！アイコン無しverの差分も作りたいからVariantを追加しよう！

コンポーネント登録されたボタン

右カラムからVariantを追加…

Variantsの項目が無～～～い！
まさかfigmaはあんな便利なVariantを削除したのか…？

と思ったらあった

どうやらPropertiesという項目に移動していた模様。
加えて

• Boolean

• Instance swap

• Text

という見慣れない項目もあります。

どうやらこれらはfigmaのアップデートイベントConfig 2022で追加された新機能「Properties」機能というものらしいです。

最初はどう使うかいまいちわからなかったのですが使っていくうちに便利さがわかってきたので、本記事では備忘録も兼ねて、Properties機能の使い方をまとめました。

Boolean

True/Falseの値を持つ条件をコンポーネントに設定することができます。

Propatiesの＋アイコンから「Boolean」を選択

コンポーネント内オブジェクトの「Layer」に先ほどの設定を適用させると、
『「アイコンを表示」がTrueの時のみ、このオブジェクトを表示する』
ようになり、Variantを設定せずとも切り替えが可能になります。

マスターコンポーネント

「アイコンを表示」をFalseにしたインスタンス（子コンポーネント）

Instance swap

元々コンポーネントのインスタンス（子コンポーネント）を別のインスタンスに切り替える機能だったInstance swapですが、アップデートでコンポーネント内の要素に対しても設定できるようになりました。

コンポーネント内にあるインスタンスを選択し「Apply instance swap property」を設定するとこちらもVariantを設定せずとも、切り替えが可能になります。

マスターコンポーネント

インスタンスの右カラムから切り替えが可能

Text

Textプロパティを設定することで右カラムからテキストをいじれるようになります。テキスト差分が多いコンポーネントに設定しておくと便利です。

いじりたいテキストを選択して「Apply text property」

基本デフォルトでOK

いちいちテキストレイヤーを選択しなくても良い！

差し変わる部分はTextプロパティが適用されたテキストのみなので、Auto Layoutを正しく設定してコンポーネントを作らないとレイアウトが崩れてしまうので注意が必要です。（Booleanでも同様）

まとめ

色んなパターンに対応できそう

Properties機能をうまく使いこなせば差分管理がよりやりやすくなったり、作業スピードが上がったりと便利なので
皆さんもぜひ活用してみてはいかがでしょうか。

viviONでは一緒に働く仲間を募集しています！

株式会社viviONでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。

デザインチームの仕事やviviONの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。

株式会社viviON デザイナー の求人一覧