【革命】figmaからWebflowへデザインをコピペする方法

くりたまさと
Masato Kurita
栗田将人
【革命】figmaからWebflowへデザインをコピペする方法

FigmaからWebflowへデザインをコピペできるようになったらしいけど本当かな?実際どのぐらい便利なの?コピペだけでサイト公開できるの?

今回はこんな疑問にお答えします。figmaからWebflowへデザインをコピーで用になったのは2023年2月のことです。Twitterアカウントよりfigmaのプラグをリリースしたと告知がありました。僕のTwitterアカウントではこれを即座に拡散、解説記事の希望者を募りました。

僕のツイッターはまだ始めたばかりでほとんど反応を集めることができませんでしたが、グーグルの検索数やTwitterでの盛り上がりを見て必要だと判断したため解説記事を書こうと思います。

この記事を書く僕はWebflowで事業を行っており、Webflowの指導や制作、SEOなどで信頼頂いている企業様からご依頼いただいております。そんな僕がfigmaからWebflowへデザインをコピペする方法を解説していきます。よろしくおねがいします。

目 次

figmaからWebflowへデザインをコピペする方法

まずはどのようにしてFigmaからWebflowへデザインをコピペするのか解説していきます。参考は以下のビデオです。こちらを日本語で解説していきます。またこの記事の最後には僕が実際にFigmaからWebflowへデザインをコピペしてみた解説動画を載せているのでお時間あれば拝見くださいませ。

今回は以下の手順で進めていきます。

  1. FigmaでWebflowプラグをダウンロード
  2. プロジェクトたちあげ
  3. レイアウトを組む
  4. コピペしてみる

それでは早速進めていきましょう。今回解説していく動画はこちら↓(英語)

ステップ1:FigmaでWebflowプラグを使用する

FigmaのデザインをWebflowにコピペするためには、figma内で専用のプラグを使う必要があります。Figmaのプラグは以下から使用できます。
>>Figma to Webflow公式(英文)

ステップ2:プロジェクトたちあげ

figmaでWebflowプラグを表示できたら「試す」を押して新規のFigmaプロジェクトを立ち上げましょう。Figmaのコミュニティからも検索できます。

ステップ3:プラグを使用してレイアウトを組もう

プラグをダウンロードすると通常のFigmaの他にWebflowのレイアウト機能が表示されます。ここからデザインをドラックしてfigmaにデザインを作っていきます。

始めて開く場合はWebflowとの連携画面が表示されるのでデザインをコピペしたいプロジェクトを選択して連携させましょう。

Figma to Webflow

既存のFigmaデザインをコピペできるわけではなく、オートレイアウト機能を使うことが必須のようです。オートレイアウトを使用すると「Column」など各アイテムに名前が表示されます。

この名前がWebflowにペーストした際にクラスとして反映されます。そのため、Figmaデザイン時からわかりやすい名前を意識しましょう

ステップ4:完成したデザインをWebflowへコピペ

デザインを組んだら「Copy to Figma」が青くなるのでこちらをクリックしてコピーできます。ならない場合はWebflowサイトとの連携ができていない状態ですのでコピーボタンすぐ上の「Choose Webflow site」よりコピー先を選択しましょう。

あとは該当のWebflowプロジェクトにペーストするだけです。とりあえずこれでFigmaからWebflowへのコピペは完了です。ちなみにWebflowからFigmaへ逆出力はできないので注意しましょう。

ここまで読んでくれた方の気持ちを知っています。今ここで知りたいのは「Figmaで作った既存デザインをWebflowプラグにはめてコピペできるか?」ですよね。もう少しだけお待ち下さい!現在「別でデザインしたものをコピペできるか」またその方法の最善策を検証しています。

>追記2023,0316
FigmaからWebflowへデザインをコピーするにはオートレイアウト機能を使う必要があります。複雑にレイアウトを組んでコピペすると一部画像で無理やりコピペされたりドロップシャドウがうまく行かなかったりします。

お時間かかるかもしれませんがFigma to Webflowの詳しい内容や便利な使い方については続報をお待ち下さい。ツイッターで最速で告知します!

Webflowで作るのと、Figmaで作るのどっちが早いの?

「慣れてるツールによる」という回答では無に等しいと感じたので、どちらも操作に慣れている前提でお話します。

デザインのみならfigma

大枠を作成するレイアウト部分のデザイン、画像、素材などを配置するならFigmaのほうが早いと感じます。Figmaでドラック&ドロップでデザインを作成できますし、素材を作成してSVGで出力することもできます。問題はWebflowプラグに沿ったデザイン作成が必要になることです。自分の体験以外は記事にしたくないのでもう少々お待ち下さい。

お問い合わせなど設定を変更するアイテムはWebflow

お問い合わせ機能を作成するなどのデザインだけでなく設定をイジる部分の作成に関してはWebflowで作ったほうが早いと感じています。

Webflowのテンプレートからデザインを変更する場合もFigmaにデザインを移行できないのでWebflowで作業することになります。

オススメのテンプレート記事はこちら
>>【テンプレート】Webflowのスゴ技テンプレート6選!無料で使用可能○


FigmaからWebflowへのコピペを実際にやってみました。

うんうん言いながらではありますが、実際にFigmaからWebflowへデザインをコピペしてみました。ほぼはじめての収録なので2倍速で聞くぐらいでいいと思います。また最後にまとめを載せているのでまとめだけ見れば早く観終わります。

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。それでは限定メルマガでお会いしましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

【テンプレート】Webflowのスゴ技テンプレート6選!無料で使用可能○

え?こんなのも作れるの?と、ついつい目を疑いたくなるようなWebflowの無料テンプレート・ショーケースをご紹介。Webflowを使用してPS4のゲーム画面やAPPLEのHPなどを模倣して作っているものもあります。

Read more...

HTMLコードを出力できるノーコードWeb開発ツールを紹介

コード出力ができるノーコードWeb開発ツールを紹介しています。さらに本記事ではおすすめのノーコードWeb開発ツールからノーコードで稼ぐ方法まで紹介しています。ノーコードに興味のある方は是非ご覧ください。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup