Figma から Webflow アプリへ

このレッスンでは、次のことを学びます。

1. Figma to Webflowアプリを起動する方法
2. 変数とコンポーネントを同期してインポートする方法
3. 以前にインポートしたコンポーネントを同期する方法
4. 競合のあるコンポーネントの更新を確認する方法
5. 以前にインポートした変数を同期する方法

Figma to Webflowアプリを起動する方法

まず、Webflowサイトを開き、 アプリパネル。 それから：

1. Figmaプラグインへ
2. に行く デザインシステムの同期 タブ
3. ドロップダウンで正しいサイトが選択されていることを確認してください（つまり、Figmaプラグインを同期しているサイト） 

プラグインが接続されていることが示されたら、変数やコンポーネントを同期できます。

変数とコンポーネントを同期してインポートする方法

数値変数のグローバル単位を設定する

数値変数に使用される単位をグローバルに変更したい場合は、Figma プラグイン モーダルで変更できます。その後、すべての変数は Webflow に同期するときに指定された単位を使用します。

1. Figma to Webflowプラグインのモーダルウィンドウに移動します
2. に行く デザインシステムの同期 タブ
3. 右上隅の デザインシステムの同期‍
4. クリック プラグイン設定‍
5. 使用 数値変数単位 数値変数のグローバル単位（px、em、remなど）を設定するためのドロップダウン
6. 戻る デザインシステムの同期 タブ
7. クリック Webflowに同期

その後、Webflowに戻り、アプリモーダルウィンドウで新しい数値変数ユニットを同期するには、 変数のインポートと更新キャンバス上で現在使用されている変数は、新しい数値変数単位に調整されます。

注記： Figma は変数をピクセル単位でのみ表示するので、インポートしたデザインは Webflow では Figma とは異なって見える場合があります。

変数の同期とインポート

同期およびインポートする変数を選択するには:

1. に行く デザインシステムの同期 タブ
2. クリック "変数モード右上隅の「」アイコン
3. 同期したい変数を選択してください
4. クリック Webflowに同期

その後、Webflowに戻って、アプリモーダルウィンドウで変数をインポートできます。インポートする変数を選択するには、チェックボックスをオンにするかオフにするかを選択します。次に、 変数をインポートする変数をインポートすると、 変数 タブ。

コンポーネントの同期とインポート

同期するコンポーネントを選択するには:

1. に行く デザインシステムの同期 タブ
2. クリック "モードを選択右上隅の「」アイコン
3. Figmaキャンバス上で1つまたは複数のコンポーネントを選択するには、 シフト + クリック
4. クリック Webflowに同期

プラグインがコンポーネントを同期したら、Webflow サイトにアクセスして、Figma から Webflow アプリへの更新を確認できます。 

1. クリック 新しいコンポーネントをインポートする 新しく同期されたコンポーネントを確認する
2. Webflowサイトにインポートするコンポーネントを選択します
3. クリック コンポーネントをインポートする

Figma からコンポーネントをインポートすると、Webflow はそのコンポーネントに接続されます。後で、同じコンポーネントを Figma から再インポートし、Webflow で直接デザインの更新を確認できます。要素の位置とスタイルのみが更新されることに注意してください。プロパティやバインディングがある場合は、Webflow に残ります。

注記： 同期時に選択を解除しない限り、コンポーネントバリアントは重複コンポーネントとして Webflow サイトにインポートされます。

以前にインポートしたコンポーネントを同期する方法

以前に Webflow サイトにインポートしたコンポーネントを同期するには、まず Figma に移動してプラグイン ウィンドウを開きます。次に、次の手順を実行します。

1. ドロップダウンで正しいサイト（つまり、コンポーネントを同期するサイト）が選択されていることを確認します。 
2. クリック "モードを選択右上隅の「」アイコン
3. Figmaキャンバス上のコンポーネントを選択します
4. クリック 続く プラグインのモーダルウィンドウで
5. クリック Webflowに同期
6. WebflowサイトでFigma to Webflowアプリを開きます
7. クリック コンポーネントの更新 アプリのモーダルウィンドウで

次に、各コンポーネントをクリックして表示します。

• 変更されたスタイル（色、フォントなど）
• コンポーネントに追加または更新された変数
• コンポーネントに追加された新しい要素

クリックすると コンポーネントのスタイルと変数を更新する プレビューから単一のコンポーネントを更新するか、 すべてのコンポーネントを更新する から コンポーネントの更新を確認する ページ。コンポーネントのすべてのインスタンスが Webflow サイト全体で更新されます。

競合のあるコンポーネントの更新を確認する方法

以前にインポートしたコンポーネントの競合は、Figmaのコンポーネントから1つまたは複数の要素を削除したが、それらの要素がWebflowにまだ存在する場合に発生します。競合のあるコンポーネントの更新を確認するには、 競合のあるコンポーネントの更新 アプリのモーダル ウィンドウに表示されます。次に、各コンポーネントをクリックして、不足している要素を表示します。 

そこから、3 つのオプションがあります。

• 不足している要素を削除する — Webflow内のコンポーネントのすべてのインスタンスを通常どおり更新します（これにより 取り除く コンポーネント内の要素
• 同期されていないコンポーネントとしてインポート — コンポーネントをそのまま Webflow にインポートします。将来、コンポーネントを Figma から Webflow に同期することはできません。
• Figmaの変更を元に戻す — Figmaに戻って削除した要素をコンポーネントに再度追加すると、競合が解消されます。

以前にインポートした変数を同期する方法

以前に Webflow サイトにインポートした変数を更新するには、まず Figma に移動してプラグイン ウィンドウを開きます。次に、次の手順を実行します。

1. クリック "変数モード右上隅の「」アイコン
2. クリック 続く
3. 同期したい変数を選択してください
4. クリック 変数をWebflowに同期する

Figmaで更新され、Webflowに同期された変数は、アプリのモーダルウィンドウに表示されます。ウィンドウには、変数の初期値と新しい値が表示されます。インポートする変数を選択して、 変数を更新する.