Recommended Photoshop (.PSD) Layers Structure for Smart Importer

This page will explain how best to set up items so that they and their internal group items are automatically detected as controls when importing Adobe Photoshop (.psd)/Adobe XD (.xd)/Figma (.fig) files with the Smart Importer.

Controls that can be automatically assigned are limited to those found in the Touchable and Common categories.

For Adobe Photoshop（.psd）Files

Making controls from photoshop layer data can be in the following way 

After observing the above method, select the finished photoshop file from the Scene Composer toolbar [Import] > [Smart Importer] > [From local file...]. The Smart Importer panel will open, and the file will be loaded in line with the .psd file layers that were set. As seen in the image below, the TextButton control has already been confirmed and subsequently applied.

Each property on the Appearance and Basic Property tabs will also reflect the layers that were set in the .psd file. 

This will also be reflected on the property panel after importing is complete. 

When importing nodes with mismatching layers and properties, new group nodes are created, and additional properties are added as child elements.

For Adobe XD（.xd）Files

The preparation needed for .xd files is for all intents and purposes the same as with 「For Adobe Photoshop（.psd）Files」. As seen below with the TextButton example, structure the Adobe XD items to match the structure and property names of controls to be automatically applied.

For Figma（.fig）Files 

The preparation needed for .fig files is for all intents and purposes the same as with 「For Adobe Photoshop（.psd）Files」. As seen below with the TextButton example, structure the Figma items to match the structure and property names of controls to be automatically applied.

以降は、英訳の必要はありません。無視してください。

These are the recommended steps for Photoshop layers' naming and structure of a Control when creating a PSD file with Adobe Photoshop. This procedure makes it easier to apply properties to a Control via the Smart Importer.

How to set appropriate group and layer names:

The below image shows the Smart Importer dialog when a PSD file following the correct format is opened.
It is imported according to the layer structure of the PSD file.

In the Smart Importer dialog, if you apply the TextButton control to the TextButton node, the layers of the PSD file will be reflected in each property as shown in the below image.

The below image shows the Properties panel after import settings shown in the above image. The contents/layers of the PSD file are reflected in the Properties panel.

In the below image, when Button is applied instead of TextButton, Text property is not applied correctly since a Button control does not have this property.

If you import a node whose layers and properties do not match, a new Group node will be created and the extra property is added as its child element.

Layer Structure and Naming Guideline for Controls

In general, it is recommended to keep the PSD layer format close to the standard Controls. Below is a guide on how the layers for some Controls should be formatted and named.