FigmaのデータをStudioにインポートする

FigmaのデータをStudioにインポートするプラグイン「Figma to Studio」の使い方を紹介します。

Figmaにプラグインをインストール

Figmaに「Figma to Studio」プラグインをインストールします。

1. ツール「アクション」を選択します。
2. 「Figma to Studio」で検索します。
3. 「プラグインとウィジェット」を選択します。
4. 「Figma to Studio」をクリックします。

5. 実行をクリックします。

6. 「Studioでログイン」をクリックします。

7. Studioにログインします。

8. Figmaに戻ります。

10. Studioに持っていきたいパーツを選択します。
11. 「クリップボードにコピー」をクリックします。

12. StudioでFigmaのパーツをインポートするプロジェクトを選択します。

13. インポート前にカラーを変更することができます。
14. 「デザインをインポート」をクリックします。

15. FigmaのパーツがStudioにインポートされます。

FigmaからStudioにパーツを移動する時の注意点

レイヤー構造をシンプルにする

多階層に渡る複雑なデザインは、Studio側でレイアウトが崩れたり処理できないことがあります。Studioに持っていく場合はシンプルなレイヤー構造にしておきましょう。

パーツごとにコピーする

Figmaでページ全体をコピーすると処理しきれないことがあります。パーツ単位でコピーして移動しましょう。

オートレイアウトを活用する

Figmaでオートレイアウトを設定しておくとStudioでもボックス情報が引き継がれます。