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
0:00
/ #1: Welcome & Course Overview
All Course Lessons (30)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
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
Figma design system - Figma UI kit and style variables
Sources: Adham Dannaway
The lightweight and powerful design system of Figma and UI kit will help you develop almost any website or application you can imagine.
Advanced Figma Video Course + Let's Design Together Add-on
Sources: Andrija Prelec
Become a master of Figma and soar up the career ladder in design. The course is filled with real tips and tricks from a senior product designer with...
20 hours 58 minutes 42 seconds
Learn Figma - UI/UX Design Essential Training
Sources: udemy
Figma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a w
3 hours 55 minutes 26 seconds
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