Figma to Webflow(ウェブフロー) Appの使い方

Figma to Webflow Appを使用すると、バリアブルやコンポーネントを Figma からWebflowにインポートできます。

始めるには、まずFigma to Webflow プラグインをインストールする必要があります。

‍

Figma to Webflow Appを起動する方法

まず、Webflow サイトを開き、アプリパネルからアプリを起動します。

1. Figma プラグインに移動します
2. 「Design System Sync」タブに移動します
3. ドロップダウンで正しいサイトが選択されていることを確認してください

プラグインが接続されていることを確認したら、バリアブルやコンポーネントを同期できます。

‍

バリアブルとコンポーネントを同期してインポートする方法

バリアブルの同期とインポート

同期およびインポートするバリアブルを選択するには

1. 「Design System Sync」タブに移動します
2. 右上隅にある「variables mode」アイコンをクリックします
3. 同期したいバリアブルを選択します
4. 「Sync to Webflow」をクリックします

その後、Webflow に戻って、アプリのモーダル ウィンドウにバリアブルをインポートできます。

ボックスをオンまたはオフにして、インポートするバリアブルを選択できます。

次に、「Import」をクリックします。バリアブルをインポートすると、Variables tabに表示されます。

‍

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

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

1. 「Design System Sync 」タブに移動します
2. 右上隅の「select mode」アイコンをクリックします
3. Shiftキーを押しながらクリックして、Figma キャンバス上の 1 つまたは複数のコンポーネントを選択します
4. 「Sync to Webflow」をクリックします

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

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

Figma からコンポーネントをインポートすると、Webflow はそのコンポーネントに接続します。

後で、同じコンポーネントを Figma から再インポートし、その設計の更新を Webflow で直接確認できます。

要素の位置とスタイルのみが更新されることに注意してください。プロパティまたはバインディングがある場合、Webflow に残ります。

注記

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

‍

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

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

1. ドロップダウンでコンポーネントを同期するサイトが選択されていることを確認してください。
2. 右上隅の「select mode」アイコンをクリックします
3. Figma キャンバス上のコンポーネントを選択します
4. プラグインのモーダルウィンドウで「Continue」をクリックします
5. 「Sync to Webflow」をクリックします
6. Webflow サイトで Figma to Webflow Appを開きます
7. アプリのモーダルウィンドウで「Component updates」をクリックします

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

• 変更されたスタイル (色、フォントなど)
• コンポーネントに追加またはコンポーネントで更新されるバリアブル
• コンポーネントに追加された新しい要素

[Update Component Styles and Variables] をクリックしてプレビューから 1 つのコンポーネントを更新するか、[Review component updates]ページで[Update all components]をクリックします。

コンポーネントのすべてのインスタンスが Webflow サイト全体で更新されます。

‍

コンフリクトのコンポーネントの更新を確認する方法

以前にインポートしたコンポーネントのコンフリクトは、Figma のコンポーネントから 1 つまたは複数の要素を削除し、それらの要素が Webflow にまだ存在している場合に発生します。

コンフリクトのあるコンポーネントの更新を確認するには、アプリのモーダル ウィンドウで [Component updates with conflicts] をクリックします。

次に、各コンポーネントをクリックして、欠落している要素を表示できます。

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

• 欠落している要素を削除する— Webflow 内のコンポーネントのすべてのインスタンスを通常どおり更新します (これにより、コンポーネント内の要素が削除されます)
• 非同期コンポーネントとしてインポート— コンポーネントをそのまま Webflow にインポートします。今後、コンポーネントを Figma から Webflow に同期することはできなくなります。
• Figma での変更を元に戻す- Figma に戻って、削除した要素をコンポーネントに追加し直すことができます。これにより、コンフリクトが解消されます。

‍

以前にインポートしたバリアブルを同期する方法

以前に Webflow サイトにインポートしたバリアブルを更新するには、まず Figma に移動してプラグイン ウィンドウを開きます。

1. 右上隅にある「variables mode」アイコンをクリックします
2. 「Continue」をクリックします
3. 同期したいバリアブルを選択します
4. 「Sync variable(s) to Webflow」をクリックします

Figma で更新され、Webflow に同期されたバリアブルはすべて、アプリのモーダル ウィンドウに表示されます。

ウィンドウにはバリアブルの初期値と新しい値が表示されます。インポートするバリアブルを選択し、[Update variable(s)]をクリックします。

‍