Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Figma to Webflow - Complete Website Tutorial

Flux Academy via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to transform a Figma design into a fully functional Webflow website in this comprehensive tutorial. Follow along as the instructor guides you through the entire process, from exporting assets from Figma to setting up the project in Webflow. Master essential techniques such as creating sections and containers, building a responsive hero section, implementing navigation, applying background gradients, and ensuring responsiveness across devices. Discover how to add engaging animations, design content sections, utilize blend modes for visual interest, and integrate a newsletter form. Gain practical skills in web design and development while bridging the gap between design tools and website builders.

Syllabus

Introduction
- Exporting from Figma
- Project setup
-Section & Container setup
- Building the Hero
- Add Navigation
- Background Gradients
- Responsiveness
- Add animations
- Content sections
- Blend modes
- Newsletter form

Taught by

Flux Academy

Reviews

Start your review of Figma to Webflow - Complete Website Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.