Figma to STUDIOとは？Figmaデザインを簡単にSTUDIOへ移行できるプラグイン
Figma to STUDIOは、Figmaで作成したデザインをボックスレイアウトに変換し、STUDIOへインポートできるFigmaのプラグインです。
これは非常に便利なツールで、本記事では、Figma to STUDIOの使い方を画像付きで解説しています。数クリックでFigmaのデザインがSTUDIOに取り込まれていく様子は、初めて使うと驚きと感動があります。
ぜひこの記事を見ながら、一緒に操作してみてください。
まずはじめに
FigmaとSTUDIOのアカウントをそれぞれ作っておきましょう。
Figmaは「サインアップ」、STUDIOは「無料ではじめる」ボタンから登録ページへいけます。
それぞれアカウントを作成したら・・・
Figma to Studioへログインしましょう。
プラグインの起動方法
まず、Figma上で「Figma to STUDIO」プラグインを起動します。
-
プラグインのアイコンをクリック
-
検索窓に「f」と入力
-
「Figma to STUDIO」を選択
Figmaでの操作：デザインをコピーする
「Figma to STUDIO (Beta)」のウィンドウが開いたら、以下の手順で進めます。
-
「Sample」など任意のフレームを選択
-
プレビューが表示されたら「クリップボードにコピー」をクリック
STUDIOでの操作：デザインを貼り付ける
次に、STUDIOに移動して作業を続けます。
-
STUDIOで「空白からはじめる」を選択して新しいプロジェクトを作成
-
任意の名前を付けて「作成」をクリック
新しいプロジェクトが作成されたら、Figmaでコピーしたデザインをそのまま貼り付けます。
貼り付けた内容のプレビューが表示されるので、問題なければ「デザインをインポート」をクリックして完了です。
他のファイルでも試してみたい場合
最初に開いたFigmaのページには、複数のサンプルファイルが用意されています。
左メニューの「サンプルファイル」をクリックすると、様々なフレームが一覧表示されます。そこから気になるフレームを選び、同様の手順でインポートを試すことができます。
使用上の注意点（Figma to STUDIOは現在Beta版）
Figma to STUDIOは、2023年8月時点ではBeta版のため、すべてのデザインがうまく変換できるわけではありません。以下のようなケースでは注意が必要です。
-
レイヤー数が多いデザイン
-
複雑な重なりや透過を含む要素
-
背景画像や回転されたオブジェクト
-
ベクター画像が多用されている場合
-
マスク処理された画像やイラスト
こうした場合は、セクション単位でインポートするなど、より小さな単位で作業するのがおすすめです。多少レイアウトが崩れることはありますが、ゼロから作り直すよりはるかに効率的です。
まとめ
今回は、Figmaのプラグイン「Figma to STUDIO」の基本的な使い方をご紹介しました。
Beta版ながら、FigmaとSTUDIO間の連携をぐっと楽にしてくれる優秀なツールです。ノーコードでのWeb制作をよりスムーズにしたい方にとって、きっと強い味方になってくれるでしょう。
ぜひ、日々のデザイン業務の効率化に活用してみてください。