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
Over the last few years major shifts in culture and technology have brought in immense demand for skillful designers. Companies like Apple have made design and user experience a standard that customers now take for granted, which means clients are more willing than ever to invest in good design. As technology made starting a business easier, there are now more business then ever in history in need of a good design to help their business grow and succeed. The same technology and internet allows us as designers to learn and work independently of where we are in the world, giving us more opportunities than ever to finally make a living doing work that is meaningful and enjoyable alongside supporting our lifestyles and families. We're excited to help you on your journey to make the most of this incredible point in history.

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