コンポーネント、セクション、変数、スタイルをFigmaからWebflowに同期できるようになりました！

※この記事は2025年2月4日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Major Figma to Webflow improvements

‍

FigmaプラグインとWebflowアプリを組み合わせれば、静的なデザインを本番環境対応のサイトへと進化させることができます。

‍

FigmaからWebflowへの移行体験を大幅にアップグレードし、ワークフローの合理化、新機能の追加、パフォーマンスと精度の向上を実現しました。

コンポーネント、セクション、変数、スタイルを Figma から Webflow に同期できるようになり、チームは洗練されたサイトを迅速に立ち上げることができるようになります。

レイヤー

新しいFigmaからWebflowへの連携機能の中心となるのは「Layers」タブです。

このタブでは、FigmaのレイヤーをWebflowのコンポーネントや要素に同期またはコピーできます。

新機能は以下のとおりです。

• 複数のレイヤーを同期したり、フレームとコンポーネントを混在させたり、個々のレイヤーをコピーして Webflow キャンバスに直接貼り付けたりできるようになりました。
• 既存のコンポーネントへの更新を同期すると、アプリを使用すると、それらの変更をすばやく受け入れたり、名前の変更を詳細に確認したりすることが簡単になります。
• アセット作成のヒューリスティックを更新したので、すべての画像とアイコンが期待どおりに Webflow に同期されるようになります。
• パフォーマンスと精度が大幅に向上し、一部のデザインでは処理速度が最大 30 倍になりました。

‍

変数

変数が専用のタブに移動され、Figma 変数をWebflowの変数と同期できるようになりました。

ローカル変数に加えて、Figma ライブラリからコレクションを選択したり、同期するグループを切り替えたり、各数値変数の単位（px、em、rem）を選択したりできるようになりました。

em/rem 単位の場合は、プラグイン設定で基本フォントサイズも設定できます。

最近リリースされた変数コレクションとモードの完全なサポートも現在開発中です。

‍

スタイル

スタイル同期は、FigmaのテキストとエフェクトのスタイルをWebflowのクラスに同期する新しいワークフローです。

これにより、追加の作業なしで、標準のタイポグラフィ、シャドウ、フィルターを簡単に活用できます。プラグイン設定でクラスプレフィックス（デフォルトでは「テキスト」と「エフェクト」）を編集できます。

スタイルの更新を同期すると、変更された各プロパティがアプリに表示されるので、変更内容をすばやく確認して承認できます。

FigmaからWebflow について詳しくは、ヘルプセンターをご覧ください

‍