Figma→Webflowインポートで横並びが崩れる｜Auto LayoutとFlexboxの整合性という壁【AI活用検証vol.28】

Figmaで作ったデザインをWebflowにインポートできれば、コーディングなしでサイトを公開できます。プラグインも用意されており、手順としては単純です。

実際に試したところ、横並びに組んだ要素が縦並びに変換されるという不具合が発生しました。修正の工数が大きいため、現時点では優先度を下げて保留としています。短い検証ですが、同じ構成を検討している方には判断材料になるはずです。

この検証の概要

本記事は自社での検証記録です。検証が保留のため、成果や削減効果はありません。発生した不具合と判断の記録です。

起きたこと：横並びが縦並びになる

プラグインを使ってFigmaからWebflowへインポートすると、横並びに配置した要素が縦並びに変換されました。

レイアウトの根幹に関わる部分なので、これが崩れると「インポートして微調整」では済みません。実質的に組み直しに近い作業量になります。

原因の見立て：Auto LayoutとFlexboxの解釈差

FigmaのAuto Layoutと、Webflow側のFlexboxによる構造定義。この2つの整合性が取れていないことが原因と見ています。

どちらも「要素を並べる」仕組みですが、内部の考え方は完全に一致しているわけではありません。デザインツールとノーコードツールの間には、こうした構造の翻訳が挟まります。ここでずれると、見た目が変わります。

保留にした判断

対応するとすれば、Webflow側の構造定義とFigmaのAuto Layoutの整合性を再調整することになります。ただし現状は手動修正の工数が大きいため、優先度を下げて保留としました。

「インポートしてから直す」が「最初から作る」より重くなるなら、自動化する意味がありません。この損益分岐を越えていないと判断しました。

なお、別途検証したWebflow AIによるサイト生成では、ポン出しの品質は高いという評価が出ています。Figmaからのインポートに固執せず、Webflow上で生成してしまうほうが早い場合があります。

よくある質問

Figma→Webflowのインポートは使えないということですか？

今回の検証では、横並び要素が縦並びに変換される不具合が発生しました。Auto Layoutの組み方によっては結果が変わる可能性はありますが、修正工数が大きいと判断して保留しています。

どう回避すればいいですか？

Webflow側の構造定義とFigmaのAuto Layoutの整合性を取ることが根本対応です。ただし手動での再調整が必要になるため、Webflow上で直接生成する方法と比較してから選ぶことをおすすめします。

まとめ

• Figma→Webflowのプラグインインポートで、横並び要素が縦並びに変換される不具合が発生
• 原因はFigmaのAuto LayoutとWebflowのFlexbox構造定義の整合性と見ている
• 再調整は可能だが手動修正の工数が大きく、優先度を下げて保留
• 「インポートして直す」が「最初から作る」より重いなら、自動化の意味がなくなる

ツール間の連携は、手順が用意されていても構造の翻訳で崩れることがあります。導入判断では、変換後の修正工数まで含めて見積もる必要があります。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の制作業務へのAI活用を支援しています。ご相談はお問い合わせフォームから、継続的な伴走支援についてはAI参謀をご覧ください。