Recommended 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.

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.