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

Become UI/UX Designer in 2022, Complete Figma Web Design with Animation & Micro-Interaction, Learn by doing approach.

What you'll learn
Introduction to Latest Figma interface, tools & plugins
Learn why we use the latest feature like auto layout & master component
Learn How to read product briefly before approaching design
Learn professional techniques & shortcuts
Understand usage of Layout Grid
Learn how to design webpages & landing pages in Figma
Requirements
Any computer with the internet.
Description
UPDATED JUNE 2022Hello, 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. Here is what the course will cover:1. FIGMA BASICSFigma Shape ToolsGridLine & Arrow ToolsEllipse & Circle ToolsText & Typography2. THREE PILLARS OF FIGMAAutoLayout (with 5 examples)ComponentsVariants3. PROJECT-1 Ed-Tech Startup Website4. PROJECT-2 Travel Website5. PROJECT-3 Portfolio Design6. PROJECT-4 CryptoMoney Platform7. PROTOTYPE & ANIMATIONTRIGGER On Drag and While Hover Trigger ExplainedTRIGGER Mouse Enter & Leave and Touch Up & Down Trigger ExplainedTRIGGER after delay trigger ExplainedTRIGGER OnTap vs OnClick DifferenceACTION Basics with Navigate To ExplainedACTION Change To ExplainedACTION Open Overlay and Swap Overlay ExplainedACTION Open and Swap Overlay and Scroll To and Open Link Action ExplainedACTION Back and Close overlay Explained8. TRANSITION & EASING CURVETRANSITION Instant ExplainedTRANSITION Dissolve ExplainedTRANSITION Smart Animate ExplainedTRANSITION Move In and Move Out and Push ExplainedTRANSITION Slide In and Out ExplainedSmart Animate TickBezier Curve Basics and Linear Ease ExplainedEase In and Out ExplainedEase In and Out Back ExplainedAll Curves Explained by Creating Component9. PROJECT-5 Yoga Platform Web AppThis course consists of 5 projects in total:PROJECT-1 Ed-Tech Startup WebsitePROJECT-2 Travel WebsitePROJECT-3 Portfolio DesignPROJECT-4 CryptoMoney PlatformPROJECT-5 Yoga Platform Web AppAfter 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 Introduction & Explore Interface

Lecture 3 Figma Introduction

Lecture 4 Frame Introduction and Explanation

Lecture 5 Grid Explanation with Example

Lecture 6 Welcome To The Community

Lecture 7 Rectangle Tool with Colour Fill

Lecture 8 Difference Between Frame & Rectangle

Lecture 9 Line And Arrow Tool Explained

Lecture 10 Ellipse and Circle Tool

Lecture 11 Polygon and Star Tool

Lecture 12 Text & Typography Explained

Lecture 13 Other Remaining Tools

Lecture 14 Review & Resource

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

Lecture 15 Introduction

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

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

Lecture 18 AutoLayout Text BaseLine Alignment (Example 3)

Lecture 19 AutoLayout Absolute Positioning (Example 4)

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

Lecture 21 Component In Detail with Example

Lecture 22 Variants Explained with Example

Section 4: PROJECT 1 : EdTech Startup Website Design

Lecture 23 Product Brief Project 1

Lecture 24 EdTech Navbar Design

Lecture 25 EdTech HomePage Design & Explore Community

Lecture 26 ETech Course Detail Page Design

Lecture 27 EdTech Mentor Details Page

Lecture 28 EdTech Why To Join

Lecture 29 EdTech Footer Design

Lecture 30 Create Prototype And Sharable Link

Section 5: PROJECT 2 : Travel Agency Website Design

Lecture 31 Product Brief Project 2

Lecture 32 Design Travel Website Hompage

Lecture 33 Travel Activities Details Page

Lecture 34 Travel Activity Details Complete

Lecture 35 Fill Colour From Colour Palette

Lecture 36 Design Quotation Page

Lecture 37 Design Testimonial Page

Lecture 38 Testimonial Page Final

Lecture 39 Design Destination Page Image Gallery

Lecture 40 Design Travel Agency Footer

Section 6: PROJECT 3 : Portfolio Design

Lecture 41 Product Brief Project 3

Lecture 42 Design Portfolio Homepage with Creative Text

Lecture 43 Put Your Image and Logo

Lecture 44 Design Project Showcase Page

Lecture 45 Create Project Layout using Autolayout

Lecture 46 Design About Page

Lecture 47 Design Contact Page

Section 7: Publish Your Portfolio To BEHANCE

Lecture 48 Prepare Your Portfolio According to Behance Guideline

Lecture 49 Publish Your Portfolio To Behance

Section 8: How To Use Master Component, AutoLayout and Variants

Lecture 50 Master Component, AutoLayout, Variants Explained

Section 9: PROJECT 4 : CryptoMoney Platform Design

Lecture 51 Product Brief Project 4

Lecture 52 Design CryptoMoney Navbar

Lecture 53 Design CryptoMoney Homepage

Lecture 54 Design Custom Crypto Card

Lecture 55 Design Why To Use CryptoMoney

Lecture 56 Arrange Illustration

Lecture 57 Design Three Step Userflow

Lecture 58 Design CryptoMoney News Article Page

Lecture 59 Design Creative Footer

Section 10: ADVANCE FIGMA : Prototype and All Animation Explained

Lecture 60 Prototype Basics

Lecture 61 TRIGGER On Drag and While Hover Trigger Explained

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

Lecture 63 TRIGGER after delay trigger Explained

Lecture 64 TRIGGER OnTap vs OnClick Difference

Lecture 65 ACTION Basics with Navigate To Explained

Lecture 66 ACTION Change To Explained

Lecture 67 ACTION Open Overlay and Swap Overlay Explained

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

Lecture 69 ACTION Back and Close overlay Explained

Section 11: ADVANCE FIGMA : Transition and Easing Curve

Lecture 70 TRANSITION Instant Explained

Lecture 71 TRANSITION Dissolve Explained

Lecture 72 TRANSITION Smart Animate Explained

Lecture 73 TRANSITION Move In and Move Out and Push Explained

Lecture 74 TRANSITION Slide In and Out Explained

Lecture 75 Smart Animate Tick

Lecture 76 Bezier Curve Basics and Linear Ease Explained

Lecture 77 Ease In and Out Explained

Lecture 78 Ease In and Out Back Explained

Lecture 79 All Curves Explained by Creating Component

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

Lecture 80 Project 5 Product Brief

Lecture 81 HomePage HeroSection with Slide Image Animation

Lecture 82 HomePage Why To Join Yoga Classes

Lecture 83 HomePage Button To Navigate To The Course Page

Lecture 84 HomePage Membership Plan Details with Animation

Lecture 85 HomePage Footer With Dynamic Email Input

Lecture 86 CourseDetails Heading

Lecture 87 CourseDetails Cards with Hover Effect

Lecture 88 About Page Heading and Mission of Yoga Classes

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

Section 13: Bonus Section : Student Query Solutions

Lecture 90 Query 1

Section 14: More Upcoming Projects

Lecture 91 Upcoming Projects

Beginner Designers,UI/UX Freelancer want to transition to Figma,Newbies in the field of UI/UX design