Figma Ui/Ux Web Design & Animation With 5 Projects (2022)

Become UI/UX Designer in 2022, Complete Figma Web Design with Animation & Micro-Interaction, From beginner to advanced.

What you'll learn

Learn to build amazing real-world projects for various industries according to the latest design trends (2022).

Master one of the highest-paying skills step by step from basics to advanced and become a UI/UX designer (high demand in the market).

This course includes all assets, design source files, and slides at the end of the project. You can customize them for your own portfolio.

Master Prototype, Animation, Transition, Micro-Interaction, and Interactive Components using Autolayout and Variants (multiple examples and use cases).

Learn about grids and breakpoints for multiple screen sizes.

Master colour theory and colour harmony with a colour palette.

Master the principles of typography for UI/UX design.

Learn about boolean operations, gradients, effects, masking, and strokes.

Learn about auto-layout, components, and variants with practical examples.

Learn how to create custom icons and vector shapes with the help of the pen and pencil tools.

Learn how to create a design system along with projects.

Learn how to use various Figma plugins to enhance your design workflow.

Master professional workflow tricks and keyboard shortcuts that take years to learn.

Requirements

No design experience is required. You will learn everything from scratch.

No previous design software skills are needed.

Description

Hello, Creative Minds,Figma is a free, online UI tool to create, collaborate, prototype, and hand off. It’s currently the industry’s leading interface design tool and companies such as Notion, Zoom, Uber are using Figma.In this course, you will learn the process of web design in Figma, which starts at the product brief and ends with a beautiful design.We will start everything from scratch and I will share all the techniques and shortcuts that increase your workflow.I have shared resources for your inspiration so you can design a website for any industry/domain easily.You are requested to follow the course and start working in Figma in parallel. After taking this course, you will be able to Create trending websites with a clean & modern look from scratch.Create system design of the product side by side.Translate client product brief into the actual design.Publish your projects to Behance with the correct guideline.Use latest features like AutoLayout, master components, variants, global style.Create Complete Web App with Animation and Micro-InteractionShare your design with your team & friends.This course is specifically aimed at beginners to advance to help them get proficient in Figma.All source design files are included at the end of the project.See you inside the courses! Have a great journey ahead.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Course Overview

Section 2: Figma Interface Intro & Grid with Breakpoints

Lecture 3 Download Figma

Lecture 4 Figma Interface Introduction and Frame Explained

Lecture 5 Grid and Type Of Grid with Example

Lecture 6 Device Breakpoints for Mobile Tablet and Desktop Screens

Lecture 7 Welcome To The Community

Section 3: COLOR THEORY : Color Harmony, Color Models, Color Palette

Lecture 8 Color Theory And Color Harmony Explained with Example

Lecture 9 Solid Colors, Gradients and Image Manipulation

Lecture 10 How To Generate Amazing Color Palette with Plugin

Lecture 11 How to Save Plugin and Use EyeDropper Tool

Lecture 12 Review & Resource

Section 4: Stroke, Effects & Export in Figma

Lecture 13 Stroke Explained

Lecture 14 Effects - Drop Shadow and Inner Shadow Explained

Lecture 15 Effects - Layer Blur and Background Blur Explained with Example

Lecture 16 Export Explained with Example

Section 5: Shape Tools (Rectangle, Line, Arrow, Ellipse, Circle, Polygon & Star Tools)

Lecture 17 Shapes - Rectangle Explained

Lecture 18 Line and Arrow Tools Explained with Example

Lecture 19 Ellipse and Circle (Sweep,Ratio) Explained

Lecture 20 Polygon and Star Tool

Lecture 21 Directly place the image inside the object

Section 6: Alignment Tool, Boolean Operation and Vector Shapes with Pen Tool

Lecture 22 Alignment Tools Explained

Lecture 23 Create Vector Shapes with Pen Tool & Pencil Tool

Lecture 24 Boolean Operation with Shapes

Section 7: TYPOGRAPHY PRINCIPLES: Typography Rule and Text Tool

Lecture 25 Text and Typography Theory - Serif and Sans Serif Typefaces

Lecture 26 Text and Typography Tool in Figma

Section 8: Three Pillars Of Figma: AutoLayout, Components and Variants (2022 Updated)

Lecture 27 Introduction

Lecture 28 AutoLayout Basics with Padding and Alignment Explained (Example 1)

Lecture 29 AutoLayout Space Beween, Strokes, Canvas Stacking Explained (Example 2)

Lecture 30 AutoLayout Text BaseLine Alignment (Example 3)

Lecture 31 AutoLayout Absolute Positioning (Example 4)

