【Webデザイン】FigmaからStudioへデザインをインポートする方法

と思われる方に役立つ記事になります。

今回はFigmaからSTUDIOへデザインをインポートする方法についてご紹介していきたいと思います。

FigmaからSTUDIOへデザインをインポートする方法

Figmaのツールバーのリソース（アクション）からプラグインでSTUDIOなどと打ち込みFigma to Studioをクリックし、STUDIOでログインをクリックします。

Googleアカウントやメールアドレス等、それぞれの方法を選択してSTUDIOにログインします。

ログインできたことを確認してFigmaのブラウザへ戻ります。

FigmaでFigma to Studioのプラグインを使用する

早速Figma to Studioのプラグインが使えるようになっていますね。

選択したフレームなどをインポートすることができます。

Figmaでインポートしたい箇所をコピーする

一度に全て選択するよりも少しずつインポートした方が成功しやすい（コピー）ので今回はヘッダーのみコピーしてインポートしていきます。

インポートしたい箇所を選択するとプラグイン（Figma to Studio）に反映されるので、そのまま下の方のクリップボードにコピーをクリックしてコピーします。

無事にコピーすることができました。

しばらく待ってもコピーできない時は大体容量が重かったです…

STUDIOで新しいプロジェクトを作成する

STUDIOで新しいプロジェクトを作ります。

STUDIOでデザインを貼り付ける

作成した新しいプロジェクトのデザインエディタを開いたらペーストします。

Figmaで作成したインポートされるデザインの確認画面がでてきます。

使用している「フォント」の種類や「カラー」などが出てきますね。

フォントはSTUDIOにあるものだと自動で追加され、カラーはクリックすることでSTUDIOのカラーパレットへと追加できます。

下部にあるデザインをインポートをクリックします。

無事にSTUDIOへとFigmaで作成したデザインを反映することができました。

Figmaでコピーできない・STUDIOでうまく反映されない時の対処法

コピーできなかったり、STUDIOのデザインエディタにうまく反映されない時は「文字揃えの設定」や「画像サイズを小さく」したり、画像のレイヤー名の先頭に<img>と記述したり「オートレイアウト」を使うことでうまくインポートできました。

全部が全部綺麗に移行は難しいかと思うので、自動レスポンシブ設定にしててもレスポンシブ設定や文字間などズレている箇所は都度STUDIOの方で作り直したり微調整してあげます。

ページモード

他には設定からページモード（Beta）を使うとフレーム名先頭に / を付けて認識させて、そのままSTUDIOの新規プロジェクトを作成することができ複数ページデザイン等を一括でインポートすることもできます。

まとめ

今回はFigmaからSTUDIOへデザインをインポートする方法についてご紹介してきました。

Figmaで作成したデザインデータを簡単にSTUDIOへとインポートすることができてとても便利な機能ですよね。

デザインパーツなども楽々インポートできるので重宝しています。

少しでも参考になりましたら幸いです。

【Webデザイン】Web上で楽々デザイン・Figmaの簡単な使い方【デザインツール】