Here is the step-by-step guide where you find what you learn during the course
Design
Understand: What is Figma? How it is work? How to start?
Understand: Toolbar, menu, property bar and layers. Create and manage pages, create frames, dimensions for web and mobile apps.
Understand: Types of websites, Parts of website, and Type of pages.
Understand: What is layout? What is grid? What is 12 columns grid? How to use 12 columns grid?
Figma: Create 12 columns grid and use of the grid. Layout basics and common structures.
Understand: What is typography? What is the basic elements of typography?
Figma: Basics of typography. Create variables / re-usable components i.e. Titles, Labels, Text etc. with typography.
Understand: What is iconography? Types of icon? Best practices to use iconography.
Figma: Understand difference between SVG and PNG icons. Import & export icons.
Understand: What is color-palette? Best practices for use of colors.
Figma: Create variables of colors.
Understand: What is imagery?
Figma: Import & export images.
Understand: Layout measurements of mobile UI design. Components of mobile UI.
Figma: Understand flows, create screens and use 4 column grids.
- Re-usable components
- Component variations
- Buttons & form-fields
- Image thumbnails
- Layout management, auto-layouts
- Micro-animations
- Short-cuts
- Dark mode
- Plugins
- Design presentation.
- Export mock-ups.
Understand: What is wire-framing? How many types of wireframe? Where and when to use wireframes?
Figma: How to create high-fidelity wireframes?
Understand: What is prototyping? Types of prototypes.
Figma: How to create low, mid and high-fidelity interactive prototype? Share or present Figma prototypes.
Understand: What is responsive design? How to plan responsive design?
Figma: Create mobile version. Best practices of responsive design.
