サイト制作フローが単純化！ツール間連携機能「Figma to Studio」をリリース！

Figmaで作成したデザインをワンクリックでインポート、あとはSTUDIOで公開するだけ。サイト制作のフローをシンプルにし、効率化をサポートする待望の新機能をリリースしました。STUDIO上で1からサイトを実装する手順がなくなる事で、クリエイティブにかける時間を最大化し、創造性を加速させる体験をご提供します。

ボックスレイアウトへの変換、レスポンシブ対応を自動で

プラグインを起動し、フレームを選択するだけで、作成したデザインデータをボックスレイアウトに自動で変換します。Auto Layoutは未設定であっても変換ができ、設定されている場合は精度高くインポートされます。プラグイン上ではPC・Tablet・Mobile画面での見え方が確認でき、自動レスポンシブ設定のON / OFF切り替えが可能です。

画像やフォントのアップロードは不要、自動的にプロジェクトに追加

Figmaでデザインに使用していた画像は自動的にデザインエディターへアップロードされます。また、Figmaで利用していたGoogleフォントもSTUDIOにラインナップされているものは、自動でプロジェクトに追加されるため完璧にデザインをコピーできます。

Figma上で「Figma to STUDIO」のプラグインをダウンロードすれば準備はOK。プラグインを起動し、レイヤーを選択すればコピーボタンをクリック。STUDIOに移動してエディター画面で貼り付けると、インポートが始まります。

ページを丸ごとコピーする場合、フレーム名の冒頭に「/（スラッシュ）」をつけると、それがページとして認識され、STUDIOにインポートした際に新規ページが作成されます。また、一度に複数ページのデザインをインポートする場合、プラグイン上でプロジェクトの新規作成ができます。

プラグインのダウンロードはこちらから

Figma to STUDIO – Figma

詳しい使い方や仕様はヘルプ記事をご覧ください。

Figma to STUDIO | STUDIO U

STUDIOでは、公式X(Twitter) のフォローや STUDIO Community Japan にて新機能リリースや使い方を公開しています。是非ご参加ください。