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でAdobe Photoshop（.psd）／Adobe XD（.XD）／Figma（.fig）のファイルをインポートする時に、ファイル内のグループアイテムに、自動的にコントロールを適用させてインポートするための、各ファイルの作成方法を説明します。Importer.

自動的に適用させることが可能なコントロールは、TouchableとCommonカテゴリーのコントロールに限られます。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 

上記の方法にしたがい作成されたPSDファイルを
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 ]から開くと、Smartfile Importerダイアログが開き、PSDファイルのレイヤー構造に合わせて読み込まれます。すでに、TextButtonが適用されていることを確認できます。layers that were set. As seen in the image below, the TextButton control has already been confirmed and subsequently applied.

 

インポート後のプロパティパネルでも、PSDファイルのレイヤーが反映されていることを確認できます。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」と同一です。下図のTextButtonコントロールの例のように、. As seen below with the TextButton example, structure the Adobe XDのアイテムの構成を、自動適用させたいコントロールの構成／プロパティ名に合わせて設定してください。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」と同一です。下図のTextButtonコントロールの例のように、Figmaのアイテムの構成を、自動適用させたいコントロールの構成／プロパティ名に合わせて設定してください。. 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.