Figma
Smart Importerは、Figmaデータをインポートすることができます。このページでは、Figmaデータのインポート方法やSmartImporter Importerでインポートした場合の結果について説明します。can import Figma data. This page explains how to to import Figma data with Smart Importer and how to work with the results.
Figmaデータのインポートの準備Preparations for Importing Figma DataFigmaデータのインポートの手順How to Import Figma DataFigmaデータのインポートの詳細Importing Figma Data - Advanced
Figmaデータのインポートの準備Preparations for Importing Figma Data
ソフトウェア環境Software Environment
The following software is needed in order to perform Figma data imports with Smart ImporterでFigmaデータのインポートをおこなうには、次のソフトウェアのインストールが必要になります。Importer:
Node.js（推奨バージョン： (Recommended version: v18.16.0）0)
URLとアクセストークンの準備Preparing the URL/Access Token
In order to perform Figma data imports with Smart ImporterでFigmaデータのインポートをおこなうには、あらかじめインポートしたいFigmaデータのURLとアクセストークンを準備しておく必要があります。Importer, a URL and Access Token that corresponds with the Figma Data needs to be acquired in advance.
以下は、Figmaのデスクトップアプリを用いたURLとアクセストークンの入手方法です。The URL and Access Token can be acquired using the Figma desktop application as below.URLの入手方法：
Acquiring the URL:Figmaのデスクトップアプリの最上部の各ファイルのタブから、URLを入手したいファイルのタブのコンテキストメニューから
At the topmost bar in the Figma desktop application, right-click the relevant project tab and from the context menu select [Copy リンクをコピーlink]. ] を選択します。
アクセストークンの入手方法：
Acquiring the Access Token:Figmaのデスクトップアプリのツールバーの
From the Figma desktop application toolbar select [Figma Figmaアイコン ]Icon] > [Help ヘルプとアカウントand ]Account] > [Account アカウントの設定 ] からダイアログを開きます。Settings].
次にダイアログで、On the next screen, the [Account] アカウントpage ]will タブの個人アクセストークンの入力欄にトークンの説明を入力し、Enterキーを押すと、アクセストークンが生成されます。
have an input field for generating an Access Token. Enter some text that describes the project, press the Enter key, and an Access Token will be generated.
Figmaデータのインポートの手順How to Import Figma Data
1. メニューバーのFrom the Scene Composer toolbar select [ インポート ]Import] > [ Smart Importer ]Importer] > [From クラウドリソースから.cloud resource...], ]and を選択し、クラウドリソースからインポートダイアログを開きます。a new dialog panel titled [Import from cloud resource] will be displayed.
2. クラウドリソースからインポートダイアログのURLとアクセストークンを入力し、Enter the URL and Access Token in the respective fields and click [OK]. OKPlease ]refer をクリックします。URLとアクセストークンの入手方法は、「URLとアクセストークンの準備」を参照してください。to「Preparing the URL/Access Token」 for acquiring the URL and Access Token.
3. The Smart Importerダイアログが開きます。Importer dialog panel will open. Operating Smart Importerダイアログの操作は、その他のファイルと同様です。詳細は、Importer here is no different to when importing other filetypes. For details, please see 「3. Scene Composer > リソースのインポートImport of Resources > Smart Importer > 使用方法」を参照してください。必要な設定をおこないHow to Use the Smart Importer」. After making the necessary setting adjustments and clicking [OK], OKthe data will be imported into the folder designated in [Import to folder: ] をクリックすると、[ フォルダーにインポート： ] に設定した場所にインポートされます。.
Figmaデータのインポートの詳細Importing Figma Data - Advanced
シーンとしてインポートImporting as a scene
Figmaデータに含まれるすべてのページの親アイテムは、The topmost item of each page included in the Figma data will be imported into Smart Importerではシーンとしてインポートされます。インポート時に、"Importer as a scene. For this, use the following naming convention: <ページ名Page name>_<親アイテム名Parent item name>" と名付けられます。
FigmaのアイテムとSceneRelationship Composerのノードの関係between Figma items and Scene Composer Nodes
Figmaの各アイテムをSmartWhen Importerでインポートした場合、次の表にしたがい、Sceneimporting Composerの特定のノードとしてインポートされます。Figma items with Smart Importer, each item will be imported as a specific type of node, as seen in the table below.
| Scene |
||||
| Component | ✓ | |||
| ComponentSet | ✓ | |||
| Ellipse | ✓ | |||
| Frame | ✓ | |||
| Group | ✓ | |||
| Instance | ✓ | |||
| Line | ✓ | |||
| Polygon | ✓ | |||
| Rectangle | ✓ | |||
| Section | ✓ | |||
| Slice | ✓ | |||
| Star | ✓ | |||
| Text | ✓ | |||
| Vector | ✓ | |||
ビットマップとテキストは、レンダリング情報が取得可能な場合のみインポートすることができます。例えば、Figmaアイテムが非表示に設定されている場合は、インポートすることはできません。Bitmaps and texts can only be imported when their render data is made available. For example, should a Figma item be set to "hidden", it cannot be imported.
コントロール、または、ビットマップとしてインポートImporting as Controls or Bitmaps
以下の子アイテムを持つことができるFigmaアイテムは、It is possible with Smart Importerでは、コントロールまたはビットマップとしてインポートすることもできます。Importer to import as a control or bitmap any Figma items that can hold the following child items:
- Component
- ComponentSet
- Frame
- Group
- Instance
- Section
コントロールとしてインポートImporting as a control
Figmaのアイテムの名称の先頭を「SC_コントロール名」にすることで、アイテムをコントロールとしてインポートすることができます。また、子アイテムの名称を該当コントロールのプロパティの名称と同一にすることで、プロパティ値として設定することができます。An item can be imported as a control when it is named [SC_<control name>]. Furthermore, property values can also be set when using the names of control properties for the names of child items.
この機能がサポートされているのは、TouchableとCommonカテゴリーに含まれるコントロールのみです。This functionality is only supported with Touchable and Common controls.
ビットマップノードとしてインポートImporting as bitmaps
ビットマップアイテムは、グループアイテムのアイテム名のプレフィックス（接頭辞）を "SC_Bmp" にすることで、子アイテムも含め、Smart Importerでは１つのビットマップノードとしてインポートできます。Importer can import group items with child items as bitmaps when the the group item name is prefixed with [SC_Bmp].
ステートマシンとしてインポートImport as state machine
Figmaのフロー（画面を遷移させる）は、SmartFlows Importerではステートマシンとしてインポートされます。(transitions) in Figma are imported as state machines.
インポート後のステートマシンの名前は、"After import, the flow name will be prefixed with [StateMachine<フロー名flow name>" となります。].インポート後のステートの名前は、シーンとしてインポートされたFigmaアイテムと同名になります。After import, names of states will be the same as the Figma items that were imported as scenes.
Figmaのフローの開始点に設定されているステートから起動します。Transitions will begin from the state that is set to be the Flow Starting Point.
複数のフローを複数のステートマシンとしてインポートすることができます。Multiple Flows can be imported as multiple state machines.
フロー内に含まれる遷移が、別のフローにも含まれている場合（重複している場合）、別のフローはインポートされません。Should a transition in one Flow be included in a separate Flow (ie. when a transition is duplicated), the separate Flow will not be imported.
Figmaでは、画面遷移のトリガーとなるインタラクションを選択することができますが（クリック、ドラッグ、マウスオーバーなど）、どのインタラクションを設定しても、SmartAlthough Importerでインポートした場合、in Figma the type of interaction that triggers a transition can be selected (click, drag, mouse hover, etc.), Scene Composerにおいて画面遷移のトリガーとなるTransitionのプロパティは、Composer will upon import set these transition triggers in the following way: Event = "Clicked"、, Condition = "Check Click" に設定されます。.