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>
This commit is contained in:
Vikas Pachdha
2022-05-06 17:38:50 +02:00
parent 6537f1cadc
commit cf5588924c
6 changed files with 28 additions and 35 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View File

@@ -32,8 +32,8 @@
\title Exporting Designs from Figma \title Exporting Designs from Figma
You can use \QBF to export designs from Figma to \e {.metadata} You can use \QBF to export designs from Figma to a \e {.qtbridge}
format that you can \l{Importing 2D Assets}{import} to projects in \QDS. archive that you can \l{Importing 2D Assets}{import} to projects in \QDS.
\image studio-figma-export.png \image studio-figma-export.png

View File

@@ -128,9 +128,8 @@
\li When the exporting is done, select \uicontrol OK. \li When the exporting is done, select \uicontrol OK.
\endlist \endlist
\QBF exports everything into a single archive. Before importing the design \QBF exports everything into a .qtbridge archive. You can import the archive
into \QDS, you have to manually extract the archive. Then you can import the into a project in \QDS, as described in \l{Importing 2D Assets}.
\e .metainfo into a project in \QDS, as described in \l{Importing 2D Assets}.
\section1 Export Settings \section1 Export Settings

View File

@@ -55,48 +55,47 @@
\image studio-imported-assets.png "UI imported into Qt Design Studio" \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 \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, 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 you can merge the changes into existing QML files without overwriting the
changes you have made in \QDS. For more information, see changes you have made in \QDS. For more information, see
\l {Exporting from Design Tools}. \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 The following instructions use an empty project as an example. For more
information about the options you have, see information about the options you have, see
\l {Creating Projects}. \l {Creating Projects}.
To import assets exported in \QB to \QDS projects: To import the exported assets to \QDS projects:
\list 1 \list 1
\li Select \uicontrol File > \uicontrol {New Project} > \li Select \uicontrol File > \uicontrol {New Project} >
\uicontrol General > \uicontrol {Qt Quick Application - Empty} > \uicontrol General > \uicontrol {Empty}. Add \uicontrol {Details} about
\uicontrol Choose, and follow the instructions of the wizard to the project and select \uicontrol Create.
create an empty project.
\li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to \li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to
the Design mode. the Design mode.
\li Select \uicontrol Assets > \inlineimage icons/plus.png \li Select \uicontrol Assets > \inlineimage icons/plus.png
. .
\li Select the folder where you exported the assets. \li Select the folder where you exported the assets.
\li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown \li Select \uicontrol {Compressed Metadata (*.qtbridge)} or
menu to filter \e .metadata files. \uicontrol {Exported Metadata (*.metadata)} in the dropdown menu to
\li Select a \e .metadata file to import, and then select filter the exported files.
\uicontrol Open. \li Select a the file to import and then select \uicontrol Open.
\li Select \uicontrol Details next to the \li Select \uicontrol Details next to the
\uicontrol {Metadata Import Paths} field to display the path where \uicontrol {Import Paths} field to display the path where the exported
the metadata is imported from. assets are imported from.
\image studio-import-metadata.png "Asset Import dialog" \image studio-asset-import.png "Asset Import dialog"
\li Select \uicontrol Details next to the \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. copy the assets to.
\li In the \uicontrol QML field, you can change the folder to copy the \li In the \uicontrol QML field, you can change the folder to copy the
QML files to. QML files to.
\li In the \uicontrol Assets field, you can change the folder to copy \li In the \uicontrol Assets field, you can change the folder to copy
the image files to. the image files to.
\li Select the \uicontrol {Create sub directory for each metadata} \li Select the \uicontrol {Create sub directory} check box to import the
check box to copy the directory structure from the metadata file assets in a sub directory inside \uicontrol {Export Paths}.
to \QDS.
\li Deselect the \uicontrol {Import assets} check box if you only want \li Deselect the \uicontrol {Import assets} check box if you only want
to create QML files. to create QML files.
\li Deselect the \uicontrol {Generate QML} check box if you only \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 \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 assets before and want to merge the changes into existing QML files
instead of overwriting the existing files. See \l {Merging 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 \li Select \uicontrol Import to import the QML files and assets. This
might take a little while for complex projects. might take a little while for complex projects.
\endlist \endlist
The imported assets are displayed in \uicontrol Assets The imported assets are displayed in \uicontrol Assets as images.
as PNG images. The components that you specified in the design tool are The components that you specified in the design tool are displayed in
displayed in \uicontrol Components > \uicontrol {My Components} as well as \uicontrol Components > \uicontrol {My Components} as well as in the
in the \uicontrol Projects view as separate QML files. To start using them, \uicontrol Projects view as separate QML files. To use them,
drag-and-drop them from \uicontrol Components to \uicontrol {Form Editor} or drag-and-drop them from \uicontrol Components to \uicontrol {Form Editor} or
\l Navigator. \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 If asset importer conflicts, warnings, and errors are displayed in the
\uicontrol {Asset Import} dialog while importing, fix the issues in \uicontrol {Asset Import} dialog while importing, fix the issues in
design tool and export the assets again. design tool and export the assets again.