Docs: Document variant support in Figma

Task-number: QDS-6654
Change-Id: I0bf13336af5a320606e9e740203924fdb21672f6
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Aleksei German <aleksei.german@qt.io>

1 files changed, 19 insertions, 0 deletions

diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
index 30f172b9f7..1d38ca9b5e 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
@@ -97,6 +97,25 @@
     handle, such as gradient fill colors or a mixed radius, the frames are
     exported as images.
 
+
+    \section2 Using Variants
+    Figma variants are exported as a component with states. All variants
+    inside a \e component-set are merged together and the differences across
+    the variants are translated into states.
+
+    For an optimal output, follow these guidelines:
+    \list
+        \li \QBF panel is disabled for variants. Before adding
+            a variant to a component, the \QBF settings for the component
+            should be complete.
+        \li Do not change the layer names across the variants. The \l ID  of
+            a layer is derived from the layer name which in turn is used
+            to identify the property differences for the state generation, so
+            it is essential to keep the layer names same across variants.
+        \li Adding and removing layers across the variants is fine and
+            encouraged to create the variant differences.
+    \endlist
+
     \section1 Exporting Designs
 
     \image qt-figma-bridge.png "Qt Bridge for Figma"