Smart Importer

• Smart Importer UI
• Basic Operations
• Smart Importer UseCase
• Recommended Layers Structure for Smart Importer
• Axure RP Importing example
• Adobe XD Importing
• Figma
• The example file of Figma

Smart Importer UI

This page describes the Smart Importer dialog. The Smart Importer dialog consists of the following four parts.

1. Preview
2. Import
3. Layer Tree
4. Control

Preview

Here you will see a preview of the file to be imported. Use the mouse wheel to zoom in and out of the preview image. The zoom factor of the preview is displayed in the lower left corner of the preview section. Pressing the button with the four arrows will preview the file at the maximum zoom factor within the display area of the preview area.

Select an element on the preview image, then AI detection will be performed on the selected element and the controls will be listed in the Control section.

Import

The import section consists of two tabs, [ Import Settings ] and [ AI Settings ].

Import Settings Tab

The Import Settings tab contains the following settings.

Import to folder	Select a destination folder for the imported resources. The selection can be any location on the Solution Explorer. To change the destination folder, use the pull-down menu. To create a new destination folder, use the next section [ Create new folder for import ].
Create new folder for import	When this option is enabled, a new import folder can be created with any name. The created folder will be located in the import destination folder specified in [ Import to folder ].
Scenes	You can edit scenes with the Smart Importer. Please click here to learn how to use it.
Toggle Applied Controls Preview	When this option is enabled, a green frame will appear where the control is applied. This allows you to visually check where the control is applied on the preview.
Resize Display Resolution	This option is enabled when the resolution of the file to be imported is larger than the solution's display resolution. When this option is enabled, the resolution of the imported file will be automatically resized to fit the display resolution.
Import State Machine	When this option is enabled, import state machines from your design file directly to your CGI Studio solution. If a global state machine already exists within your solution, a prompt will be displayed in which you can choose whether or not to import the new state machines with the Is Global property enabled.

AI Settings Tab

Settings for AI detection are made here.

The value specified in the Preference is used for [ Edge Detection ]. For details, please refer to that.

The colour selected under [ Transparent background color ] is used by AI to analyse the image being imported. Which transparent background colour is best for detecting controls depends greatly on the content of the image. If you are having problems with AI detecting controls, try changing this setting.

Layer Tree

Displays a tree view of each element from the file being imported. The list displayed here corresponds to the scene tree in Scene Composer. When one or more elements are selected in this list, AI detection is performed on the selected elements and the controls are listed in the Control section.

Entering any keywords in the search field at the top of the Layer Tree will narrow down the list to only those layers that contain the entered keywords.

Check the checkbox to the left of each layer element to set it as an element that constitutes a scene. Unchecked elements will not be imported.

Revert/Revert All button

To cancel the applied control settings, select the target item in the Layer Tree panel and press the [ Revert ] button. Note that pressing the [ Revert All ] button cancels all applied control settings in the layer tree. When the [ Revert All ] button is pressed, a dialog box will appear to confirm the continuation of the operation for safety.

Control

Control List Tab

Select any layer in the Layer Tree and the AI will detect the most suitable controls. The results of this analysis are displayed in the "Control List" tab, where candidate controls are listed in order of probability.

The controls are categorised by solution and reference (such as ConstructionKit and Custom Controls).

• For controls in ConstructionKit, the probability of matching with the AI is displayed as a number (and bar) to the right of the control name, and they are listed in descending order from the highest number.
  • For Custom controls that are not included in ConstructionKit, they are displayed in order of control name.
• By default, five controls are displayed in each category. Clicking the [ View All ] button (red box in the image below) will display a list of all controls.
  
• The list of controls that is displayed can be narrowed down by entering keywords in the search field at the top (orange box in the image below).
• To apply the controls to the selected element, use the [ Apply ] button in the control list.

The displayed control list can be narrowed down by entering keywords in the search field at the top. In addition, using the settings section that appears by clicking the triangle icon on the left side of the search field, you can configure the display settings of the controls that appear according to the detection value.

To apply a control to a selected element, use the "Apply" button in the control list. When applying a control with a low probability of AI detection result, a dialog box will appear to confirm your selection.

Appearance Tab

