こんにちは！会社員クリエイターのこばたです！
今回は、Figma to STUDIOの使い方を解説します。
「Figma to STUDIO」とは、デザインツールFigmaの「プラグイン」です。ものすごく簡潔に伝えさせていただく（伝えると）と、Figmaをコピー、STUDIOでペーストすると、サイト制作が完成されるという待望の機能です。
この記事さえ読めば、Figma to STUDIOについて完全理解して、作業効率化を図れます。ぜひ最後までお読みください！
Figma to STUDIOとは
「Figma to STUDIO」とは、Figmaのプラグインです。
「Figma to STUDIO」のプラグインを使用すると、Figma で作成したデザインを STUDIO に簡単にインポートし、ライブ Webサイトとして公開することが可能となります。
このプラグインでできること
- ボックスレイアウトへの自動変換
- 自動レスポンシブデザイン対応
- 画像素材、STUDIO上で使用可能なフォントをプロジェクトに自動で追加
- 複数ページのインポート、新規プロジェクト作成（※「ページモード」をBeta版として提供しています）
Figma to STUDIOの使い方
使い方の流れは下記です。
- プラグインをインストールします。
- Figmaでプラグインを起動し、STUDIOアカウントにログインします。
- STUDIOにインポートしたいレイヤーまたはフレームを選択します。
- 「クリップボードにコピー」ボタンをクリックします。
- STUDIOのプロジェクト上でペーストします。
- デザインを確認し、「インポート」ボタンをクリックします。
操作は、アカウント準備 → Figma → STUDIOの順に進みます。
順番に見ていきましょう。
1.アカウント準備
アカウント準備は、以下リンク先からご登録ください。
Figmaは「サインアップ」、STUDIOは「無料ではじめる」ボタンから登録ページへ。
2.Figmaでインポート
Figmaでインポートするデザインを作成します。
完成したら、メニューバー（リソース）のプラグインからFigma to STUDIOを検索 → 選択します。
左上のページ名をクリックするとページ選択がされます。
選択後、「クリップボードにコピー」をクリックします。
「クリップボードにコピーが完了しました。」が表示されたら、Figmaの操作は終了です。
3.STUDIOで公開
STUDIOのデザインエディタにて、先ほどコピーしたデザインをペースト（Ctrl＋v)します。
「デザインをインポート」をクリックします。
データの重さにもよりますが、インポートに少し時間がかかります。
最後にレスポンシブ設定の確認、修正を行ないます。今回は「モバイル」部分の文字サイズの変更をします。
追加Tips
Figma公式サイトからプラグインする際のヒントが挙げられていますので、確認していきましょう。
・Auto Layout設定によりインポート精度が向上します。
・レイヤー名の先頭に <img> を追加すると、画像として取り込む範囲を指定できます。
・コピーができない場合、より小さなレイヤーごとのインポートをお試しください。
まとめ
いかがでしたでしょうか。
「Figma to STUDIO」を用いれば、操作はとても簡単なのに、作業効率が格段に上がります。ぜひ使いこなしてみて下さい。
STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。STUDIOにてサイトの制作依頼やメンター等の依頼も承っておりますので、ぜひお問い合わせよりご連絡ください！
最後までお読みいただきありがとうございました。
