%402x.svg){kind=icon}
FigmaからWebflowへデザインをコピペできるようになったらしいけど本当かな？実際どのぐらい便利なの？コピペだけでサイト公開できるの？
今回はこんな疑問にお答えします。figmaからWebflowへデザインをコピーで用になったのは2023年2月のことです。Twitterアカウントよりfigmaのプラグをリリースしたと告知がありました。僕のTwitterアカウントではこれを即座に拡散、解説記事の希望者を募りました。
僕のツイッターはまだ始めたばかりでほとんど反応を集めることができませんでしたが、グーグルの検索数やTwitterでの盛り上がりを見て必要だと判断したため解説記事を書こうと思います。
この記事を書く僕はWebflowで事業を行っており、Webflowの指導や制作、SEOなどで信頼頂いている企業様からご依頼いただいております。そんな僕がfigmaからWebflowへデザインをコピペする方法を解説していきます。よろしくおねがいします。
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 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の使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。
これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。現在47/100人
100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。
