Recommended Photoshop (.PSD) Layers Structure for Smart Importer

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

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

---

Adobe Photoshop（.psd）の作成方法

作成方法は次の通りです。

上記の方法にしたがい作成されたPSDファイルを [ インポート ] > [ Smart Importer ] > [ ローカルファイル... ]から開くと、Smart Importerダイアログが開き、PSDファイルのレイヤー構造に合わせて読み込まれます。すでに、TextButtonが適用されていることを確認できます。

インポート後のプロパティパネルでも、PSDファイルのレイヤーが反映されていることを確認できます。

レイヤーとプロパティが一致しないノードをインポートすると、新しいグループノードが作成され、追加のプロパティがその子要素として追加されます。

---

Adobe XD（.xd）ファイルの作成方法

基本的な作成方法は、「Adobe Photoshop（.psd）の作成方法」と同一です。下図のTextButtonコントロールの例のように、Adobe XDのアイテムの構成を、自動適用させたいコントロールの構成／プロパティ名に合わせて設定してください。

Figma（.fig）ファイルの作成方法

基本的な作成方法は、「Adobe Photoshop（.psd）の作成方法」と同一です。下図のTextButtonコントロールの例のように、Figmaのアイテムの構成を、自動適用させたいコントロールの構成／プロパティ名に合わせて設定してください。

---

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

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.