figmaからStudioにインポートしたいカメ
学び続けるウサギ
figmaからStudioにインポートしたいカメ
「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にインポートしたいカメ
Figmaでコピーできない・STUDIOでうまく反映されない時の対処法
- 小出しにインポートする
- 元画像のサイズを小さくする
- 画像のレイヤー先頭に<img>と名称を加える
- 文字揃えの設定(自動調整など)を変更する
- オートレイアウトを使用する
- ページモードでコピーしてみる
コピーできなかったり、STUDIOのデザインエディタにうまく反映されない時は「文字揃えの設定」や「画像サイズを小さく」したり、画像のレイヤー名の先頭に<img>と記述したり「オートレイアウト」を使うことでうまくインポートできました。
全部が全部綺麗に移行は難しいかと思うので、自動レスポンシブ設定にしててもレスポンシブ設定や文字間などズレている箇所は都度STUDIOの方で作り直したり微調整してあげます。

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

今回はFigmaからSTUDIOへデザインをインポートする方法についてご紹介してきました。
Figmaで作成したデザインデータを簡単にSTUDIOへとインポートすることができてとても便利な機能ですよね。
デザインパーツなども楽々インポートできるので重宝しています。
figmaからStudioにインポートできたカメ

少しでも参考になりましたら幸いです。
【Webデザイン】Web上で楽々デザイン・Figmaの簡単な使い方【デザインツール】