When any control is applied, the display automatically switches to the "Appearance" tab. Set the propertyies settings related to the applied control's appearance. Note that some controls such as TextValue do not require appearance settings.

The Appearance tab is made up of the following three main sections.

1. Image
2. Pivot Point
3. 9-Patch

Image

For each control image properties, set the layer image in the file to be imported. If the control image properties name and the layer name are equal, the layer image is automatically set. However, you cannot edit the image layer.

For example, when Gauge control is applied, the Control Image has a NeedleImage property. Therefore, if NeedleImage exists in the layer name of the file to be imported, it is automatically set to the NeedleImage property.

When you assign a control to a group player, you can choose from the following options for the control image.

Select layers	Select any image layer from the group layer. You can use composite images with multiple layers. For more information, please refer to here. After importing, the composite image will be placed in the [ ControlBitmaps ] folder. At this time, the bitmap name will be set to the property name specified here. If you select a single layer, the original bitmap placed in the [ Bitmaps ] folder will be used. For information on the location of the folder, please refer to Folder structure after import.
Transparent	A transparent image will be used.
Default value	Uses the default image for the applied control.

You can select images included in the group player by clicking on the selection icon on the right of the image.

• You can select the images of the descendant layers and yourself as property values.
• You cannot select layers other than images (except for bitmap layers to which controls have been applied).
• After selecting, the pivot point is set to the centre of the composite image.

For each control image properties, set the layer image in the file to be imported. If the control image properties name and the layer name are equal, the layer image is automatically set.

Image Array Properties

Image array properties is supported, and for example, images in FlipBook control are automatically assigned. The numbers attached to each Image element on the Appearance tab correspond to the values displayed in descending order in the layer tree.

Folder structure after import

After import, the [ Bitmaps ], [ ControlBitmaps ], and [ TextStyles ] folders are created in the Solution Explorer.

Bitmaps	The imported bitmap for each layer is placed.
ControlBitmaps	The bitmap composed of multiple layers is placed for the control properties.
ImportedScenes	The scene imported as a template will be placed.
Scenes	When you import a StateMachine (screen transition), the target scene will be placed.
TextStyles	The created text style is placed.

Pivot Point

When set-up a control image with layer mapping, the pivot point is automatically set. The pivot point values set automatically are as follows. (However, if the pivot point values are specified with the layer names mentioned later, the specified values will be used as the set values.)

• Pivot point X value: 0
  
• Pivot point Y value: 0

In addition, by checking the Pivot Point check box (No.1 below image), the following options can be used

• Can be enter any values for the X/Y coordinates of the pivot point (decimal points can be entered).
• Set the pivot point to the centre of the image (click on No.2 the above image).
• The Freehand dialog box will appear (click on No.3 the above image). Move the crosshair cursor on the dialog box to set the pivot point as you want.
• The background color of the [ Freehand ] dialog can be set to black or gray from [ Background Color ] in the lower right corner of the dialog (highlighted in the orange box in the figure below). Additionally, the default background color can be configured in Preferences>Smart Importer.
  
• 
  
  

On the other hand, you can apply any pivot point value by specifying the pivot point value in the layer name of the image to be imported.

• If the layer name in the target file to be imported is something like "***@X10@Y20", the pivot point values are automatically set as X10 and Y20.
  
• If the layer name in the file to be imported is "***@X10.5", the pivot point value is automatically set as X10.5 and Y as ”0".

9-patch

This option appears when the "Enable editing 9-patch" option is enabled in the Preferences>Smart Importer settings. When enabled, the 9-patch feature can be configured (input values must be positive numbers only).

Basic Properties Tab

This section allows you to set some properties items for the applied control. After importing, you can also select the target control and configure it on the properties panel.

If the layer name is the same as the control's property name, the individual properties are automatically mapped from the file to be imported.

Basic Operations

This section describes the basic operations on the Smart Importer.

Import File Formats

The Smart Importer uses the following two methods for import, depending on the file format to be imported.

• Local files: *.psd, *.xscil, *.xd, *.rp, *.sketch
  
• Cloud Resource: Figma data
  

For more information on Photoshop layer structure format, see Recommended Layers Structure for Smart Importer.

Restore Settings

