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.
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.
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 in the file to be imported are converted to optimal nodes in Scene Composer.
Artboards in the file to be imported can be treated as a Group Node in Smart Impoter.
Color PickerColor 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.
If there are no controls to apply, the Appearance tab cannot be edited. Otherwise, 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 Impoter 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 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 SceneThe 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 SceneRename 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. In case no suitable font resource has been found in the solution, a new TextStyle will be created using the font resources displayed in the "Not imported font" dialog.
Fonts that are not imported are also marked with a warning sign in the "Layer Tree" panel. A tooltip offers additional information:
Text and text-containing controls
The size and 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).
