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

Complete Web Design from Figma to Webflow (New UI)

Write review

Udacity

Master AI & Data—50% Off Udacity (Code CC50)

GetSmarter

Most AI Pilots Fail to Scale. MIT Sloan Teaches You Why — and How to Fix It

Overview

Coursera Spring Sale

40% Off Coursera Plus Annual!

UPDATE: The latest update to this class was made Dec 2025. I keep all tutorial videos up-to-date to the latest versions of Figma and Webflow. If you notice any discrepancies just post in the Q&A and I'll get the update shipped.

TOOLS USED IN THIS CLASS:

Webflow - No-code website builder and CMS

Figma - Interface design tool

THIS IS A FOUR-PART WEB DESIGN CLASS

Part 1: Fundamentals of Good Design

Part 2: Design Practice

Part 3: Webflow Development

Part 4: Client Project

JOIN OUR STUDENT HANGOUT ON DISCORD:

We have Discord channel for students from this class. There you can chat directly with other students from the course, share content, exchange ideas, help each other with design, Figma, Webflow, and make friends.

You can join with this invite link.

Syllabus

Class Overview
What is Webflow?
Webflow Teaser
PART 1: SECRETS OF GOOD DESIGN
Getting started with Figma
Layout is King
Join our student hangout on Discord
Assignment: Alignment & Grid
Layout: Importance of Visual Hierarchy
Assignment: Visual Hierarchy
Layout: Beware of Optical Illusions
Layout: Proximity
How to Use Typography Beautifully
Typography: Typeface Comes With a Personality
Typography: Typeface Categories
Assignment: Typeface Personality
Typography: Setting type
Assignment: Setting type
Typography: Two fonts only
Typography: Where to find fonts
Assignment: Typeface Pairing
The Art of Color
Colors: Sampling Colors
Assignment: Sampling Colors
Colors: Fine-tuning Colors
Assignment: Fine-tuning Colors
Colors: Color hunting
Colors: Brand Colors
How to Use Photos to Create Mouthwatering Websites
Photos: Image Overlays
Assignment: Image Overlays
Photos: Cropping Techniques - Extreme Crop
Photos: Cropping Techniques - Soft Crop
Assignment: Photo Cropping
Photos: Rule of Thirds
Photos: Unbox it!
Photos: Pick photos Like a Pro
Photos: Where to Find Photos
Assignment: Finding Photos
6 Design Tricks Every Designer Should Know
Design Trick: Contrast
Design Trick: White Space
Design Trick: Repetition
Design Trick: Consistency
Design Trick: Overlapping
Assignment: Overlapping
Design Trick: Tension
Assignment: Tension
PART 2: PRACTICE DESIGN LIKE A PRO
The Mimic Method
The Biggest secret of designers - Inspiration
Assignment: Mood Board
Assignment: Figma Homepage Design
Chat App homepage design: Part 1
Chat App homepage design: Part 2
Chat App homepage design: Part 3
Chat App homepage design: Part 4
PART 3: WEB DEVELOPMENT (WEBFLOW)
Web Basics: Webflow designer
Web Basics: HTML and CSS
Web Basics: The Box model
Webflow: Element Hierarchy
Webflow: Section, Container, Div Block
Webflow: Size Settings
Webflow: Padding & Margins
Webflow: Web Typography
Webflow: Buttons & Links
Webflow: CSS Classes
Webflow vs Figma Sizes
Webflow: Images
Webflow: Float & Display
Webflow: Flexbox
Webflow: Debugging Checklist
Webflow: Navbar (Chat App)
Webflow: Hover
Webflow: Middle Section (Chat App)
Webflow: HTML tags
Webflow: Combo classes
Webflow: CTA section (Chat App)
Webflow: Footer (Chat App)
Intro to Responsive Web Design
Responsive: Hero Section - Tablet
Responsive: Hero Section - Mobile 1
Responsive: Hero Section - Mobile 2
Responsive: Nav Menu (Chat App)
Responsive: Overflow
Responsive: CTA Section (Chat App)
Responsive: Footer (Chat App)
Going Live: SEO (Chat App)
Going Live: Publishing (Chat App)
Going Live: Editor
PART 4: CLIENT PROJECT FROM START TO FINISH
Good Design Process
Client Project: Project brief
Client Project: Moodboard
Why Wireframing?
Figma styles
Figma components
Wireframe kit
Wireframes - Homepage Part 1
Wireframes - Homepage Part 2
Wireframes - Post Page
Wireframes - Blog Grid
TeamApp Homepage Design: Part 1
TeamApp Homepage Design: Part 2
TeamApp Homepage Design: Part 3
Blog Post Design
Blog Grid Design
Webflow Development 2
Webflow 2: Background styles
Webflow 2: Navbar (Team App)
Webflow 2: Hero content
Webflow 2: Forms
Webflow 2: Mockup section 1
Webflow 2: Mockup section 2
Webflow 2: Photo sections
Webflow 2: Slider Component
Webflow 2: Testimonial slider
Webflow 2: Positioning
Webflow 2: Slider arrows
Webflow 2: Footer (Team App)
Webflow 2: Footer form
Interactions: Breathing Life Into Your Website
Interactions: Card interaction
Interactions: Arrow interaction 1
Interactions: Arrow interaction 2
Responsive: Navbar (Team App)
Responsive: Hero section
Responsive: Mockup Section
Responsive: Body
Responsive: Testimonial & Footer
Blog & CMS: Going From Static to Dynamic Website
Blog & CMS: Webflow CMS
Blog & CMS: CMS Items
Blog & CMS: Collection page
Blog & CMS: Navbar & headline
Blog & CMS: Author block
Blog & CMS: Reference field
Blog & CMS: Object Fit
Blog & CMS: Main image
Blog & CMS: Rich Text
Blog & CMS: Author Block Bottom
Webflow Components
Blog & CMS: Responsive Post
Blog & CMS: Blog Homepage
Collection List
Blog & CMS: Pagination
Blog & CMS: Responsive Blog Page
Going Live: SEO & Publish
Going Live: Form submissions
Portfolio website
Portfolio website tour
Installing portfolio website
Finding work online
Finding work studios
Finding work networking
Finding work conclusion
Upwork overview
Tips 1-3: Getting your profile approved
Tips 4-9: Create a profile that attracts clients
Tips 10-12: Get the "best match" badge
Tips 13-14: Propose the right price
Tips 15-16: Be the freelancer they can't resist
Tips 17-22: Write damn good cover letters
Tips 23-25: Don't get yourself suspended
Tips 26-28: Don't get scammed
Pricing: How much do you charge?
Pricing: Hourly vs Fixed Rate
Proposal Template: Fixed Rate
Proposal Template: Hourly Rate
Freelance Contract
Selling Webflow to Clients
Intro to Advanced
Webflow: Custom Modal (Pop-Up)
Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
Going Live: Custom domain
Photoshop: How To Create a Stretch Crop
Photoshop: How to Cut Out an Image (Unboxing)
Photoshop: Stick Out Tutorial

Taught by

Vako S.

Reviews

4.8 rating at Skillshare based on 201 ratings

Start your review of Complete Web Design from Figma to Webflow (New UI)