Basic Operations

This section describes the basic operations on the Smart Importer.

Import File Formats

The Smart Importer uses the following two methods for import, depending on the file format to be imported.

Local files: *.psd, *.xscil, *.xd, *.rp, *.sketch
Cloud Resource: Figma data

For more information on Photoshop layer structure format, see Recommended Layers Structure for Smart Importer.

Restore Settings

The settings that were applied when the import was performed are saved in the solution along with the imported scene. Therefore, when importing the same file again and importing to the same path in the Solution Explorer, the Smart Importer will display a dialog asking if you want to use the saved settings.

Restore	Saved settings are applied.
Cancel	No saved settings are applied and new settings are made.

If an image has been replaced in an imported file, the old image in the scene can be replaced with a new, updated image while maintaining the previous mapping between layers and controls by using [ Restore ].

For other behaviors when reimporting files, see here.

Conversion to 2D Nodes

During import, specific elements (artboards/color pickers, in Photoshop) in the file to be imported are converted to optimal nodes in Scene Composer.

Artboards	Artboards in the file to be imported can be treated as a Group Node in Smart Impoter.
Color Picker	Color pickers in the file to be imported can be treated as Solid Color Nodes. In this case, the solid color layer will use the same icon as the Solid Color Node in Smart Importer.

Under any of the following conditions, the Appearance tab cannot be edited.

The layer of the file to be imported does not have image information.
The applied control does not have a properties that refers to an image.

Other than the above, the same options are available as for image layers. For example, the Layer Mapping section can generate image resources once (Control) properties are mapped to a layer. Similarly, other prototyping tools will do the same with color pickers.

For each node in a 2D scene, see here.

Control instance configured with Smart Impoter

After finished applying the detected controls and configuring images, pivot points, and other properties, click the [ OK ] button at the bottom of the Smart Impoter dialog to import the configured file.

See the Smart Impoter UI for details on what to configure in each part of the Smart Importer dialog.

It will be imported to the location specified in the Import Settings Tab, with the configured settings. Note that the control instance configured in Smart Impoter (e.g., "Gauge left" in the image below) can be viewed in the Import panel.

Control instances configured in Smart Importer can be used in the scene editor or by dragging them into the scene tree.

Configure Scenes

The Import Settings tab allows you to manage scenes to be imported into Scene Composer. After selecting a target scene from the [ Scenes: ], open the context menu to see the following options

Add Scene	Add a new scene. Note that all checks for each element displayed in the layer tree will be unchecked. After the operation, the [ Add Scene... ] dialog box will appear, and enter a name for the new scene.
Clone Scene	The scene will be duplicated maintaining the configuration on the current layer tree. After the operation, the [ Add Scene... ] dialog box will appear, and enter a name for the new scene.
Remove Scene	Deletes the selected scene.
Rename Scene	Rename the scene. Can also change the name by double-clicking the target scene name.

TextStyle

When importing a Text Layer into Scene Composer, a new TextStyle is created. Its name will be a combination of the font name and the font size used in the Text Layer of the PSD file. Upon creation of a new TextStyle Scene Composer checks if a font resource with the corresponding name is registered in the Scene Composer solution. If the appropriate font resources cannot be found in the solution, a dialog box like the below will be displayed.

If the font does not exist in the solution, you can use an existing font resource by specifying an alternative font on this dialog.

Text and text-containing controls

The bounding rectangle (width/height) of text and controls containing text are imported as automatic values.

Global State Machine

State Machine elements are all imported as Global State Machine (confirmation dialog is not displayed).