Skip to main content

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, the SmartImporter's AI will analyze imported files to detect/propose 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 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:

  • Text - the text to display
  • Font - the font's postscript name (e.g. "OpenSans-Light")
  • FontStyle - the font's style (e.g. "Light")
  • FontSize - the font's point size (e.g. 72)
  • FillColor - a fill color (if a 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:

  • Position
  • Size


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:

  • Color
  • Position
  • Size

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:

  • Text - The first text label found inside the Adobe XD group will become the TextButton's Text.
drawing-4-1676360317.png

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.

drawing-4-1676360249.png
drawing-4-1682649872.pngdrawing-5-1700238321.png

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.

drawing-4-1676360055.png



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.

  • Change view under "Next_Button"
  • The all child layers under "Textboxes".
  • 72km under "Speed gauge"
  • D under "Battery gauge"
drawing-4-1682649907.png



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.

drawing-4-1676360097.png



Transition

The transition setting that is created by Adobe XD is transferred to State Machine editor.

drawing-4-1676360124.png



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.

drawing-4-1676360164.png



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 "Scenes#Scene2D" section and then you could get the importing result. If you press "change view" button in the right bottom corner, you can make transition to the other scene accordingly to the transition in Adobe XD.

drawing-4-1676360178.png

Back to top