Figma to Studioとは

専用プラグインの「Figma to Studio」を使い、Figma で作成したデザインデータをStudioエディタにインポートできます。デザインデータはインポートの際、自動でボックスレイアウトへ変換されます。つまり、デザインが自動でWebサイトへ変換され、インポート後すぐにStudioサイトとして公開できる状態になります。

プラグインを起動してFigma上でフレームやレイヤーを選択すれば、選択した単位でStudioにインポートできます。また、ベータ版として提供している「ページモード（Beta）」機能を使えば、Studioでプロジェクトが新規作成され、複数ページのデザインがそのプロジェクトに一括でインポートされます。

Figma上のデザインをセクションごとにインポートしたり、サイトの全ページを一括インポートするなど用途によって利用方法が選べます。

Figma上で作成したデザインは、 Auto Layout の設定がない場合でもインポート可能です。なお、Auto Layout を設定したデザインデータのインポートは、設定していない場合に比べて精度が高くなります。

インポートするデザインデータはPCサイズを前提としていますが、「自動レスポンシブ設定」機能を活用すればインポート後の調整の手間が省けます。もちろん、機能をオフにしてStudio上で手動でレスポンシブ設定を行うこともできます。

テキストはフォントサイズ、行間、文字間隔、フォントファミリーがStudioへインポートされます。使用されているフォントがStudioで利用可能な場合、インポート時に自動的にフォントリストへ追加され、テキストに適用されます。Stuiodで利用できないフォントの場合は、デフォルトフォント（プロジェクトのフォントリストで一番上にあるフォント）が適用されます。

また、テキストボックス内に複数のスタイルが混ざっている場合は、Studioのリッチテキストボックスとしてインポートされます。

インポートを行った際、画像データはStudioヘ自動でアップロードされます。Figma上のレイヤー名先頭に<img>を追加すれば、レイヤーを指定して画像としてアップロードできます。

またマスクで切り取ったり、画像自体をトリミングした場合、切り取り後の状態が画像としてStudioにアップロードされます。

インポートデータをStudioエディタへペーストする際、プレビューが確認できます。このプレビュー画面では、使用カラーを「+」ボタンをクリックしてStudioカラーパレットへ追加できます。

カラーパレットへの追加は必須でありません。追加せずともインポートは可能ですので、必要に応じて追加してください。また、プレビュー上で色の変更も可能です。

単一の画像やイラスト、レイヤー数の多いベクター画像は、インポート前にFigma上のレイヤー名先頭に <img>を追加しましょう。こうすることにより、プラグインがそのレイヤーを画像として認識し、図形のみのレイヤーはSVG形式、1つでも画像データを含むレイヤーはPNG形式でStudioにアップロードされます。

インポート時に変換がうまくいかない場合、崩れることがあります。その場合は大きく分けて２つの方法でインポートの精度が向上する可能性があります。

インストール方法は２通りあります。1つ目の方法は、プラグインページ へアクセスし「使ってみる」をクリック。自動的にFigmaに移動しインストールが開始します。

2つ目の方法はFigmaへログインし、リソースアイコンをクリック後「Figma to Studio」で検索。「実行」をクリックします。

インストールが完了すると、試験利用に使えるFigmaのサンプルファイルが展開します。プラグインを利用するには、Studioアカウントへログインする必要があります。アカウント作成がまだの場合は先にアカウントを作成してください。

プラグインを起動しStudioアカウントへログインします。コピーしたいレイヤーかフレームを選択します。

プレビュー画面でレスポンシブ状態を確認したり、自動レスポンシブ変換のオン・オフの切り替え設定ができます。

確認後は「クリップボードへコピー」をクリックし、Studioエディタへ移動。ページ上でペースト（Macでは、⌘ + V、Windowsでは Ctrl + V ）すると、コピーした要素が現在選択しているページにインポートされます。

ページモード（Beta）を使えば、複数のフレームを一括でStudioへインポートしプロジェクトが作成できます。

インポート対象のフレームに「/」から始まる名称をつけると、プラグインがそれらフレームをページとして認識します。Figmaのプロトタイプタブでリンクの設定を行えば、その設定もStudioへインポートされます。

「/」で始まる名前のフレームを用意し、プラグインを起動します。

プラグイン画面の「ページモード（Beta）」をクリックすると、取得されたフレームがページとして表示されます。プレビュー画面でレスポンシブ状態を確認したり、自動レスポンシブ変換のオン・オフの切り替え行います。

確認後は「新規プロジェクト作成」をクリック。プロジェクト作成中のローディングが表示され、作成が完了するとブラウザのStudioプロジェクトへ遷移します。プロジェクト名はFigmaのページ名をそのまま利用され、必要に応じて後から変更が可能です。

インポート時に崩れが発生した際は、レポートを利用して報告していただけると幸いです。送信されたデータはプラグインの改善目的にのみ使用し、外部に公開されることはありません。

※プラグイン自体が動作しないなど、プラグインやStudioアプリ自体の不具合が疑われる場合は、Studioチャットサポートへお問い合わせください。

サポート窓口の使い方

プラグインを起動し左上のメニューをクリックし、「問題をレポート」を選択します。報告したいレイヤーやフレームを選択し、⌘+C（Windows：Ctrl+C）でコピーします。

プラグインの「2. 貼り付け」に⌘+V（Windows：Ctrl+V）でペーストします。

報告したい内容の詳細を記入し、送信をクリックします。