Maddy Beard – Figma For Web Designers

Unlock the True Power of Figma for Web Design

is this you?

you are…

• Unsure about how to improve your Figma skills?
• Overwhelmed by Figma’s rich set of features?
• Seeking a fast-track Figma course for web design?
• Working inefficiently and wasting time?
• Sick of trying to figure out the right way on your own?
• Looking for shortcuts to speed up your workflows?
• Seeking personalized expert feedback on your work?
• Looking for a recognized certification to prove your skills?

What You’ll Learn In Figma For Web Designers?

Module 1: Introduction

1. Welcome & Course Overview (1:59)

Module 2: The Basics

1. Setting up your Figma account and creating a new project (5:05)
2. Exploring the Figma interface: setting up pages for our website with frames

Module 3: Core Tools

1. Using basic shapes and tools: creating the website layout (10:03)
2. Working with images: adding visuals to our homepage (5:54)
3. Using masks: enhancing the visual design (4:36)
4. Creating and using icons: adding interactive elements to our design (11:47)

Module 4: Mastering Type & Color

1. Working with text: adding headlines and copy to our homepage (8:41)
2. Choosing and applying colors: styling our homepage (8:20)
3. Creating a color and typography style guide: ensuring consistency (7:29)

Module 5: Components & Auto Layout

1. Creating components: designing reusable buttons for our site (19:01)
2. Using Auto Layout for responsive elements: building a responsive header (22:14)
3. Creating and managing components: building the product listing page (30:40)
4. Boolean variable for button component (icon) (13:12)
5. Making the page responsive, designing for different breakpoints (6:58)
6. Design product detail page with learned skills (35:24)

Module 6: Prototyping & Interactions

1. Creating basic prototypes: linking the homepage to the product listing page (11:37)
2. Adding interactions and animations: enhancing the product detail page (28:05)
3. Designing the shopping cart and checkout pages with learned skills (28:14)
4. Cart overlay and animated pre-loader (9:52)

Module 7: Collaborating, Sharing, & Exporting

1. Inviting team members and setting permissions: working collaboratively (4:11)
2. Commenting and resolving feedback: reviewing our design (6:37)
3. Sharing designs with developers: preparing for handoff (4:12)
4. Exporting assets for the web: wrapping up the project (3:31)

Module 8: Advanced Techniques & Tips

1. Building a design system: extending our project (5:31)
2. Basics of Variables (6:47)
3. Mobile & Mirror (12:23)
4. Exploring useful Figma plugins: enhancing our workflow (10:08)

Module 9: Conclusion & Next Steps

1. Certification Assignment (0:31)
2. Conclusion & next steps (0:26)

More courses from the same author: Maddy Beard