メインコンテンツにスキップ
Figma to STUDIO

プラグインを使ってFigmaのデザインをSTUDIOへインポートする

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

Figma to STUDIOとは

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

Figma to STUDIO プラグインの機能

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

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

デザインインポート

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

自動レスポンシブ設定

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

フォントの自動追加

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

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

画像の自動アップロード

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

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

使用カラーをSTUDIOカラーパレットへ追加登録

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

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

プラグイン利用時のTips

画像やイラストのインポート

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

インポートで崩れる場合

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

  1. より小さなレイヤー単位でインポートする。 レイヤー数が多いと変換がうまくいかない場合があります。より小さなレイヤーごとにインポートをお試しください。

  2. Figma上のデザインに Auto Layout を設定する。 Auto Layout が設定されているデザインをインポートする方が、設定がない場合に比べ精度が高いです。未設定の場合は、設定後に再度インポートをお試しください。

利用方法

プラグインのインストール

インストール方法は2通りあります。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)でペーストします。

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

こちらの回答で解決しましたか?