Figma to Webflow: Introduction (Part 1 of 7)

Community resources Webflow Tips
1

Take the full course at Webflow University: Figma to Webflow - Webflow University Courses with access to all assets or to clone the completed Webflow project.

In this course, we run through the entire design process, from concept to completion. We start in Figma, create some stunning 3D assets in Cinema 4D and Octane, create animated Lottie files in After Effects, and finally, we build our site in Webflow with interactions.

Share your progress #figmatowebflow on social media and here on this topic in the forum.

00:00 Introduction
01:13 — Iterate and design your site in Figma
01:29 — Model and render product images and animations in Cinema 4D & Octane
01:56 — Export your 3D animations from After Effects and Lottie
02:15 — Build and develop your website in Webflow
02:46 — Publish and launch your production-ready site
03:39 — Bonus lessons for extra credit
04:09 — Accountability & share your progress

Course discussion

Lesson discussions

3

The production quality on this course so far is incredible! Love the humor, big shout out to the team that put it together!

1 Like
4

I skimmed through portions of the video…and nowhere can I find a place to import figma designs to webflow to create simple landing pages. Please help.

5

Hey @hbhushan Figma to Webflow is about using both tools as part of a workflow. There is no direct integration between the two platforms.