Lecture 32 AutoLayout Fill, Hug, Fixed Properties Explained (Example 5)

Lecture 33 Component In Detail with Example

Lecture 34 Variants Explained with Example

Section 9: PROJECT 1 : EdTech Startup Website Design

Lecture 35 Project 1 Introduction

Lecture 36 EdTech Navbar Design

Lecture 37 EdTech HomePage Design & Explore Community

Lecture 38 ETech Course Detail Page Design

Lecture 39 EdTech Mentor Details Page

Lecture 40 EdTech Why To Join

Lecture 41 EdTech Footer Design

Lecture 42 Create Prototype And Sharable Link

Section 10: PROJECT 2 : Travel Agency Website Design

Lecture 43 Project 2 Introduction

Lecture 44 Travel Agency HomePage Design with Searchbar

Lecture 45 Travel Website Activities Page Design

Lecture 46 How To Choose Color Scheme For The Project

Lecture 47 Travel Activities Page Final Color Fill

Lecture 48 Quote Page

Lecture 49 Client Testimonial Page Design

Lecture 50 Image Gallery with nested AutoLayout

Lecture 51 Travel Agency Footer Design

Lecture 52 Connect All The Pages & Prototype

Section 11: PROJECT 3 : UI/UX Designer Portfolio Design

Lecture 53 Project 3 Introduction

Lecture 54 About Page Design

Lecture 55 Work Showcase Page Design

Lecture 56 Blog Page Design

Lecture 57 Contact Page Design

Lecture 58 Join The All Pages and Upload the Portfolio To BEHANCE

Section 12: PROJECT 4 : CryptoMoney Platform Design

Lecture 59 Project 4 Introduction

Lecture 60 Design CryptoMoney Navbar

Lecture 61 Design CryptoMoney Homepage

Lecture 62 Design Custom Crypto Card

Lecture 63 Design Why To Use CryptoMoney

Lecture 64 Arrange Illustration

Lecture 65 Design Three Step Userflow

Lecture 66 Design CryptoMoney News Article Page

Lecture 67 Design Creative Footer

Section 13: ADVANCE FIGMA : Prototype and All Animation Explained

Lecture 68 Prototype Basics

Lecture 69 TRIGGER On Drag and While Hover Trigger Explained

Lecture 70 TRIGGER Mouse Enter & Leave and Touch Up & Down Trigger Explained

Lecture 71 TRIGGER after delay trigger Explained

Lecture 72 TRIGGER OnTap vs OnClick Difference

Lecture 73 ACTION Basics with Navigate To Explained

Lecture 74 ACTION Change To Explained

Lecture 75 ACTION Open Overlay and Swap Overlay Explained

Lecture 76 ACTION Open and Swap Overlay and Scroll To and Open Link Action Explained

Lecture 77 ACTION Back and Close overlay Explained

Section 14: ADVANCE FIGMA : Transition and Easing Curve

Lecture 78 TRANSITION Instant Explained

Lecture 79 TRANSITION Dissolve Explained

Lecture 80 TRANSITION Smart Animate Explained

Lecture 81 TRANSITION Move In and Move Out and Push Explained

Lecture 82 TRANSITION Slide In and Out Explained

Lecture 83 Smart Animate Tick

Lecture 84 Bezier Curve Basics and Linear Ease Explained

Lecture 85 Ease In and Out Explained

Lecture 86 Ease In and Out Back Explained

Lecture 87 All Curves Explained by Creating Component

Section 15: PROJECT 5 : ProYoga Buddy Web App Design With Animation and Micro-Interactions

Lecture 88 Project 5 Product Brief

Lecture 89 HomePage HeroSection with Slide Image Animation

Lecture 90 HomePage Why To Join Yoga Classes

Lecture 91 HomePage Button To Navigate To The Course Page

Lecture 92 HomePage Membership Plan Details with Animation

Lecture 93 HomePage Footer With Dynamic Email Input

Lecture 94 CourseDetails Heading

Lecture 95 CourseDetails Cards with Hover Effect

Lecture 96 About Page Heading and Mission of Yoga Classes

Lecture 97 Connect All Pages and Final Touch to ProYoga Buddy Web App

Section 16: More Upcoming Projects

Lecture 98 Upcoming Projects

Anyone who wants to become a UI/UX designer and get paid for their user experience design skills.,This course is designed for beginners, those who are new to the UI/UX field or design field.,People who are transitioning to Figma from other design software or careers.,Those who want to gain UI/UX skills to become freelancers, work as designers in a company, or want to design their own entrepreneurial projects.