Figma to Webflow

Start off the year with a 21-day portfolio challenge

Beginner – Advanced
6 hr 14 mins

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!

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

Pause the background video
Webflow is free for students and educators
Learn more & apply

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0
%

Completed

0
of
10

Lessons done

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!

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Getting started

Figma to Webflow

10
Lessons
Getting started
Getting started

Introduction & overview

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.

Web design in Figma

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.

Bonus lesson: Install Octane for Cinema 4D

Industrial design in Cinema 4D

This lesson is a primer on how to use Cinema 4D to model and animate 3D designs of our fictional carbonated water bottle product. We then add the surface textures and light our 3D design with Octane Render.

Bonus lesson: Reduce emissive texture noise

Web animation in After Effects

After generating our 3D product renders in Cinema 4D and Octane, we then convert them to JSON Lottie files — animated designs we can use on our website — using After Effects and the Bodymovin’ plugin.

Web development in Webflow

Now that we have our wireframe designs and 3D assets, we can 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.

Connect a custom domain

Now that we have our site built in Webflow, it is time to publish the site to a custom domain. We run through the process of setting up your custom domain with Webflow.

Review & final notes

In this lesson, we bring together all of the elements of this design workflow, and underscore some of the nuances to help you refine your own design workflow.

Requirements

Per lesson:

Lesson 2:
Figma (or similar tool like Adobe XD, Sketch, Photoshop, Illustrator, or pen and paper)

Lesson 3:

Maxon Cinema 4D - link
Octane render - link

Lesson 4:
Adobe After Effects

Lesson 5:
Figma (or similar tool like Adobe XD, Sketch, Photoshop, Illustrator, or pen and paper) - link
Maxon Cinema 4D - link
Octane render - link
Adobe After Effects
Webflow

Lesson 6:
Webflow

Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

Related courses

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.