The settings that were applied when the import was performed are saved in the solution along with the imported scene. Therefore, when importing the same file again and importing to the same path in the Solution Explorer, the Smart Importer will display a dialog asking if you want to use the saved settings.

Use	Saved settings are applied.
Merge	Merges both saved and new settings.
Don't use	No saved settings are applied and new settings are made.

If an image has been replaced in an imported file, the old image in the scene can be replaced with a new, updated image while maintaining the previous mapping between layers and controls by using [ Use ].

For other behaviors when reimporting files, see here.

Conversion to 2D Nodes

During import, specific elements (artboards/color pickers, in Photoshop) in the file to be imported are converted to optimal nodes in Scene Composer.

Artboards	Artboards in the file to be imported can be treated as a Group Node in Smart Importer.
Color Picker	Color pickers in the file to be imported can be treated as Solid Color Nodes. In this case, the solid color layer will use the same icon as the Solid Color Node in Smart Importer.

Under any of the following conditions, the Appearance tab cannot be edited.

• The layer of the file to be imported does not have image information.
• The applied control does not have a properties that refers to an image.

Other than the above, the same options are available as for image layers. For example, the Layer Mapping section can generate image resources once (Control) properties are mapped to a layer. Similarly, other prototyping tools will do the same with color pickers.

For each node in a 2D scene, see here.

Control instance configured with Smart Importer

After finished applying the detected controls and configuring images, pivot points, and other properties, click the [ OK ] button at the bottom of the Smart Importer dialog to import the configured file.

See the Smart Importer UI for details on what to configure in each part of the Smart Importer dialog.

It will be imported to the location specified in the Import Settings Tab, with the configured settings. Note that the control instance configured in Smart Importer (e.g., "Gauge left" in the image below) can be viewed in the Import panel.

Control instances configured in Smart Importer can be used in the scene editor or by dragging them into the scene tree.

Configure Scenes

The Import Settings tab allows you to manage scenes to be imported into Scene Composer. After selecting a target scene from the [ Scenes: ], open the context menu to see the following options

Add Scene	Add a new scene. Note that all checks for each element displayed in the layer tree will be unchecked. After the operation, the [ Add Scene... ] dialog box will appear, and enter a name for the new scene.
Clone Scene	The scene will be duplicated maintaining the configuration on the current layer tree. After the operation, the [ Add Scene... ] dialog box will appear, and enter a name for the new scene.
Remove Scene	Deletes the selected scene.
Rename Scene	Rename the scene. Can also change the name by double-clicking the target scene name.

TextStyle

When importing a Text Layer into Scene Composer, a new TextStyle is created. Its name will be a combination of the font name and the font size used in the Text Layer of the PSD file. Upon creation of a new TextStyle Scene Composer checks if a font resource with the corresponding name is registered in the Scene Composer solution. If the appropriate font resources cannot be found in the solution, a dialog box like the below will be displayed.

If the font does not exist in the solution, you can use an existing font resource by specifying an alternative font on this dialog.

Text and text-containing controls

The bounding rectangle (width/height) of text and controls containing text are imported as automatic values.

Global State Machine

State Machine elements are all imported as Global State Machine (confirmation dialog is not displayed).

Smart Importer UseCase

This section describes various use cases for Smart Importer operations.

Configure Scene Contents

Using the example of importing an image file consisting of two scenes, an IVI scene (e.g., music player and climate control) and a cluster scene, explains how to configure the contents.

• IVI_Sample layer: IVI scene consisting of a music player and air conditioning controls
  
• Cluster layer: A scene consisting of clusters only

If the import file name "IVI_Scene" consists of the above two layers, the two scenes can hold different contents (elements) by performing the following operations.

1. Select [ IVI_Scene ] from [ Scenes: ] and select [ Clone Scene... ] from the context menu.
   
   • In the [ Clone Scene... ] dialog box, specify "Cluster_Scene" as the name and press [ OK ].
     
   • Two scenes, "IVI_Scene" and "Cluster_Scene" will appear in the [ Scenes: ] section.
     
     

2. Select [ IVI_Scene ] from [ Scenes: ] and uncheck [ Cluster ] from within the layer tree.
   

   • The Cluster layer will be excluded from the IVI_Scene scene structure.
     

     

     
     

