Figma for Web Designers
5h 31m 58s
English
Paid
May 22, 2024
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 Figma for Web Designers
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 |
Similar courses to Figma for Web Designers
The Beginner's Guide to Figma
Duration 24 minutes 19 seconds
Course
Motion Design with Figma: Animations, Motion Graphics, UX/UI
Duration 10 hours 11 minutes 31 seconds
Course
Mastering Figma
Duration 3 hours 37 minutes 49 seconds
Course
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
Duration 21 hours 31 minutes 53 seconds
Course
Design a Responsive Airbnb Website with Figma
Duration 11 hours 17 minutes 58 seconds
Course
UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Duration 31 hours 51 minutes 43 seconds
Course
Learn Figma - UI/UX Design Essential Training
Duration 3 hours 55 minutes 26 seconds
Course
Complete Web Design: from Figma to Webflow to Freelancing
Duration 19 hours 10 minutes 59 seconds
Course
Kickstart your UI/UX Design Career / DesignCourse UI/UX
Duration 16 hours 33 minutes 33 seconds
Course