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.
In this lesson, we’re going to go through a process we use internally all the time: we’ll be using Figma collaboratively to design and iterate upon all the stuff that’s going to make our project go from no-fidelity, low-fidelity, and finally, mid-fidelity.
Share your progress #figmatowebflow on social media and here on this topic in the forum.
00:00 — Introduction
00:17 — Magic of Post Production
02:00 — Adding shapes and text into your Frame
02:38 — Moving and aligning content
03:36 — Scaling and sizing
03:58 — Duplicating for faster iterations
09:25 — Quickly duplicating sections
21:32 — Creating the mid-fidelity design
39:05 — Evolution of design iterations
40:36 — Share your progress
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)
