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