【Figma to Studio】Figmaで制作したデザインをStudioで自動構築しよう！

ノーコードでWEBサイトを作成できるプラットフォーム「Studio」に、Figmaで作成したデザインをインポートできるツールとして「Figma to Studio」がリリースされました。

このプラグインにより、Studioにおける実装スピードが飛躍的に上昇することが見込まれます。

今回は「Figma to Studio」の使用方法について解説していきます。

※本記事は2024年5月時点の記事となります。
　サービスのアップデートにより変更点が出てくる可能性もございますので、ご了承ください。

Figma to Studioでできること

できることとしては、主に3点です。

1. Figmaデータを、ボックスレイアウトへの自動変換

2. 自動レスポンシブデザイン対応

3. 画像素材、Studio上で使用可能なフォントをプロジェクトに自動で追加

Figmaではフレームの中にさらにフレーム要素を追加し、オートレイアウト機能などを用いてデザインを組むことが多いかと思います。

WEBサイトにおける「ボックス」が、Figmaでは「フレーム」として役割を担っているため
Figmaでサイトをデザインする際には、この点を頭に入れておくと、Studio実装の際に理解がしやすくなるかと思います。

Figma to Studioの使い方

①Figmaでプラグインをインストールする

下記のページよりプラグインのインストールを行いましょう。

https://www.figma.com/community/plugin/1274345780965443906/figma-to-studio

この際にSTUDIOのアカウントが必要となりますので、アカウントが未取得の方は登録をしておきましょう。

②Figma上でプラグイン「Figma to Studio」を起動する

取り込みたいデザインデータを開き、プラグイン＞Figma to Studioを起動します。
この時、Figma to Studioをブックマークしておくと便利です！

④インポートしたいデザインをコピーする

プラグインを起動すると、ウィンドウが開きます。

この状態で、インポートしたいレイヤーまたは、フレームを選択します。
選択するとStudioで実装されるプレビューが表示されます。
PC・タブレット・SPの3種類のビューを確認することができます。

次に、「クリップボードにコピー」を選択します。
（表示崩れを起こしてしまっており、文字が被っておりますが、赤枠のボタンになります）

コピーが完了すると、ボタンの色が変わり「コピーが完了しました！」の表記になります。
データ量によっては、コピーが完了するまでに時間がかかることがございますので、
表記が変わるまでは待機してください。

⑤Studioを開く

Studioを開き、新規プロジェクトを立ち上げます。

プロジェクトは「空白からはじめる」を選択してください。
新しいプロジェクトが開けたら、次にFigma上でコピーしているデータを貼り付けます。

上記のように、貼り付けが完了したら、「デザインをインポート」をクリックし
デザインを取り込んでいきます。

インポートが完了すると、上記のような画面に遷移します。
左タブは、インポートされた画像データが表示されます。

余白感や、改行、フォントなど多少調整が必要な箇所が出てきますが、
基本的なデザインデータは、自動的にインポートされます。

ただし、Figma上でフレームを使用せずに、直置きでデザインを作成してしまうと
Studio上でビューが崩れてしまう可能性が高くなります。
そのためFigma上ではしっかりとフレームを使用した上で、デザインを組むことが重要です。

Figma to Studioを使用する際の注意点

Studioへの変換が難しいデザインも存在します。
下記7点には注意しましょう。

1. レイヤー数が多いデザイン

2. 重なり合っているデザインの要素

3. 背景全体の画像をひいている場合

4. 背景で塗りを透過のエフェクトを用いて使用している場合

5. Figma上で回転を用いている要素

6. レイヤー数が多いベクター画像

7. Figma上でマスクを使用してトリミングを行っている画像やイラスト

上記を使用しており、Studio上で表示が崩れてしまった際には
より小さな単位、セクション・フレーム・画像ごとにインポートしたり、
インポート後にStudio上で手動で修正を処理していきましょう。

【Figma to Studio】のまとめ

リリースされて間もないツールのため、Figma上のデザインの全てを完璧にStudioへインポートすることは難しいですが、
0から作り込んでいくよりは、だいぶ時間を短縮し、より簡単にStudioへの移行ができるツールだと思います。

これまでデザインだけを作成されていたデザイナーさんも、エンジニアやコーダーに頼らずにWEBサイト制作ができる、大変便利なツールだと感じました。

WEBサイト制作領域に挑戦してみたい、活躍の場を広げたいデザイナーさんたちにとっては
すぐに導入しやすいおすすめのツールですので、ぜひ使用してみてください！