のデザインを
今すぐ
Webサイトに
Figma to Studio
プラグインをインストール

FEATURE
Figmaデータを
一瞬でWebサイトに変換
サイト制作を効率化
Figmaでデザインをコピー&ペーストで簡単インポート
Studioですぐにサイト公開が可能に。

レスポンシブ化も、自動で
PCをベースに作成したデザインは、
自動でレスポンシブ化したレイアウトに変換。

画像やカラーもインポート
画像やアイコンはもちろん、
Studioにあるフォントやカラーも一瞬でインポート

複数ページもまとめて
Beta
プラグイン上でプロジェクトを作成し、
複数ページをまとめてインポート

VOICE OF CUSTOMERS
デザイナーの皆さまに
ご好評いただいています
デザイナーの皆さまを中心にご利用いただき、
高い評価をいただいております。
HOW IT WORKS
4ステップで
Studioサイトに変換
StudioとFigmaのアカウントさえあればすぐに使えます。
さらに効率的なWebサイトの制作を始めましょう。
01
まずはプラグインを
インストール
インストール後すぐにインポートを試せるサンプルファイルをご用意しています
プラグインをインストール


03
フレームを選択して、
デザインをコピー
ページ全体でレイヤー数が多い場合は、セクションごとにわけてインポートをお試しください。

04
Studioエディターでペーストし、インポートして完了
デザインを追加したいプロジェクトをひらき、⌘ + V を押してインポート完了。

正確なデザインインポートのTips
PCサイズでデザインを作成
Figmaで作成したタブレットやモバイルサイズのデザインをStudioへインポートしても、PCサイズとして認識されます。
イラストや画像はレイヤー名に を追加
画像やアイコンなどのデータの取り込みは、Figma上のレイヤー名先頭にを追加しインポートすることで、アイコンやイラストの崩れがなくなります。
ページモード(Beta)を利用して複数ページをインポート
複数ページを書き出す場合は、ページモード(Beta)をご利用ください。別ページとして取り込む場合は、フレーム名の先頭に”/”を追加すると、ページとして認識されます。
※ ページモードはベータ版でのご利用となりますので、デザインの完全なインポートは保証されていません。
インポートがうまくいかない場合
フレームを分割し、少ないレイヤー数でお試しください
レイヤー数が多い場合は変換がうまくいかない場合がございます。より小さなレイヤー単位でのインポートをお試しください。
Auto Layoutを設定してください
Auto Layout を設定したデザインデータのインポートは、設定していない場合に比べて精度が高くなります。
イラストや画像はレイヤー名に を追加してください
画像やアイコンなどのデータの取り込みは、Figma上のレイヤー名先頭にを追加し、インポートしてください
さっそくプラグインを
インストールして始めましょう
プラグインをインストール

さあ、今すぐStudioを始めよう。
無料ではじめる