Take the full course at Webflow University: https://university.webflow.com/figma-to-webflow with access to all assets or to clone the completed Webflow project.
Now that we have our wireframe designs and 3D assets, we’ll now build our site in Webflow. We use our Figma wireframe design and 3D Lottie files to build out the site in Webflow with rich interactions to engage our customers.
Share your progress #figmatowebflow on social media and here on this topic in the forum.
In this lesson, we’ll build these parts of our website:
00:00:00 — Introduction
00:02:36 — Hero section with a responsive background image
00:28:14 — Navigation bar (navbar) including our logo
00:41:37 — Product features section using classes & Webflow Interactions
01:18:40 — Featured logos section using CSS grid
01:24:15 — Contact us featuring a Form block
01:31:09 — Footer with links and more grids
01:48:38 — Accessibility check
Course discussion
Lesson discussions
- 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)