Maddy Beard (Flux)- Figma For Web Designers
What You Get:
Introduction
Welcome & Course Overview
Module 1: The Basics
Setting up your Figma account and creating a new project
Exploring the Figma interface: setting up pages for our website with frames
Module 2: Core Tools
Using basic shapes and tools: creating the website layout
Working with images: adding visuals to our homepage
Using masks: enhancing the visual design
Creating and using icons: adding interactive elements to our design
Module 3: Mastering Type & Color
Working with text: adding headlines and copy to our homepage
Choosing and applying colors: styling our homepage
Creating a color and typography style guide: ensuring consistency
Module 4: Components & Auto Layout
Creating components: designing reusable buttons for our site
Using Auto Layout for responsive elements: building a responsive header
Creating and managing components: building the product listing page
Boolean variable for button component (icon)
Making the page responsive, designing for different breakpoints
Design product detail page with learned skills
Module 5: Prototyping & Interactions
Creating basic prototypes: linking the homepage to the product listing page
Adding interactions and animations: enhancing the product detail page
Designing the shopping cart and checkout pages with learned skills
Cart overlay and animated pre-loader
Module 6: Collaborating, Sharing, & Exporting
Inviting team members and setting permissions: working collaboratively
Commenting and resolving feedback: reviewing our design
Sharing designs with developers: preparing for handoff
Exporting assets for the web: wrapping up the project
Module 7: Advanced Techniques & Tips
Building a design system: extending our project
Basics of Variables
Mobile & Mirror
Exploring useful Figma plugins: enhancing our workflow
Conclusion & Next Steps
Certification Assignment
Conclusion & next steps
