Skip to main content

Figma

Smart Importerは、Figmaデータをインポートすることができます。このページでは、Figmaデータのインポート方法やSmart Importerでインポートした場合の結果について説明します。

Figmaデータのインポートの準備

ソフトウェア環境

Smart ImporterでFigmaデータのインポートをおこなうには、次のソフトウェアのインストールが必要になります。

　Node.js（推奨バージョン：v18.16.0）

URLとアクセストークンの準備

Smart ImporterでFigmaデータのインポートをおこなうには、あらかじめインポートしたいFigmaデータのURLとアクセストークンを準備しておく必要があります。

以下は、Figmaのデスクトップアプリを用いたURLとアクセストークンの入手方法です。

URLの入手方法：
Figmaのデスクトップアプリの最上部の各ファイルのタブから、URLを入手したいファイルのタブのコンテキストメニューから [ リンクをコピー ] を選択します。

drawing-7-1685346309.png

アクセストークンの入手方法：
Figmaのデスクトップアプリのツールバーの [ Figmaアイコン ] > [ ヘルプとアカウント ] > [ アカウントの設定 ] からダイアログを開きます。

drawing-7-1685347429.png

次にダイアログで、[ アカウント ] タブの個人アクセストークンの入力欄にトークンの説明を入力し、Enterキーを押すと、アクセストークンが生成されます。

drawing-7-1685347337.png

Figmaデータのインポートの手順

1. メニューバーの [ インポート ] > [ Smart Importer ] > [ クラウドリソースから... ] を選択し、クラウドリソースからインポートダイアログを開きます。

drawing-7-1685344619.png

2. クラウドリソースからインポートダイアログのURLとアクセストークンを入力し、[ OK ] をクリックします。URLとアクセストークンの入手方法は、「URLとアクセストークンの準備」を参照してください。

drawing-7-1685347972.png

3. Smart Importerダイアログが開きます。Smart Importerダイアログの操作は、その他のファイルと同様です。詳細は、「3. Scene Composer > リソースのインポート > Smart Importer > 使用方法」を参照してください。必要な設定をおこない [ OK ] をクリックすると、[ フォルダーにインポート： ] に設定した場所にインポートされます。

drawing-7-1685348641.png

Figmaデータのインポートの詳細

シーンとしてインポート

Figmaデータに含まれるすべてのページの親アイテムは、Smart Importerではシーンとしてインポートされます。インポート時に、"<ページ名>_<親アイテム名>" と名付けられます。

drawing-7-1685531144.png
FigmaのアイテムとScene Composerのノードの関係

Figmaの各アイテムをSmart Importerでインポートした場合、次の表にしたがい、Scene Composerの特定のノードとしてインポートされます。


 Scene Composerのノードタイプ
グループ ビットマップ テキスト
Figmaのアイテムのタイプ
 Component ✓

ComponentSet ✓

Ellipse
✓
Frame ✓

Group ✓

Instance ✓

Line
✓
Polygon
✓
Rectangle
✓
Section ✓

Slice
✓
Star
✓
Text

✓
Vector
✓

ビットマップとテキストは、レンダリング情報が取得可能な場合のみインポートすることができます。例えば、Figmaアイテムが非表示に設定されている場合は、インポートすることはできません。

コントロール、または、ビットマップとしてインポート

以下の子アイテムを持つことができるFigmaアイテムは、Smart Importerでは、コントロールまたはビットマップとしてインポートすることもできます。

  • Component
  • ComponentSet
  • Frame
  • Group
  • Instance
  • Section

コントロールとしてインポート

Figmaのアイテムの名称の先頭を「SC_コントロール名」にすることで、アイテムをコントロールとしてインポートすることができます。また、子アイテムの名称を該当コントロールのプロパティの名称と同一にすることで、プロパティ値として設定することができます。

drawing-7-1685531272.png

この機能がサポートされているのは、TouchableとCommonカテゴリーに含まれるコントロールのみです。

ビットマップノードとしてインポート

ビットマップアイテムは、グループアイテムのアイテム名のプレフィックス（接頭辞）を "SC_Bmp" にすることで、子アイテムも含め、Smart Importerでは１つのビットマップノードとしてインポートできます。

drawing-7-1685531066.png
ステートマシンとしてインポート

Figmaのフロー（画面を遷移させる）は、Smart Importerではステートマシンとしてインポートされます。

  • インポート後のステートマシンの名前は、"StateMachine<フロー名>" となります。
  • インポート後のステートの名前は、シーンとしてインポートされたFigmaアイテムと同名になります。
drawing-7-1685531319.png


  • Figmaのフローの開始点に設定されているステートから起動します。
drawing-7-1685531374.png


  • 複数のフローを複数のステートマシンとしてインポートすることができます。
drawing-7-1685531417.png

フロー内に含まれる遷移が、別のフローにも含まれている場合（重複している場合）、別のフローはインポートされません。

Figmaでは、画面遷移のトリガーとなるインタラクションを選択することができますが（クリック、ドラッグ、マウスオーバーなど）、どのインタラクションを設定しても、Smart Importerでインポートした場合、Scene Composerにおいて画面遷移のトリガーとなるTransitionのプロパティは、Event = "Clicked"、Condition = "Check Click" に設定されます。

Back to top