Figma for Web Designers

5h 31m 58s
English
Paid

Course description

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.

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Welcome & Course Overview 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering Figma

Mastering Figma

Sources: leveluptutorials
This video is about Mastering Figma Introduction. Figma has similar uses to adobe XD and I'll be bringing you more videos to go more in-depth on how to use.
3 hours 37 minutes 49 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind

Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 seconds
Beginner Figma Video Course

Beginner Figma Video Course

Sources: Andrija Prelec
There is no better place to start learning design than the most popular design application! Learn by doing and begin or enhance your knowledge in Figma.
3 hours 22 minutes 35 seconds
The Beginner's Guide to Figma

The Beginner's Guide to Figma

Sources: egghead
Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices.
24 minutes 19 seconds