STUDIOStudio

ログイン / 新規登録 

のデザインを

今すぐ

Webサイトに

Figma to Studio

プラグインをインストール

FEATURE

Figmaデータを
一瞬でWebサイトに変換

サイト制作を効率化

Figmaでデザインをコピー&ペーストで簡単インポート
Studioですぐにサイト公開が可能に。

レスポンシブ化も、自動で

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

画像やカラーもインポート

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

複数ページもまとめて

Beta

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

VOICE OF CUSTOMERS

デザイナーの皆さまに
ご好評いただいています

デザイナーの皆さまを中心にご利用いただき、
高い評価をいただいております。

HOW IT WORKS

4ステップで
Studioサイトに変換

StudioとFigmaのアカウントさえあればすぐに使えます。
さらに効率的なWebサイトの制作を始めましょう。

01

まずはプラグインを
インストール

インストール後すぐにインポートを試せるサンプルファイルをご用意しています

プラグインをインストール

02

画像・レイアウトなどの
Figmaデータを調整

よりスムーズにStudioでのWebデザインを行うため、以下のTipsを参考にFigmaのデザインを調整しましょう。

正確なデザインインポートのために

03

フレームを選択して、
デザインをコピー

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

04

Studioエディターでペーストし、インポートして完了

デザインを追加したいプロジェクトをひらき、⌘ + V を押してインポート完了。

正確なデザインインポートのTips

PCサイズでデザインを作成

Figmaで作成したタブレットやモバイルサイズのデザインをStudioへインポートしても、PCサイズとして認識されます。

イラストや画像はレイヤー名に を追加

画像やアイコンなどのデータの取り込みは、Figma上のレイヤー名先頭にを追加しインポートすることで、アイコンやイラストの崩れがなくなります。

ページモード(Beta)を利用して複数ページをインポート

複数ページを書き出す場合は、ページモード(Beta)をご利用ください。別ページとして取り込む場合は、フレーム名の先頭に”/”を追加すると、ページとして認識されます。
※ ページモードはベータ版でのご利用となりますので、デザインの完全なインポートは保証されていません。

インポートがうまくいかない場合

フレームを分割し、少ないレイヤー数でお試しください

レイヤー数が多い場合は変換がうまくいかない場合がございます。より小さなレイヤー単位でのインポートをお試しください。

Auto Layoutを設定してください

Auto Layout を設定したデザインデータのインポートは、設定していない場合に比べて精度が高くなります。

イラストや画像はレイヤー名に を追加してください

画像やアイコンなどのデータの取り込みは、Figma上のレイヤー名先頭にを追加し、インポートしてください

さっそくプラグインを
インストールして始めましょう

プラグインをインストール

さあ、今すぐStudioを始めよう。

無料ではじめる