Back to Plugins
Variant Organiser

Variant Organiser

Automatically arrange variants in a grid and create property labels

sortcomponentsstructurevariantslayoutlabelgridpropertyorganisedesign systemcomponents

Plugin Preview

Variant Organiser preview

About this plugin

Keep your variants tidy with Variant OrganiserVariant Organiser automatically arranges variants in a grid and creates property labels.NEW IN VERSION 7 – Automatic ModeHow to run Variant OrganiserVariant Organiser is keyboard operated from Figma’s quick actions search bar:→ Type ⌘ + / to open Figma’s quick actions search bar (or CTRL + / if you are on Windows)→ Start typing “Variant Organiser” to search for the pluginUsing the 'Manual' command'Manual' is the new name for the 'Organise' command you know and love. Use it when you want control over the logic for ordering variants. 'Manual' mode is only available for component sets with two or more variant properties.→ First select the component set you want to organise→ Search for and select Variant Organiser > Organise in Figma’s quick actions search bar→ Follow the prompts:Select which property to use for columns in the primary gridSelect which property to use for rows in the primary grid. If your component only has two properties, that's sufficient to arrange the variants in a simple grid. If you have more properties, this grid will be repeated to form blocks of variants within a larger grid.Hit Tab to if you want to chose a property to generate horizontal blocks. This step is optional.Hit Enter to generate the full grid structure. Any remaining properties will be used to group variants vertically.Using the 'Automatic' commandThe 'Automatic' command organises variants automatically, without asking you to enter any parameters. Variants are organised based on the order that variant properties appear in Figma's right sidebar. 'Automatic' mode works on component sets with any number of variant properties. Use 'Automatic' mode when your component set only has one variant property.How to edit spacing preferencesYou can edit the spacing between variants, as well as the block spacing in Preferences.→ Search for and select Variant Organiser > Preferences in Figma’s quick actions search bar→ Follow the prompts:Enter the Variant spacingEnter the Block spacingHit Enter to save your preferences

Plugin Details

Version9
CreatedDecember 1, 2021
Last UpdatedAugust 7, 2024
CategoryFile organization plugins
CreatorGiles Perry
Stats5342 installs, 505 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none