Figmaでコンポーネントを作成しバリアントを設定すると、プロパティの並び順が意図せずバラバラになってしまうことがあります。
今回は、バリアントプロパティの順番を自由に並び替える方法 を解説します。
バリアントの作成順に依存せず、ドラッグ&ドロップで直感的に並べ替える方法があるので、整理したい方はぜひ試してみてください。
目次
プロパティの並び順がバラバラになる問題
Figmaでコンポーネントを作成しバリアントを使っていると、プロパティの並び順が意図せずバラバラになる ことがあります。
例えば以下のようなコンポーネントを作成し…
プロパティパネルのバリアント選択欄をクリックすると…
プルダウンリストの並びがA→B→C→Dの順となってほしいのに、C→A→D →B というように順序がバラバラとなってしまっています。
バリアントプロパティの並び順が崩れる理由
Figmaでは、バリアントを作成した順にプロパティの順番が決まるため、意図しない並び順になってしまうことがあります。
バリアントのプロパティは意外と簡単に入れ替えられるのですが、その場所が分かりづらいところにあります。
バリアントプロパティの並び替え手順
コンポーネントを選択する
右側ツールパネルのプロパティから設定アイコンをクリック
設定アイコンはマウスオーバーしたときのみ表示されます。（わかりにくい…）
クリックすると「バリアントプロパティの編集」というポップアップが表示されます。
プロパティ名の左端にカーソルを合わせて並び替え
上下にドラッグすると並び替えができます。
並び替えて…
並び替え後のバリアントプロパティ
再度確認すると、ちゃんと並び替えできています！
まとめ
ずっと気になっていたのですが、直さなくても問題ない部分だったため毎回スルーしていました。
複数人が参加するプロジェクトなどでは、見やすさの観点から直したほうがいいかもしれませんね！
それでは〜👋
コメント