3. Select [ Cluster_Scene ] from [ Scenes: ] and uncheck [ IVI_Sample ] in the layer tree.
   

   • The IVI_Sample layer will be excluded from the Cluster_Scene scene configuration.

     

      

4. Press the [ OK ] button in the Smart Importer dialog to perform the import.
   

   • You can see the imported scenes and resources in the Solution Explorer panel.
     

   • Scenes IVI_Scene and Cluster_Scene do not contain the layers specified in steps 2-3, respectively.
     

     

Re-importing a file containing new images

If you reopen a file that has already been imported (same file name and same path where the file was saved) using [ Restore ], the saved settings (including applied controls and appearance settings) will be loaded. If the destination folder or scene already exists, you will be notified by blue information icons (in the orange box below). Hovering over these icons will display the necessary information in a tooltip. Running the import with the current settings will overwrite already imported resources and scenes, thus keeping the Layer Mapping settings and applied controls information and updating the images in the Scene Composer solution to the latest image.

If you want to import image content into the Scene Composer solution a second time, keeping the resources and scenes from both imports, select a different import location or a different scene name.

Re-importing a file containing images with different layers

If you import a file that has already been imported (same destination path, same file name), but has a partially different layer structure, it will appear as follows on the layer tree of the Smart Importer dialog.

Added/modified group layers	An orange icon will be added to the Group Node icon. Through this symbol, you can visually identify groups that have been modified since the last import (see orange frame in the image below).
Control Assigned Bitmap	If a bitmap of a node to which a control has already been assigned is used within another control, it will be displayed in yellow font.
Newly added layer	Newly added layers are displayed in green font (see green frame in the image below). Note that this layer will not appear in the [ Preview ] because the check box in the [ Layer Tree ] is disabled. Check the checkbox to make it appear in the [ Preview ].
Deleted Layer	Layers that existed in the previous file to be imported and do not exist in the current file to be imported are displayed in red font (see the red frame in the image below). Also, the checkboxes in the Layer Tree panel are disabled. Since these layers are not included in the current import file, they will not be displayed in the [ Preview ] even if they are checked in the [ Layer Tree ].

Merging multiple scene settings

The settings when applied during the import run are saved in the solution along with the imported scene. This allows you to import various configurations into the solution using a single import target file, and eventually merge them into a single configuration. The following is an example of such a setup procedure.

Creating Multiple Configurations

This section uses an example of import using the Car_Cluster.psd file stored in the following location. Note that the "New SPI configuration was found" dialog will not be displayed during each import operation because the folder specified as the import destination is different.

<root>\cgi_studio_content\2D\PSD

1. Open the Car_Cluster file in the Smart Importer and configure the Telltale control. Then, under [ Import to Folder ], specify the "/Resources/Cluster_Telltales" folder as the import destination and perform the import.
   • See "1. TellTale Settings" in the image below.
     
     

2. Re-open the same image file in the Smart Importer, this time setting the Gauge control. Specify "/Resources/Cluster_Gauge" folder as the import destination and perform the import.

   • See "2. Gauge Settings" in the image below.

     
     

3. In the same way, set the ProgressBar control. Specify "/Resources/Cluster_ProgressBar" folder as the import destination and perform the import.

   • See "3. ProgressBar Settings" in the image below.

Merge of multiple scene configurations

1. Open the Car_Cluster file in the Smart Importer.
   
   
2. Specify "/Resources/Cluster_Telltales" in the [ Import into folder ] and uncheck the [ Create new folder for import ] checkbox.
   
   • At this point, the Smart Importer dialog will appear. Select [ Use ] and then click [ OK ] to restore and apply the Telltale control settings.
   • A blue caution icon will appear in [ Scenes: ].
     
     
     
     
3. Next, change the import destination to "/Resources/Cluster_Gauge".
   
   • A dialog box similar to the one below will appear, so select [ Merge ] and then click [ OK ].
     
   • As a result, the configured Gauge control will be added to the previously configured Telltale control.
     
     
     
     
4. Similarly, change the import destination to "/Resources/Cluster_ProgressBar".
   
   • As in step 3, a dialog box similar to the one shown below will appear, so select [ Merge ] and then click [ OK ].
     
   • As a result, the configured ProgressBar control will be added.
     
     

