Skip to main content
Clement_Bettini
Clement_Bettini
June 5, 2021
Solved

Change Properties Variant Order

  • June 5, 2021
  • 22 replies
  • 12844 views

It would be great if we could put the properties in the order we want in the variants.

With drag and drop like layers.

Have a good day 🙂

    This topic has been closed for replies.
    Best answer by Marc30

    OMG I am sooo glad to have found this out! It’s been driving my OCD nuts 🙂 It wasn’t easy to find.

    order-variants

    You have to hover your mouse over that little area on the left to get the hand icon to show up but then you can drag. It might be handy if the UI had the little “grips” visible all the time.

    22 replies

    tank666
    tank666
    June 5, 2021

    You can change the order of properties and property values.
    https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Reorder_properties_and_values

    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
      Dave19
      Dave19
      New Member
      December 9, 2021

      How do you change the order of the variants within the properties?
      Eg.
      From: Size: S, L, M, XL
      to Size: S, M, L, XL

      UPDATE - I see that you can drag the pills around (that wasn’t obvious - but it works)

        Martin_V
        Martin_V
        November 23, 2023
        1. Find your main component
        2. Navigate to the properties panel (right side panel).
        3. Find the variant property and click edit property.
        4. Redorder list position of variants as you see fit. This is the same list order used used to navigate and swap variants on a child component.
          Joseph_Petzold
          November 23, 2023

          Thank you! This helped. The original solution was changed in an update, apparently.

          Marc30Solution
          March 5, 2024

          OMG I am sooo glad to have found this out! It’s been driving my OCD nuts 🙂 It wasn’t easy to find.

          order-variants

          You have to hover your mouse over that little area on the left to get the hand icon to show up but then you can drag. It might be handy if the UI had the little “grips” visible all the time.

            Bruno_Dimas_Wilczek
            April 2, 2024

            I created 23 properties to easily edit a table (one property for each text), but when I copy the component to use, was without the order planned and I don’t know how can I fix that

            support2

            Bruno_Dimas_Wilczek
            April 2, 2024

            All properties

            support1

              Marvin-aedifion
              Marvin-aedifion
              October 9, 2024

              This got even less noticeable in the new UI, FYI design folks.

                Nicky_Grunfeld
                Nicky_Grunfeld
                October 10, 2024

                With the changes I can’t figure out how to change it. Can you help me out?

                  jo1
                  jo1
                  New Participant
                  October 16, 2024

                  i can’t figure out how to reorder the boolean properties in a component? It used to be easy and now it seems there is no way? so annoying! i have to delete the properties and then add them back in in the right order. c’mon Figma

                    Show more replies
                    Terms & ConditionsAccessibility statement