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

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

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

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

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

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

%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F880025205%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E

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

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

Figma to STUDIO – Figma

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

Figma to STUDIO | STUDIO U

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