The above operation results in a configuration with TellTale control, Gauge control, and ProgressBar control applied.

Configure a control image with multiple layers

It is possible that the image file you are importing is so complex that the Gauge background and needles are made up of multiple images for example. However, the Gauge control in Scene Composer requires only one image for the background and one for the needle. In order to balance complex image configurations and control settings, the Smart Importer allows multiple layers for each image used in the control.

The Car_Cluster.psd file is used as an example.

The image below shows the layer tree of the imported "Car_Cluster.psd" file in Smart Importer. The orange framed layer contains the Gauge needle and the blue framed layer contains the background.

To apply Gauge control, select the root layer of the target layer group on the [ Layer Tree ]. In the above image, "Gauge Left" is the root layer. In the [ Control List ] Tab, the results of automatic control detection by the AI will be listed. Press [ Apply ] button of "Gauge" control from the list and assign "Gauge" control to the layer group "Gauge Left".

By selecting the root layer to which the control is applied, the entire layer group can be set. Child layers will be set in the same way.

To select multiple layers and set them all at once, hold down the <ctrl> key or <shift> key and click on the target layer with the mouse, or click and drag around the layer you wish to select.

After applying the control, in the [ Layer Mapping ] section of the [ Appearance ] Tab, the child layer images in the layer group are set as "NeedleImage" and "Background" images to be used as images for the Gauge control. In the case of Car_Cluster.psd file, the NeedleImage property is automatically set because the layer name of the file to be imported contains NeedleImage.

In the Car_Cluster.psd file, there are multiple layers as the background image. Thus, select [ Select layers ] from the [ BackgroundImage ] pull-down menu.

The [ ImageLayers Selection ] dialog box will appear, so select the layer you want to apply to [ BackgroundImage ].

After the Smart Importer import is executed, an image will be created in which the specified layers are merged into the "Background" where multiple layers existed. The merged image can be viewed by double-clicking on it in the Solution Explorer to open the Image Preview window.

As shown above, bitmaps merged from multiple layers for control properties are placed in the [ ControlBitmaps ] folder in the Solution Explorer.

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.

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.

Axure RP Importing example

In this section, explain how to import Axure RP file format using Smart Importer.

You can get the Axure RP file described below at the following location.

"...\cgi-studio-root\cgi_studio_content\Resources\AxureRP\AxureTest.rp"

---

How to import

1. In SceneComposer, open a solution file, and select Import > Smart Importer from the main menu. And select your import target file (.xscil, .xd, .rp and .sketch).
   
   
   
   
   • In case a font used in the Axure file was not imported to Scene Composer, a pop-up message will appear. Click OK to proceed a default font will be used in such a case.
   • Click on the items in layer tree and check the detected controls you want to assign to each in the Controls List. For this sample, the detected controls don’t need any manual assignment.
     
     

2. Click Scene 2 under “Scenes” on the lef side to show page 2.
   

   

   
   

3. Set the desired Import settings. Click OK.
   

   

   
   

4. Run in CGI Player. When the button is clicked, the scene should display page 2.

   

Adobe XD Importing

Description

In this section, explain about Adobe XD file format, its layer structure and naming part and the importing example by using the concrete sample file.

---

Layer Structure and Naming Guideline

As same as PSD file format, the SmartImporter's AI will analyze imported files to detect/propose and create Controls for the solution. Thus, again recommended to keep Adobe XD layer format close to the standard Controls in Scene Composer. That naming guideline is as same as PSD, please refer to the Recommended Layers Structure for Smart Importer in detail. 

Additional naming conventions exist for efficient import of AdobeXD files, such as the below.

Control: Text

Text layer will be set as Text Control as same as AxureRP and Sketch.

Control: Tell Tale

The layer group name has a suffix of "_telltale" and has a child image layer will be set as Tell Tale Control.

Control: TextButton

The layer that has either the below condition will be set as TextButton Control. There is a child text layter in a group layer. A Text layer, that name has a suffix of "_Button".

AdobeXD Features Supported by CGI Studio Smart Importer

The Smart Importer supports importing of following Adobe XD features:

Artboards

Each AdobeXD Artboard is converted into a Scene in SceneComposer.

Components

