Adobe XD Importing
Description
In this section, explain about Adobe XD file format, its layer structure and naming part and the importing example by using the concrete sample file.
Table of contents
Layer Structure and Naming Guideline
As same as PSD file format, Contorols AI Service will analyze imported files to detect/propse and create Controls for the solution. Thus, again recommended to keep Adobe XD layer format close to the standard Controls in Scene Composer. That naming guideline is as same as PSD, please refer to the Recommended Photoshop (.PSD) Layers Structure for Smart Importer in detail. And, the additional naming rules are assigned to Adobe XD file format. Please refer to the Adobe XD file format in detail.
AdobeXD Features Supported by CGI Studio Smart Importer
The Smart Importer supports importing of following Adobe XD features:
Artboards
Each AdobeXD Artboard is converted into a Scene in SceneComposer.
Components
Adobe XD has a component system, where components can be defined once, and instantiated multiple times. If an artboard references a component, the Adobe XD converter looks up and instantiates components as needed.
Texts
Adobe XD text areas are converted into Text Nodes in SceneComposer.
The Smart Importer will read the configuration of the AdobeXD text and apply the following properties to the SceneComposer Text Node:
solid-style is configured in the AdobeXD file)
Position - the position of the text area in the scene
Size - the size of the text area (might not be available, see note below)
If an AdobeXD text area is configured for Auto Width and Auto Height, the Smart Importer cannot calculate the size of the text area (bounding box).
Please also see section Text Controls of the Adobe XD import example.
Images
Adobe XD shapes ("type": "shape") with a pattern fill (a fill of "type": "solid") are converted to RenderNodes.
The Smart Importer will apply the following properties to the SceneComposer RenderNode:
Solid Rectangles
Rectangles (shapes of "type": "rect") with a solid fill (a fill of "type": "solid") are converted to SolidColorNodes.
The following properties will be applied to the SceneComposer SolidColorNode:
Please also see section Rectangle of the Adobe XD import example.
Buttons
If the Adobe XD resource contains a group, the name of which ends with _Button, the Smart Importer will create a TextButton.
Smart Importer checks the suffix in a case insensitive way, so _button or _BUTTON etc. will also work.
The Smart Importer will apply the following properties to the SceneComposer TextButton:
The button depicted above, provokes a Scene transition. This transition is taken from the first artboard transition found inside the group (see Transitions).
Transitions
Adobe XD supports building interactive prototypes with serveral kinds of transitions. A button may trigger a navigation transition to a different artboard, a component may support transitions between different states etc. SceneComposer supports button-triggered scene transitions generated from artboard transitions in the XD file.
Please also see section Transition of the Adobe XD import example.
TellTales
Smart Importer creates a TellTale Control for an Adobe XD group, whose name ends with _TellTale. If this group contains an image with OnState or OffState in its name, this image will be set as the TellTale Control's On State Image or Off State Image respectively.
Smart Importer checks the group name's suffix and the image names in a case insensitive way, so _Telltale or _telltale etc. and ONSTATE_picor image_offstate_picture etc. will also work.
Please also see section Tell Tale Control of the Adobe XD import example.
Adobe XD import example
Please get the mentioned sample Adobe XD file in the below location.
Using this sample, explain about the layer structure and restrictions for Adobe XD described in the Adobe XD file format.
"...\cgi_studio_content\2D\XD\XD_SampleCluster.xd"
Rectangle
Though there is a polygon in the group "Next_Button" of the sample, that isn't imported into a Solution in Scene Composer. This is because a rectangle shape is only supported for importing.
Text Controls
Text layer will be set as Text Control as same as other file format. In this sample, the following layer are text layers.
Tell Tale Control
Since there is "TellTale" group in the sample file and that group name has a suffix of "_telltale", its child image layers are set as Tell Tale Control.
Transition
The transition setting that is created by Adobe XD is transferred to State Machine editor.
Other options
If necessary, please change the setting on "Import to folder" and its related options. And, mark "Resize Display Resolution" option just in case.
Perform Player
After set the above, press OK button on Smart Importer dialog to proceeding import. Then, press "Play" button with "Generate and Play" option. Player application is run, and uncheck "Senes#Scene2D" section and then you could get the importing result. If you press "change view" button in the right bottom coner, you can make transition to the other scene accordinaly to the transition in Adobe XD.
