CF

Figma for Web Designers

5h 31m 58s
English
Paid

If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects…

Then this course is your golden ticket to web design mastery using Figma.

We've joined forces with Maddy Beard, a seasoned instructor at Flux Academy. Maddy's expertise has guided tens of thousands of designers worldwide, including for top brands like Adobe, Webflow, Loom, and more. Plus, she makes learning an absolute blast!

And as you know, at Flux Academy, we don't "just" publish courses...

Our courses strive to offer you a complete experience to help you master skills quickly and effectively.

About the Author: Flux Academy (Ran Segall)

Flux Academy (Ran Segall) thumbnail

Flux Academy is the online design school founded by Ran Segall, an Israeli designer behind the popular Flux YouTube channel. The school focuses on the freelance-designer career path — covering both the design craft itself and the business side of running a design freelance practice.

The CourseFlix listing carries two Flux Academy courses: The Webflow Masterclass — Learn How to Build Websites with Webflow and Figma for Web Designers. Together the courses cover the design-and-build toolchain that lets designers ship working websites without depending on a separate developer.

Material is paid and aimed at designers building working web design fluency. For broader content, see CourseFlix's UI/UX Design and Webflow category pages.

Watch Online 30 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 30 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome & Course Overview
All Course Lessons (30)
#Lesson TitleDurationAccess
1
Welcome & Course Overview Demo
02:00
2
Setting up your Figma account and creating a new project
05:06
3
Exploring the Figma interface: setting up pages for our website with frames
08:00
4
Using basic shapes and tools: creating the website layout
10:04
5
Working with images: adding visuals to our homepage
05:55
6
Using masks: enhancing the visual design
04:37
7
Creating and using icons: adding interactive elements to our design
11:48
8
Working with text: adding headlines and copy to our homepage
08:42
9
Choosing and applying colors: styling our homepage
08:21
10
Creating a color and typography style guide: ensuring consistency
07:30
11
Creating components: designing reusable buttons for our site
19:02
12
Using Auto Layout for responsive elements: building a responsive header
22:15
13
Creating and managing components: building the product listing page
30:41
14
Boolean variable for button component (icon)
13:13
15
Making the page responsive, designing for different breakpoints
06:59
16
Design product detail page with learned skills
35:25
17
Creating basic prototypes: linking the homepage to the product listing page
11:38
18
Adding interactions and animations: enhancing the product detail page
28:06
19
Designing the shopping cart and checkout pages with learned skills
28:15
20
Cart overlay and animated pre-loader
09:53
21
Inviting team members and setting permissions: working collaboratively
04:12
22
Commenting and resolving feedback: reviewing our design
06:37
23
Sharing designs with developers: preparing for handoff
04:13
24
Exporting assets for the web: wrapping up the project
03:32
25
Building a design system: extending our project
05:32
26
Basics of Variables
06:48
27
Mobile & Mirror
12:24
28
Exploring useful Figma plugins: enhancing our workflow
10:09
29
Certification Assignment
00:34
30
Conclusion & next steps
00:27
Unlock unlimited learning

Get instant access to all 29 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course is designed for individuals who have a basic understanding of web design principles. Familiarity with design software is beneficial, though not mandatory, as the course begins with setting up your Figma account and creating a new project. No prior experience with Figma itself is required, making it accessible to those new to this specific tool.
What types of projects will I work on during the course?
Throughout the course, you will design a complete website. This involves creating a homepage layout, designing product listing and detail pages, and developing shopping cart and checkout pages. You'll also learn to make your designs responsive and create interactive elements like buttons and animations, culminating in a fully interactive prototype.
Who is the target audience for this course?
This course is aimed at web designers seeking to enhance their skills using Figma. Whether you are a beginner wanting a structured introduction or an experienced designer looking to refine your workflow, the lessons offer valuable insights. The course is particularly beneficial for those who wish to work more collaboratively with developers and other team members.
How does this course compare in scope to other web design courses?
The course offers a focused exploration of Figma specifically for web design, covering everything from basic interface navigation to advanced prototyping and collaboration tools. Unlike broader web design courses, this course intensively covers the use of Figma features like Auto Layout, creating components, and building a design system, providing a specialized skill set for web design.
What is the time commitment required for this course?
The course consists of 30 lessons. While the total runtime is not specified, students should expect to dedicate several hours per week to complete the lessons, practical exercises, and the final certification assignment. The actual time may vary depending on the learner's previous experience and personal learning pace.
What tools or platforms does the course focus on?
The course focuses exclusively on Figma as the primary design tool. It covers setting up projects, creating components, responsive design techniques, and using Figma's prototyping and collaboration features. Additionally, the course explores useful Figma plugins to further enhance the workflow.
What topics or skills are not covered in this course?
The course does not cover aspects outside of Figma's application to web design, such as coding or the use of other design tools. While it prepares designs for handoff to developers, it does not delve into front-end development or the integration of designs into live websites.