All courses
Figma to Webflow
Login with your Webflow account to track your progress

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

In this course, we’ll use our tried-and-true workflow to create a website from scratch. We’ll start by iterating on low and mid-fidelity designs in Figma. Then, we’ll create and render 3D product assets in Cinema 4D and Octane. We’ll use After Effects to export them as Lottie JSON files — and build our landing page complete with animations and interactions in Webflow. Finally, we’ll tie it all together with a custom domain, then hit publish for the world to see!

Table of contents

1

Getting started

Coming soon

1

Introduction & overview
5:04
Introduction & overview
Coming soon

1

Web design in Figma
44:51
Web design in Figma
Coming soon

1

Bonus lesson: Install Octane for Cinema 4D
13:30
Bonus lesson: Install Octane for Cinema 4D
Coming soon

1

Industrial design in Cinema 4D
1:46:30
Industrial design in Cinema 4D
Coming soon

1

Bonus lesson: Reduce emissive texture noise
4:54
Bonus lesson: Reduce emissive texture noise
Coming soon

1

Web animation in After Effects
7:14
Web animation in After Effects
Coming soon

1

Bonus lesson: full asset preparation
58:16
Bonus lesson: full asset preparation
Coming soon

1

Recent updates to the Designer
01:49
Recent updates to the Designer
Coming soon

1

Web development in Webflow
2:04:11
Web development in Webflow
Coming soon

1

Connect a custom domain
9:46
Connect a custom domain
Coming soon

1

Review & final notes
4:31
Review & final notes
Coming soon

2

Additional layout learning

Additional layout learning
Additional layout learning
Coming soon

2

Quick Stack
5:32
Quick Stack
Coming soon

2

V Flex and H Flex
0:36
V Flex and H Flex
Coming soon

Progress

0%

Details

Beginner - Advanced
6h 27m
13
Lessons

Assets & links

Continue learning