Adobe XD has a component system, where components can be defined once, and instantiated multiple times. If an artboard references a component, the Adobe XD converter looks up and instantiates components as needed.

Texts

Adobe XD text areas are converted into Text Nodes in SceneComposer.

The Smart Importer will read the configuration of the AdobeXD text and apply the following properties to the SceneComposer Text Node:

Please also see section Text Controls of the Adobe XD import example.

Images

Adobe XD shapes ("type": "shape") with a pattern fill (a fill of "type": "solid") are converted to RenderNodes.

The Smart Importer will apply the following properties to the SceneComposer RenderNode:

Solid Rectangles

Rectangles (shapes of "type": "rect") with a solid fill (a fill of "type": "solid") are converted to SolidColorNodes.

The following properties will be applied to the SceneComposer SolidColorNode:

Please also see section Rectangle of the Adobe XD import example.

Buttons

If the Adobe XD resource contains a group, the name of which ends with _Button, the Smart Importer will create a TextButton.

The Smart Importer will apply the following properties to the SceneComposer TextButton:

Transitions

Adobe XD supports building interactive prototypes with serveral kinds of transitions. A button may trigger a navigation transition to a different artboard, a component may support transitions between different states etc. SceneComposer supports button-triggered scene transitions generated from artboard transitions in the XD file.

Please also see section Transition of the Adobe XD import example.

TellTales

Smart Importer creates a TellTale Control for an Adobe XD group, whose name ends with _TellTale. If this group contains an image with OnState or OffState in its name, this image will be set as the TellTale Control's On State Image or Off State Image respectively.

Please also see section Tell Tale Control of the Adobe XD import example.

---

Adobe XD import example

Please get the mentioned sample Adobe XD file in the below location.

Using this sample, explain about the layer structure and restrictions for Adobe XD.

"...\cgi_studio_content\2D\XD\XD_SampleCluster.xd"

Rectangle

Though there is a polygon in the group "Next_Button" of the sample, that isn't imported into a Solution in Scene Composer. This is because a rectangle shape is only supported for importing.

Text Controls

Text layer will be set as Text Control as same as other file format. In this sample, the following layer are text layers.

Tell Tale Control

Since there is "TellTale" group in the sample file and that group name has a suffix of "_telltale", its child image layers are set as Tell Tale Control.

Transition

The transition setting that is created by Adobe XD is transferred to State Machine editor.

Other options

If necessary, please change the setting on "Import to folder" and its related options. And, mark "Resize Display Resolution" option just in case.

Perform Player

After set the above, press OK button on Smart Importer dialog to proceeding import. Then, press "Play" button with "Generate and Play" option. Player application is run, and uncheck "Scenes#Scene2D" section and then you could get the importing result. If you press "change view" button in the right bottom corner, you can make transition to the other scene accordingly to the transition in Adobe XD.

Figma

Smart Importer can import Figma data. This page explains how to to import Figma data with Smart Importer and how to work with the results. 

Please note that you cannot import Figma data for which you do not have editing privileges.

---

Preparations for Importing Figma Data

Software Environment

The following software is needed in order to perform Figma data imports with Smart Importer:

　Node.js (Supported versions: Only 18.x.x and 19.x.x)

Preparing the URL/Access Token

In order to perform Figma data imports with Smart Importer, a URL and Access Token that corresponds with the Figma Data needs to be acquired in advance. 

The URL and Access Token can be acquired using the Figma desktop application as below.

Please ensure you have access to the Figma REST API (https://api.figma.com). In case of connectivity issue, please contact your IT as it might be blocked by a firewall.

Acquiring the 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

1. In the Figma desktop app, select [ Figma Icon > Help and Account > Account Settings ] to open the dialog.
   
   
   
   
2. In the Security tab of the dialog, click [ Generate new token ] under Personal access tokens.
   
   
   
   
3. In the "Generate new token" dialog, set the Token name, Expiration, and Scopes, and then click [ Generate token ].
   
   
   
   
4. The created access token will be displayed under Personal access tokens on the Security tab of the dialog.
   
   

The instructions on how to obtain the URL and access token are for Figma Desktop App version 125.10.8.

---

How to Import Figma Data

1. From the Scene Composer toolbar select [Import] > [Smart Importer] > [From Cloud Resource...], and a new dialog panel titled [Import from cloud resource] will be displayed. 

2. Enter the URL and Access Token in the respective fields and click [OK]. Please refer to「Preparing the URL/Access Token」 for acquiring the URL and Access Token. 

3. The Smart Importer dialog panel will open. Operating Smart 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], the data will be imported into the folder designated in [Import to folder: ].

