aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVikas Pachdha <vikas.pachdha@qt.io>2022-05-06 17:38:50 +0200
committerVikas Pachdha <vikas.pachdha@qt.io>2022-05-17 09:16:01 +0000
commitcf5588924c8265aa0823d94dfd9ef79f6afe2917 (patch)
tree1f3407167abe135c0d5f6bd163690273f087ef95
parent6537f1cadc5a5083bf758a098b279a4e503f4f16 (diff)
Doc: Update the 2d asset import documentation
Task-number: QDS-6754 Change-Id: Ied5026a12f08fcf672e1d7563514c5b1054f6532 Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io> Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
-rw-r--r--doc/qtdesignstudio/images/studio-asset-import.pngbin0 -> 36190 bytes
-rw-r--r--doc/qtdesignstudio/images/studio-import-metadata.pngbin17685 -> 0 bytes
-rw-r--r--doc/qtdesignstudio/images/studio-imported-assets.pngbin69956 -> 52023 bytes
-rw-r--r--doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc4
-rw-r--r--doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc5
-rw-r--r--doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc54
6 files changed, 28 insertions, 35 deletions
diff --git a/doc/qtdesignstudio/images/studio-asset-import.png b/doc/qtdesignstudio/images/studio-asset-import.png
new file mode 100644
index 0000000000..9b047caa1f
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-asset-import.png
Binary files differ
diff --git a/doc/qtdesignstudio/images/studio-import-metadata.png b/doc/qtdesignstudio/images/studio-import-metadata.png
deleted file mode 100644
index e7317402f8..0000000000
--- a/doc/qtdesignstudio/images/studio-import-metadata.png
+++ /dev/null
Binary files differ
diff --git a/doc/qtdesignstudio/images/studio-imported-assets.png b/doc/qtdesignstudio/images/studio-imported-assets.png
index 7915769ffa..9204238307 100644
--- a/doc/qtdesignstudio/images/studio-imported-assets.png
+++ b/doc/qtdesignstudio/images/studio-imported-assets.png
Binary files differ
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc
index 3c71da8eb9..dcfce29214 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc
@@ -32,8 +32,8 @@
\title Exporting Designs from Figma
- You can use \QBF to export designs from Figma to \e {.metadata}
- format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
+ You can use \QBF to export designs from Figma to a \e {.qtbridge}
+ archive that you can \l{Importing 2D Assets}{import} to projects in \QDS.
\image studio-figma-export.png
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
index 1d38ca9b5e..03b354797b 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
@@ -128,9 +128,8 @@
\li When the exporting is done, select \uicontrol OK.
\endlist
- \QBF exports everything into a single archive. Before importing the design
- into \QDS, you have to manually extract the archive. Then you can import the
- \e .metainfo into a project in \QDS, as described in \l{Importing 2D Assets}.
+ \QBF exports everything into a .qtbridge archive. You can import the archive
+ into a project in \QDS, as described in \l{Importing 2D Assets}.
\section1 Export Settings
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc
index 0fd20c0467..c1d1466781 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc
@@ -55,48 +55,47 @@
\image studio-imported-assets.png "UI imported into Qt Design Studio"
\QB enables you to export assets and then import them to a \QDS project
- as image and QML files for editing in \l {Form Editor}. If you make changes
+ as images and QML files for editing in \l {Form Editor}. If you make changes
to your design in the design tool that you originally used to create it,
you can merge the changes into existing QML files without overwriting the
changes you have made in \QDS. For more information, see
\l {Exporting from Design Tools}.
- \note Attempting to import assets exported on another system might fail.
+ \QB exports the designs either as an archive(.qtbridge) or as images with
+ a .metadata file. \QDS support both formats.
The following instructions use an empty project as an example. For more
information about the options you have, see
\l {Creating Projects}.
- To import assets exported in \QB to \QDS projects:
+ To import the exported assets to \QDS projects:
\list 1
\li Select \uicontrol File > \uicontrol {New Project} >
- \uicontrol General > \uicontrol {Qt Quick Application - Empty} >
- \uicontrol Choose, and follow the instructions of the wizard to
- create an empty project.
+ \uicontrol General > \uicontrol {Empty}. Add \uicontrol {Details} about
+ the project and select \uicontrol Create.
\li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to
the Design mode.
\li Select \uicontrol Assets > \inlineimage icons/plus.png
.
\li Select the folder where you exported the assets.
- \li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown
- menu to filter \e .metadata files.
- \li Select a \e .metadata file to import, and then select
- \uicontrol Open.
+ \li Select \uicontrol {Compressed Metadata (*.qtbridge)} or
+ \uicontrol {Exported Metadata (*.metadata)} in the dropdown menu to
+ filter the exported files.
+ \li Select a the file to import and then select \uicontrol Open.
\li Select \uicontrol Details next to the
- \uicontrol {Metadata Import Paths} field to display the path where
- the metadata is imported from.
- \image studio-import-metadata.png "Asset Import dialog"
+ \uicontrol {Import Paths} field to display the path where the exported
+ assets are imported from.
+ \image studio-asset-import.png "Asset Import dialog"
\li Select \uicontrol Details next to the
- \uicontrol {QML/Asset Export Paths} field to display the paths to
+ \uicontrol {Export Paths} field to display the paths to
copy the assets to.
\li In the \uicontrol QML field, you can change the folder to copy the
QML files to.
\li In the \uicontrol Assets field, you can change the folder to copy
the image files to.
- \li Select the \uicontrol {Create sub directory for each metadata}
- check box to copy the directory structure from the metadata file
- to \QDS.
+ \li Select the \uicontrol {Create sub directory} check box to import the
+ assets in a sub directory inside \uicontrol {Export Paths}.
\li Deselect the \uicontrol {Import assets} check box if you only want
to create QML files.
\li Deselect the \uicontrol {Generate QML} check box if you only
@@ -104,26 +103,21 @@
\li Select the \uicontrol {Merge QML} check box if you have imported the
assets before and want to merge the changes into existing QML files
instead of overwriting the existing files. See \l {Merging QML Files}.
+ \li Select the \uicontrol {Round off coordinates} check box to round off
+ the position and dimension values to integers in the generated QML files.
+ \li Select the \uicontrol {Save Logs} check box to write the export logs
+ to a text file inside the directory selected in \uicontrol QML export path.
\li Select \uicontrol Import to import the QML files and assets. This
might take a little while for complex projects.
\endlist
- The imported assets are displayed in \uicontrol Assets
- as PNG images. The components that you specified in the design tool are
- displayed in \uicontrol Components > \uicontrol {My Components} as well as
- in the \uicontrol Projects view as separate QML files. To start using them,
+ The imported assets are displayed in \uicontrol Assets as images.
+ The components that you specified in the design tool are displayed in
+ \uicontrol Components > \uicontrol {My Components} as well as in the
+ \uicontrol Projects view as separate QML files. To use them,
drag-and-drop them from \uicontrol Components to \uicontrol {Form Editor} or
\l Navigator.
- \note The layer that was the bottom layer in the design tool becames the top
- layer in \uicontrol Navigator to reflect the QML code model. You
- can view the QML code in \l{Text Editor}.
-
- After importing the metadata files, wait a few moments to allow all
- imported assets to appear in your project files before selecting your
- metadata filename from \uicontrol Assets > \inlineimage icons/plus.png
- .
-
If asset importer conflicts, warnings, and errors are displayed in the
\uicontrol {Asset Import} dialog while importing, fix the issues in
design tool and export the assets again.