【Figma】おすすめバリアントプラグイン Propstar
Figmaでコンポーネントを作っているときに、バリアントを増やすことでコンポーネントがばらばらに見えることありませんか？？
ボタンの状態などを整理する時、Figma標準機能だけでバリアントを整理しようとすると地味に手間がかかります。
そんなときにおすすめなのが、Propstarです。
※上記のプラグインは作ってみようとしましたがバリアントがどう変化するのかを取得するのが難しく、その辺もうまくまとめられたら記事にしようと思います。
それでは、今回の記事は増えすぎたコンポーネントバリアントを綺麗に整えてくれるプラグインの紹介です！
Propstar
Propstarは作ったバリアントをテーブル上で整えてくれます。
たとえば、よくある下記のようなコンポーネントがあったとします。
プロパティはシンプルにcolorとstateでバリアントを作成をしています。
▼Propstarを実行すると、マスターコンポーネントがテーブルとして表示されます！
めちゃ見やすくなりました！！
メインコンポーネントのバリアントを直接整えてくれるため、レイヤーに少し癖が出ますが非常に見やすく管理しやすいと思います。
▼Booleanを使ったバリアントプロパティが3つ以上からなるコンポーネントにおいても、整えてくれるため非常に便利です。
設定について
Boolean
Booleanのパターンをテーブルに含めるかどうかを決めることができます。
Stand alone
メインコンポーネントではなくインスタンスとしてテーブルを作成することができます。
（メインコンポーネントはそのままになります）
Preferred axis
行と列の方向の切り替え
その他設定では、買い切りの課金（7$）をすることで、線の色や太さ、余白の調整なども行うことが可能だそうです！
Nested instanceではコンポーネントのなかで使用されているインスタンスのバリアントも読み取ってテーブル化してくれるぽいので需要がある場合はぜひ購入してみてください！
Instancer
同じようなプラグインとしてInstancerがありますが、無料版だと10回の使用制限があるのとマスターコンポーネントのバリアブルではなく、インスタンスのバリアブルがテーブル化されます。
個人的にはPropstarの方が使いやすかったので今回おすすめプラグインとしてあげさせていただきました！
Propstarが使いづらいなと思った方はぜひこちらも試してみてください！
まとめ
今回は、Figmaのバリアント作業を効率化できるプラグイン、Propstarと少しだけInstancerの紹介でした！
バリアントを多用するデザインシステム制作やUIパーツの整理にとても便利なのでPropstarに任せて作業スピードを上げていきましょう！
ぜひ試してみてください〜
Discussion