Skip to main content

TL;DR I want to select a variant by what it looks like, without needing to (mentally) translate it into words. Let me cycle through variants rapidly with a keyboard shortcut.


Example: (exact key combinations flexible)



  • Cycle to next variant: CMD + Ctrl + >

  • Cycle to previous variant: CMD + Ctrl + <

  • Press and hold either down to rapidly cycle through all





Process steps (what I should be able to do):



  1. Select a component variant I’ve placed in a design frame.


  2. Use a keyboard shortcut to quickly cycle to the next variant.

  3. If I overshoot (cycle past it), use the related keyboard shortcut to cycle back one variant. (shortcut with “<” instead of “>”, for example)


Benefits:



  • My eyes stay in one place, instead of moving back and forth between the icon and the variant properties in the right panel. The eye-travel requires re-centering each time, to triangulate the correct drop-down.

  • I don’t have to navigate several drop-downs, each with multiple options.

  • A huge reduction in time required.


Options (other ways of accomplishing a similar outcome via images):



  • A “next variant” button in the variants section on the right UI panel


Next Variant Button (and Previous)



  • Right-click a component, click “See Variant Options”, and a pop-up displays that component’s variants. Click the one that looks right.


Variant - Right Click Variant Panel



  • Select a component, click a “Choose from Variants” button (near the “Go to Main Component” button in the right panel), select a different variant that looks right


Variant - Select window from right panel



  • Right-click a component, click “Change Variant”, and a drop-down list (similar to current functionality) appears, but with added images of the variants


Variant - in right-click dropdown list


Precedent:



  • The “Swap Instance” panel accomplishes a similar task, but with instances instead of variants


Additional thoughts: “A picture is worth a thousand.”

Translating a visualized images into words like “disabled”, “hover”, “inactive”, “primary”, etc… takes human computing power and increases cognitive load. It also takes more time.


When I drop a component into place, I want to quickly switch between variants to pick the one that fits best. And 9/10 times I will know which variant I want immediately when I see it. I don’t want to take time to switch several options in the right panel, struggling for just the right combination. A keyboard shortcut let’s me get there quicker.


Anyone else had this frustration?

Yes please! I was just googling, looking for a shortcut to toggle through variants.

Did this change? I can’t seem to get it to work

I wish, @Robert_Kaminski ! haha


This is not yet a feature, as far as I know. This is the design of a feature I’d like to see implemented.

Hi @Buck, I built a plugin to achieve something close to your first request of cycling through variants using keyboard shortcuts. Properties Shortcuts




In this video you can see the plugin allows you to step to the next and previous variant, and I’ve combined this with mac keyboard shortcuts to trigger each action individually.


There are some limitations, currently it only works with variant properties (no booleans or instance swaps) as that’s a more complicated problem. The bundled “Increment property” function does allow to iterate through these but only in a single direction and only a single property.


Let me know if this helps or if you have any questions about usage 👍

Here’s another plugin (Swap Variant) that that achieves the alternative approach of a “Swap Instance”-like interface. This plugin allows you to preview all possible variants and as an added bonus shows what it will look like with the current overrides too.




Wow, Grant, great work! Definitely closer a lot closer to the goal. Hopefully Figma will catch on and implement something similar natively!

Also, the second plugin is great, too! Gives you a chance to see them all at a glance, which is often all you need to pick out the right one instantly. Excellent!

is this feature still available or is a paid feature, because on windows doesn’t work, i’m using Figma in chrome browser

Aww I just googled this to see if it was possible. I’ll try the plugin…

Reply


Terms & ConditionsCookie settings