If the URL or Access Token entered in the "Import from cloud resource" dialog is incorrect (or inappropriate), the import will be interrupted, and the following error dialog will appear.

API access limits vary depending on your subscription plan. Therefore, if that limit is exceeded, the import will be interrupted and the following error dialog will be displayed. Please check Figma’s official website for details on each plan.

---

Importing Figma Data - Advanced

Importing as a scene

The topmost item of each page included in the Figma data will be imported into Smart Importer as a scene. For this, use the following naming convention: <Page name>_<Parent item name>

Relationship between Figma items and Scene Composer Nodes 

When importing Figma items with Smart Importer, each item will be imported as a specific type of node, as seen in the table below.

		Scene Composer node type
		Group	Bitmap	Text
Figma item type	Component	✓
	ComponentSet	✓
	Ellipse		✓
	Frame	✓
	Group	✓
	Instance	✓
	Line		✓
	Polygon		✓
	Rectangle		✓
	Section	✓
	Slice		✓
	Star		✓
	Text			✓
	Vector		✓

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

It is possible with Smart 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

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.

This functionality is only supported with Touchable and Common controls.

Importing as bitmaps

Smart 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

Flows (transitions) in Figma are imported as state machines. 

• After import, the flow name will be prefixed with [StateMachine<flow name>].
  
• After import, names of states will be the same as the Figma items that were imported as scenes. 
  

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

Although in Figma the type of interaction that triggers a transition can be selected (click, drag, mouse hover, etc.), Scene Composer will upon import set these transition triggers in the following way: Event = "Clicked", Condition = "Check Click".

---

Importing a Layout

Auto layout

If a Figma Frame has an "Auto layout" set, it will be imported as a "Stack Layout" in Scene Composer, and each setting value of the Auto layout will be inherited as a Stack Layout property.

Figma Auto layout settings are inherited as properties of the Stack Layout of Scene Composer:

	Auto layout （Figma）	Stack Layout propertise （Scene Coposer）
1	Direction	Stack Layout [ Layouter > Arrangement ]
	Direction Arrangement Vertical layout Vertical Horizontal layout Horizontal Wrap
2	Gap	The node that is placed second or later in the Stack Layout  [Layout > Margin > Left or Top ]
	Direction Margin Vertical layout Top Horizontal layout Left Wrap
3	Alignment	Nodes included in a Stack Layout [ Layout > VerticalAlignment and HorizontalAlignment ]
4	Padding (Horizontal)	The node to be placed at the leftmost position of the Stack Layout [ Layout > Margin > Left ]
5	Padding (Vertical)	The node to be placed at the most top of the Stack Layout [ Layout > Margin > Top ]

Below is an example of Auto layout (horizontal) from Figma imported into Scene Composer.

Text Layout

When Figma text layer is imported in Scene Composer, a Group node with LayoutType "Overlay" is created, and a text node is created under it. 

Also, the Typography Alignment of the text layer from Figma is inherited as a layout property of the text node in Scene Composer.

---

The example file of Figma

This section describes how to use the instrument cluster as a Figma design file example. The example file is stored in the following location.

<root>/cgi_studio_content/2D/Figma/AI_Cluster_Sample.fig

Due to technical limitations, Figma design files cannot be opened directly in CGI Studio. For this reason, the first step is to import them into your personal Figma account.

1. Log-in your Figma account.
   
   
   
   
   
2. In your Figma account, click on "Import Files" and load the AI_Cluster_Sample.fig file.
   
   
   
   
   
3. The AI_Cluster_Sample.fig will be uploaded to your account.
   
   
   
   
   
4. After uploading, you will see AI_Cluster_Sample in the file.
   
   
   
   
   

To import this sample file using the Smart Importer, select the Import from Cloud option from the menu and follow the settings. See Figma for import instructions.