Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Figma for Web Designers
Introduction
Welcome & Course Overview (1:59)
Module 1: The Basics
Setting up your Figma account and creating a new project (5:05)
Exploring the Figma interface: setting up pages for our website with frames (7:59)
Module 2: Core Tools
Using basic shapes and tools: creating the website layout (10:03)
Working with images: adding visuals to our homepage (5:54)
Using masks: enhancing the visual design (4:36)
Creating and using icons: adding interactive elements to our design (11:47)
Module 3: Mastering Type & Color
Working with text: adding headlines and copy to our homepage (8:41)
Choosing and applying colors: styling our homepage (8:20)
Creating a color and typography style guide: ensuring consistency (7:29)
Module 4: Components & Auto Layout
Creating components: designing reusable buttons for our site (19:01)
Using Auto Layout for responsive elements: building a responsive header (22:14)
Creating and managing components: building the product listing page (30:40)
Boolean variable for button component (icon) (13:12)
Making the page responsive, designing for different breakpoints (6:58)
Design product detail page with learned skills (35:24)
Module 5: Prototyping & Interactions
Creating basic prototypes: linking the homepage to the product listing page (11:37)
Adding interactions and animations: enhancing the product detail page (28:05)
Designing the shopping cart and checkout pages with learned skills (28:14)
Cart overlay and animated pre-loader (9:52)
Module 6: Collaborating, Sharing, and Exporting
Inviting team members and setting permissions: working collaboratively (4:11)
Commenting and resolving feedback: reviewing our design (6:37)
Sharing designs with developers: preparing for handoff (4:12)
Exporting assets for the web: wrapping up the project (3:31)
Module 7: Advanced Techniques and Tips
Building a design system: extending our project (5:31)
Basics of Variables (6:47)
Multi-Editing (8:28)
Mobile & Mirror (12:23)
Exploring useful Figma plugins: enhancing our workflow (10:08)
Conclusion & Next Steps
Certification Assignment (0:31)
Conclusion & next steps (0:26)
Adding interactions and animations: enhancing the product detail page
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock