Uploaded image for project: 'Qt Design Studio'
  1. Qt Design Studio
  2. QDS-15231

[Figma Bridge] Variants: Z-order of items are not captured during export

    XMLWordPrintable

Details

    • bafa8cedf (qds/dev), 5f4505da7 (qds/4.7)

    Description

      In Figma, the sibling that is higher in the list has a higher Z-order. In QML, the opposite is true (although this relies on an implementation detail).

      Normally, when importing a Figma project into QML, the item order is reversed to capture the correct Z-order. However, this is not done with non-default Variants.

      The attached project has 2 variants that contain differently-named elements. When converted to QML, the elements in the Alt variant have the wrong Z-order.

       

      Figma

       

      Qt Design Studio

       

      In the code below, `magenta` should come before `black`:

      import QtQuick
      import QtQuick.Controls
      
      Rectangle {
          id: shinyThing
          state: "pattern_Default"
          // ...
      
          Rectangle {
              id: cyan
              // ...
          }
      
          Rectangle {
              id: yellow
              // ...
          }
      
          Rectangle {
              id: black
              // ...
          }
      
          Rectangle {
              id: magenta
              // ...
          }
          states: [
              State {
                  name: "pattern_Alt"
      
                  PropertyChanges {
                      target: cyan
                      visible: false
                  }
      
                  PropertyChanges {
                      target: black
                      visible: true
                  }
      
                  PropertyChanges {
                      target: magenta
                      visible: true
                  }
      
                  PropertyChanges {
                      target: yellow
                      visible: false
                  }
              },
              State {
                  name: "pattern_Default"
      
                  PropertyChanges {
                      target: cyan
                      visible: true
                  }
      
                  PropertyChanges {
                      target: black
                      visible: false
                  }
      
                  PropertyChanges {
                      target: magenta
                      visible: false
                  }
      
                  PropertyChanges {
                      target: yellow
                      visible: true
                  }
              }
          ]
      }
      

      Attachments

        1. figma-variant_2-right_z.png
          23 kB
          Sze Howe Koh
        2. MessyVariants.fig
          27 kB
          Sze Howe Koh
        3. messyVariants.qtbridge
          6 kB
          Sze Howe Koh
        4. qds-state_2-wrong_z.png
          4 kB
          Sze Howe Koh

        Issue Links

          For Gerrit Dashboard: QDS-15231
          # Subject Branch Project Status CR V

          Activity

            People

              pnd Przemyslaw Lewandowski
              skoh-qt Sze Howe Koh
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes