Skip to main content
Clement_Bettini
Clement_Bettini
Jun 5, 2021 4:29 PM UTC
Solved

Change Properties Variant Order

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.
    Marc30Solution
    Mar 5, 2024 4:32 PM UTC

    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.

    View in thread

    22 replies

    tank666
    tank666
    Jun 5, 2021 6:28 PM UTC

    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
      Dec 9, 2021 7:59 PM UTC

      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
        Nov 23, 2023 9:27 AM UTC
        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
          Nov 23, 2023 11:10 AM UTC

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

          Marc30Solution
          Mar 5, 2024 4:32 PM UTC

          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
            Apr 2, 2024 7:54 PM UTC

            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
            Apr 2, 2024 7:55 PM UTC

            All properties

            support1

              Marvin-aedifion
              Marvin-aedifion
              Oct 9, 2024 10:12 AM UTC

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

                Nicky_Grunfeld
                Nicky_Grunfeld
                Oct 10, 2024 12:39 PM UTC

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

                  jo1
                  jo1
                  New Participant
                  Oct 16, 2024 12:51 AM UTC

                  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