QmlDesigner: Create Figma Quick Control Template merge doc

There is a new feature, which lets to have Figma users templates
from Qt Design studio on Figma end. And later getting components
imported from Figma to Qt Design studio to have them accurately
as local components. This document aims to note that process.

Fixes: QDS-8719
Change-Id: I8b375730c32c8a41bbeebcacc616ed2a295bf881
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

5 files changed, 91 insertions, 2 deletions

diff --git a/doc/config/macros.qdocconf b/doc/config/macros.qdocconf
index 4ae4dc1617..97e6fa7593 100644
--- a/doc/config/macros.qdocconf
+++ b/doc/config/macros.qdocconf
@@ -50,6 +50,7 @@ macro.beginfloatright.HTML  = "<div style=\"float: right; margin-left: 2em\">"
 macro.endfloat.HTML         = "</div>"
 macro.clearfloat.HTML       = "<br style=\"clear: both\" />"
 macro.emptyspan.HTML	    = "<span></span>"
+macro.externallink.HTML     = "<a href=\"\1\" target=\"_blank\">\2</a>"
 
 # Embed YouTube content by video ID - Example: \youtube dQw4w9WgXcQ
 # Also requires a <ID>.jpg thumbnail for offline docs. In .qdocconf, add:
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-template.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-template.qdoc
new file mode 100644
index 0000000000..29b161562d
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-template.qdoc
@@ -0,0 +1,87 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \previouspage qtbridge-figma-using.html
+    \page qtbridge-figma-template.html
+    \nextpage exporting-3d-assets.html
+
+    \title Using Figma Quick Control Template Components in \QDS
+
+    You can design with the template components created by \QDS in Figma
+    and import them to \QDS with \QBF. These template components are structured
+    specifically for Figma. When you design in Figma using them, and import the design with
+    \QBF, they generate functional QML components for \QDS. So, you can edit components both in
+    \QDS and Figma.
+
+    \section1 Using Figma Template Components
+
+    You should have these prerequisites available:
+    \list
+        \li A Figma professional account.
+        \li \QDS Enterprise license.
+        \li \QDS 3.9 or above.
+
+        \note You can try out the template features with a Figma starter account as well. However,
+        if you want to publish template assets in Figma, you need a Figma professional account
+        for that.
+    \endlist
+
+    \section2 Creating Figma Design with Template Components
+
+    \list 1
+        \li Sign in to Figma.
+        \li Go to the Template provided by \QDS team
+            \externallink {https://www.figma.com/community/file/1185200043286168239}{here}.
+        \li Select \uicontrol {Get a copy} and then your account to have a copy
+            on your Figma workspace.
+
+            \note  From the \uicontrol {Layers} tab you can find pages of contents. Here,
+                   select \uicontrol {Introduction} to access all the knowledge about the
+                   templates workflow and key concepts.
+        \li There are templates for individual components in separate pages.
+            Select the page you want to work on from template and copy
+            all of its contents.
+        \li Create a new Figma design file. In Figma, select \uicontrol Menu
+            > \uicontrol File > \uicontrol {New design file}.
+        \li Paste the copied content to this file and save.
+            Here, do all the modification you need using Figma tools.
+        \li Next, publish this template assets. In Figma, select \uicontrol Menu
+            > \uicontrol Libraries. Then select \uicontrol Publish. You don't need to
+            publish the template itself, just publish the components. You can clear
+            \uicontrol Template from the \uicontrol {Changes} section to have it removed from
+            publishing assets.
+        \li Create another new project, where you would use this published component.
+            Or, you can use this component in one of your existing projects in Figma.
+
+            \note In Figma, select \uicontrol Menu > \uicontrol Libraries to find the
+            published components. You can find these components under \uicontrol {Your teams}.
+            Toggle them active to use in a project.
+    \endlist
+
+    \section2 Importing the Figma Design to \QDS with \QBF
+
+    \list 1
+        \li In Figma, do one of the following:
+            \list
+                \li Select \uicontrol Menu > \uicontrol Plugins > \uicontrol {Qt Bridge for Figma}.
+                \li Select \uicontrol Resources \e(Shift + I) > \uicontrol {Qt Bridge for Figma}
+                > \uicontrol Run.
+            \endlist
+        \li Save the file to your local system.
+        \li Import the \QBF file to a project in \QDS. You can drag the file to project.
+            Then, select \uicontrol Import, and wait until the process is finished.
+        \li Drag the imported \QBF file to the \QDS open project. Select \uicontrol Import, and
+            wait until the process is finished.
+        \li You can find the imported design as QML files in \QDS. Figma
+            assets are also imported as components in \QDS. You can manipulate
+            \uicontrol states or \uicontrol properties natively.
+
+        \note You can also edit the design in Figma and bring it again to \QDS using \QBF.
+            However, you need to name this imported file exactly same as before. Then import it to
+            the project in \QDS to have it synchronized. \QDS lets you have the
+            updates you have made locally on top of the imported component updates.
+    \endlist
+
+
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
index 8a00c8833c..1af2351e7d 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
@@ -4,7 +4,7 @@
 /*!
     \previouspage qtbridge-figma-setup.html
     \page qtbridge-figma-using.html
-    \nextpage exporting-3d-assets.html
+    \nextpage qtbridge-figma-template.html
 
     \title Using \QBF
 
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
index a36e3759e3..3ff3e45937 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -162,6 +162,7 @@
                                 \list
                                     \li \l{Setting Up Qt Bridge for Figma}
                                     \li \l{Using Qt Bridge for Figma}
+                                    \li \l{Using Figma Quick Control Template in Qt Design Studio}
                                 \endlist
                         \endlist
                         \li \l {Exporting 3D Assets}
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
index 2910cf2a9b..e861133efd 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
@@ -5,7 +5,7 @@
 /*!
     \page exporting-3d-assets.html
     \if defined(qtdesignstudio)
-    \previouspage figmaqtbridge.html
+    \previouspage qtbridge-figma-template.html
     \else
     \previouspage quick-states.html
     \endif