Take the full course at Webflow University: Figma to Webflow | Webflow University 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.
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
- Figma to Webflow: Introduction (Part 1 of 7)
- Figma to Webflow: Intro to Figma (Part 2 of 7)
- Figma to Webflow: Installing Octane for Cinema 4D (bonus lesson)
- Figma to Webflow: Cinema 4D & Octane essentials (Part 3 of 7)
- Figma to Webflow: Reduce noise from emissive textures in Octane (bonus lesson)
- Figma to Webflow: After Effects & Bodymovin — Figma to Webflow (Part 4 of 7)
- Figma to Webflow: Compositing & preparing website assets (bonus lesson)
- Figma to Webflow: Build a full site (Part 5 of 7)
- Figma to Webflow: Publish your site to a custom domain (Part 6 of 7)
- Figma to Webflow: Final notes (Part 7 of 7)