Wix Studio エディタ：Figma で制作したデザインをインポートする
9分
この記事内
- ステップ 1 | インポートの準備をする
- a | Wix Studio にカスタムフォントをアップロードする
- b | フレーム幅と編集サイズを比較する
- ステップ 2 | プラグインをインストールする
- a | Figma にプラグインをインストールする
- b | クライアントのサイトでツールを開く
- ステップ 3 | Figma からエクスポートしたいデータを選択する
- ステップ 4 | エディタでインポートを完了させる
- よくある質問
- トラブルシューティング
Figma を使用してセクションや要素をデザインしている場合、Wix Studio プラグインを使用してこれらの静的デザインをシームレスに読み込み、レスポンシブ対応のサイトを簡単に制作・公開することができます。Figma フレーム全体、特定のコンポーネントとセクションといった形でインポートの範囲を指定できるほか、ワイヤーフレーム（UI キット）を使用することも可能です。
Wix Studio にデザインをインポートした後は、ノーコードのアニメーションやカスタム CSS を追加したり、Wix ストアなどのビジネスソリューションと接続するなどして、より機能的で美しいサイトに仕上げることができます。
- インポートを行う際は、別々のブラウザタブで Figma と Wix Studio エディタを両方開いたままにしておいてください。
- 作業の途中でサポートが必要な場合は、以下の「よくある質問」と「トラブルシューティング」をご参照ください。
ステップ 1 | インポートの準備をする
Figma からデザインをインポートする前に、いくつかの点をご確認いただくことをおすすめします。こうすることで、Figma から Wix Studio へデザインをシームレスに移行できます。
a | Wix Studio にカスタムフォントをアップロードする
Figma で使用しているすべてのフォントが Wix アカウントでも利用できることを確認してください。Wix には、事前にフォントをアップロードしておくことをおすすめします。該当するフォントがない場合は、表示するフォントがシステムフォントに置き換えられます。
b | フレーム幅と編集サイズを比較する
Figma のフレーム幅は、制作しているサイトの該当ページの編集サイズと一致している必要があります。幅が異なるとデザインが同じ比率でエクスポートされないため、Wix Studio にインポートした後に正しい比率で表示されません。
要素をインポートする際の注意事項：
要素の比率を1:1で維持するために、それらを含むフレームの幅を確認する必要があります。
ステップ 2 | プラグインをインストールする
まだインストールしていない場合は、エクスポートしたいファイルから Wix Studio プラグインをインストールしてください。一度インストールすると、アカウント内の他のデザインからプラグインに簡単にアクセスできます。
次に、Wix Studio エディタでプラグインパネルを開きます。
a | Figma にプラグインをインストールする
- Figma アカウントでエクスポートしたいファイルを開きます。
- キーボードの「Ctrl + K」（Mac の場合「Cmd + K」）を押します。
- 「Plugins and widgets（プラグインとウィジェット）」タブをクリックします。
- 「Wix Studio」と検索し、検索結果から「Figma to Wix Studio」を選択します。
- 「Run（実行）」をクリックします。
- プラグイン上で Wix アカウントにログインします。
b | クライアントのサイトでツールを開く
- エディタ内のクライアントサイトに移動します。
- 左上の Wix Studio アイコン
をクリックします。 - 「ツール」にマウスオーバーします。
- 「Figma からインポート」をクリックします。
ヒント：これにより、エディタ左側に新しいアイコン
が追加されます。
ステップ 3 | Figma からエクスポートしたいデータを選択する
プラグインをインストールしたら、Figma アカウントのファイルに戻ります。プラグインでは、エクスポートする内容（フレームやスタイル）を選択することができます。
最初にスタイルをエクスポートすることをおすすめします（例：タイポグラフィと色など）。こうすることで、フレームのエクスポートを開始するまでに Wix Studio エディタでスタイルが先に設定されます。
プラグインによって自動的に認識される要素
Figma からエクスポートを行う方法：
- （まだ開いていない場合）該当する Figma ファイルを開きます。
- Wix Studio プラグインにアクセスします：
- 「Figma」アイコン
をクリックして、メインメニューを開きます。 - 「プラグイン」にマウスオーバーし、「Figma to Wix Studio」をクリックします。
- 「Figma」アイコン
- 「Set up Export（エクスポートを設定）」をクリックします。
- 「Next（次へ）」をクリックします。
- Wix Studio での編集サイズが Figma のフレーム幅と一致していることを確認し、準備ができたら「エクスポートを開始（Start Export）」をクリックします。
- エクスポートデータを選択し、次の手順に従います：
文字スタイル
フレーム
ステップ 4 | エディタでインポートを完了させる
Figma でエクスポートが完了したら、エディタに戻り、フォントの欠落やサイズの不一致がないことを確認します。
フレームを操作する場合：コンテナやセクションなどとしてインポートするかを選択できます。
インポートを完了させる方法：
- エディタ内のクライアントサイトに移動します。
- 左側の「Figma からインポート」アイコン をクリックします。
- 以前に Figma から現在の Wix アカウントにインポートしているかに応じて、パネルを更新します：
- 初回インポートの場合：「再読み込み」をクリックします。
- 以前にインポートしたことがある場合：「インポートを更新する」アイコン
をクリックします。
- インポートする内容に応じて、下記の手順に従います：
文字スタイル
フレーム
よくある質問
Figma で制作したデザインのインポートに関する詳細については、以下の質問をクリックしてください。
既存のサイトに Figma からデザインをインポートすることはできますか？
一度に複数のページをインポートすることはできますか？
Figma のデザインは自動的に Wix アプリ（例：Wix ストアなど）に接続されますか？
メニュー、フォーム、ボタンをインポートするとどうなりますか？クライアントのサイトでも機能しますか？
インポートされたデザインはブレイクポイント間でどのように表示されますか？
Figma のデザインを Wix Studio にインポートしてから変更を加えた場合、自動的に同期されますか？
Wix Studio から Figma にデザインをエクスポートすることはできますか？
トラブルシューティング
Figma のデザインを Wix Studio にインポートする際に問題が発生した場合は、以下をクリックして問題の解決にお役立てください。
トラブルシューティングを行う前に：
デザインをエクスポートできない場合は、Figma アカウントのレート制限に達していないか確認することをおすすめします。（英語）
（Figma で）エクスポート時にパネルにスタイルが表示されない
（エディタ内）ページまたはセクションとしてフレームを追加するオプションが表示されない
（エディタ内）インポート後にデザインが同じ比率で表示されない
まだサポートが必要な場合：
サポートが必要な場合は、どのような情報を送信する必要がありますか？