- Figma to Webflowとは
- Figma to Webflowとは、FigmaのデザインをWebflowへコピー・同期できる公式プラグイン／アプリです。オートレイアウトで組んだフレームがレスポンシブなflexbox構造に変換され、レイヤー名がWebflowのクラスとして反映されます。
今回はこんな疑問にお答えします。figmaからWebflowへデザインをコピーできるようになったのは2023年2月のことです。Twitterアカウントよりfigmaのプラグインをリリースしたと告知がありました。僕のTwitterアカウントではこれを即座に拡散、解説記事の希望者を募りました。
遂に、figmaからWebflow へデザインをそのままコピペできる時代が来ました。
僕としては、「Webflow で実装するのとスピードは変わらなそう」と思いましたが、そんなこと絶対にない内容です。
日本語解説の希望ってありますか？🤔
Like多ければ解説出します
僕のツイッターはまだ始めたばかりでほとんど反応を集めることができませんでしたが、グーグルの検索数やTwitterでの盛り上がりを見て必要だと判断したため解説記事を書こうと思います。
この記事を書く僕はWebflowで事業を行っており、Webflowの指導や制作、SEOなどで信頼頂いている企業様からご依頼いただいております。そんな僕がfigmaからWebflowへデザインをコピペする方法を解説していきます。よろしくおねがいします。
※この記事は2023年2月公開です。2026年7月に、プラグインの現在地と「実案件で3年使った本音」を大幅に追記しました。
結論（2026年）：僕はこのプラグインを、ほぼ使っていません
リリース当時は「革命」だと思って拡散した僕ですが、3年たった正直な結論から書きます。実案件でこのプラグインを使うことは、ほぼなくなりました。理由は2つです。
- オートレイアウト縛りが重い。コピペするにはFigma側を全てオートレイアウトで組む必要があります。そこまでやるなら、Webflowで最初から組み立てるのと手間はほとんど変わりません
- コピペ後の互換性が悪い。Webflowに落としたときに崩れや調整が多く発生します。最初からWebflowで作ればその修正は発生せず、そのまま完成まで行けます
結局「Webflowで直接組む」を選ぶことになる。これが僕の結論で、おそらく多くのユーザーが同じ結論に至っています。リリース時の盛り上がりに対して、実際の案件で使われているのを見ることはほとんどありません。
ではFigmaが不要かというと、そうではありません。Figmaの利点はデザイン全体を一括で見て、公開前に合意できること。なので僕の現実解はこうです。
- Figma側：AIでの画像生成や簡単なモックアップで「見た目の合意」までを作る
- 構築：Webflowで1から直接組む（プラグインでのコピペはしない）
実際に僕も「FigmaからWebflowへ」という依頼を何度か受けていますが、進め方は毎回この形——Figma上で見やすいサイト像をAIで作成し、構築自体はWebflowで行う——に落ち着いています。
Figma to Webflowの現在地（2026年・デザインシステム同期へ進化）
「じゃあこのプラグインは終わったのか」というと、進化の方向が変わりました。単発のコピペツールから、FigmaとWebflowのデザインシステムを同期するツールになっています。2026年時点の公式情報を整理します。
- 形態は2つ。プラグイン＝単発のコピー（Copy to Webflow）／アプリ＝コンポーネントやデザインシステムの継続同期
- オートレイアウトのフレームがレスポンシブなflexbox構造に変換される（オートレイアウト必須は変わらず）
- Figmaのレイヤー名がそのままWebflowのクラス名になる。画像・ベクターはアセットに自動アップロード
- 対応CSS宣言は50以上、プリビルトレイアウトは20以上に拡充
- Figmaのコンポーネント→Webflowのコンポーネント、Figmaの変数→Webflowの変数（デザイントークン）として同期できる
- 同期はFigma側だけで開始できるようになった（以前のようにプラグインとアプリを同時に開く必要なし）
つまり今このツールが向いているのは、「コピペで楽をしたい個人」ではなく、Figmaにデザインシステムがあり、Webflowと二重管理になっているチームです。そこに当てはまらないなら、次の基本手順を知っておく程度で十分だと思います。
figmaからWebflowへデザインをコピペする方法
基本の手順は公開時から変わっていません。参考は以下のビデオです。こちらを日本語で解説していきます。またこの記事の最後には僕が実際にFigmaからWebflowへデザインをコピペしてみた解説動画を載せているのでお時間あればご覧くださいませ。
今回は以下の手順で進めていきます。
- FigmaでWebflowプラグインをダウンロード
- プロジェクトたちあげ
- レイアウトを組む
- コピペしてみる
それでは早速進めていきましょう。今回解説していく動画はこちら↓（英語）
ステップ1：FigmaでWebflowプラグインを使用する
FigmaのデザインをWebflowにコピペするためには、figma内で専用のプラグインを使う必要があります。Figmaのプラグインは以下から使用できます。
>>Figma to Webflow公式(英文)
ステップ2：プロジェクトたちあげ
figmaでWebflowプラグインを表示できたら「試す」を押して新規のFigmaプロジェクトを立ち上げましょう。Figmaのコミュニティからも検索できます。
ステップ3：プラグインを使用してレイアウトを組もう
プラグインをダウンロードすると通常のFigmaの他にWebflowのレイアウト機能が表示されます。ここからデザインをドラッグしてfigmaにデザインを作っていきます。
初めて開く場合はWebflowとの連携画面が表示されるのでデザインをコピペしたいプロジェクトを選択して連携させましょう。
既存のFigmaデザインをコピペできるわけではなく、オートレイアウト機能を使うことが必須です。複雑にレイアウトを組んでコピペすると、一部が画像で無理やりコピペされたり、ドロップシャドウがうまくいかなかったりします。オートレイアウトを使用すると「Column」など各アイテムに名前が表示されます。
この名前がWebflowにペーストした際にクラスとして反映されます。そのため、Figmaデザイン時からわかりやすい名前を意識しましょう
ステップ4：完成したデザインをWebflowへコピペ
デザインを組んだら「Copy to Webflow」が青くなるのでこちらをクリックしてコピーできます。ならない場合はWebflowサイトとの連携ができていない状態ですのでコピーボタンすぐ上の「Choose Webflow site」よりコピー先を選択しましょう。
あとは該当のWebflowプロジェクトにペーストするだけです。とりあえずこれでFigmaからWebflowへのコピペは完了です。ちなみにWebflowからFigmaへ逆出力はできないので注意しましょう。
Webflowで作るのと、Figmaで作るのどっちが早いの？
「慣れてるツールによる」という回答では無に等しいと感じたので、どちらも操作に慣れている前提でお話します。
デザインのみならfigma
大枠を作成するレイアウト部分のデザイン、画像、素材などを配置するならFigmaのほうが早いと感じます。Figmaでドラッグ&ドロップでデザインを作成できますし、素材を作成してSVGで出力することもできます。問題はWebflowプラグインに沿ったデザイン作成（＝全てオートレイアウトで組むこと）が必要になることです。だからこそ僕は、Figmaは「AIで作るモックアップまで」と割り切っています。
お問い合わせなど設定を変更するアイテムはWebflow
お問い合わせ機能を作成するなどのデザインだけでなく設定をイジる部分の作成に関してはWebflowで作ったほうが早いと感じています。
Webflowのテンプレートからデザインを変更する場合もFigmaにデザインを移行できないのでWebflowで作業することになります。
オススメのテンプレート記事はこちら
>>【テンプレート】Webflowのスゴ技テンプレート6選！無料で使用可能○
【2026年】そもそもFigma→Webflowの前に、作り方の選択から
最後に、2026年のいま僕が思っていることを正直に書きます。AIの進化で、Webflowというツール自体の立ち位置すら揺れています。サイトの作り方の選択肢が根本から変わってきているからです。
- 大手企業・セキュリティやガバナンス重視の会社→Webflowでの制作・運用が向いています。権限管理や安定運用の面で今も強いです
- 個人〜中小規模→AIでのサイト制作が最も利口な選択だと思います。速くて安く、品質もすでに実用域です
実際にこのブログのサイト自体が、AI（Claude Code）で7日間でフルリニューアルしたものです。制作過程は全工程公開の記事で読めます。
当社はWebflow制作もAIサイト制作もどちらも提供しているので、「自分の会社はどちらが合っているか」を無料で判断してレポートできます。Figma→Webflowの移行で迷っている方も、作り方の選択から気軽に無料相談へどうぞ。AIサイト制作の内容はこちらにまとめています。
FigmaからWebflowへのコピペを実際にやってみました。
うんうん言いながらではありますが、実際にFigmaからWebflowへデザインをコピペしてみました。ほぼはじめての収録なので2倍速で聞くぐらいでいいと思います。また最後にまとめを載せているのでまとめだけ見れば早く観終わります。
よくある質問
Figmaで作った既存のデザインをそのままWebflowにコピペできますか？
できません。オートレイアウトで組み直すことが必須です。複雑なレイアウトのままコピペすると、一部が画像として無理やり貼り付けられたり、ドロップシャドウが再現されなかったりします。
プラグインとアプリは何が違いますか？
プラグインは「Copy to Webflow」による単発のコピー、アプリはコンポーネントやデザイントークンを継続的に同期する仕組みです。2026年時点ではFigma側だけで同期を開始できるようになっています。
コピーボタンが青くならずコピーできないときはどうすればいいですか？
Webflowサイトとの連携ができていない状態です。コピーボタンすぐ上の「Choose Webflow site」からコピー先のサイトを選択しましょう。
WebflowからFigmaへデザインを逆出力できますか？
できません。Webflowのテンプレートからデザインを変更する場合もFigmaに移行できないため、Webflowで作業することになります。
結局、FigmaとWebflowはどう使い分けるのが現実的ですか？
筆者の実案件では、Figmaは「AI画像生成や簡単なモックアップで見た目の合意を作る」まで、構築はWebflowで最初から組む形に落ち着いています。全てをオートレイアウトで組んでコピペするより、結果的に速くて修正も少ないためです。
