Figma UI/UX Web Design & Animation with 5 Projects (2022)

  • Post category:design / Udemy
Figma UI/UX Web Design & Animation with 5 Projects (2022)

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.

Language: english

Note: 4.2/5 (252 notes) 18,769 students

Instructor(s): Ujjwal Singh

Last update: 2022-06-24

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 2022

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.


Here is what the course will cover:

1. FIGMA BASICS

  • Figma Shape Tools

  • Grid

  • Line & Arrow Tools

  • Ellipse & Circle Tools

  • Text & Typography


2. THREE PILLARS OF FIGMA

  • AutoLayout (with 5 examples)

  • Components

  • Variants


3. PROJECT-1 Ed-Tech Startup Website


4. PROJECT-2 Travel Website


5. PROJECT-3 Portfolio Design


6. PROJECT-4 CryptoMoney Platform


7. PROTOTYPE & ANIMATION

  • TRIGGER On Drag and While Hover Trigger Explained

  • TRIGGER Mouse Enter & Leave and Touch Up & Down Trigger Explained

  • TRIGGER after delay trigger Explained

  • TRIGGER OnTap vs OnClick Difference

  • ACTION Basics with Navigate To Explained

  • ACTION Change To Explained

  • ACTION Open Overlay and Swap Overlay Explained

  • ACTION Open and Swap Overlay and Scroll To and Open Link Action Explained

  • ACTION Back and Close overlay Explained


8. TRANSITION & EASING CURVE

  • TRANSITION Instant Explained

  • TRANSITION Dissolve Explained

  • TRANSITION Smart Animate Explained

  • TRANSITION Move In and Move Out and Push Explained

  • TRANSITION Slide In and Out Explained

  • Smart Animate Tick

  • Bezier Curve Basics and Linear Ease Explained

  • Ease In and Out Explained

  • Ease In and Out Back Explained

  • All Curves Explained by Creating Component


9. PROJECT-5 Yoga Platform Web App


This course consists of 5 projects in total:

PROJECT-1 Ed-Tech Startup Website

PROJECT-2 Travel Website

PROJECT-3 Portfolio Design

PROJECT-4 CryptoMoney Platform

PROJECT-5 Yoga Platform Web App


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-Interaction

  • Share 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.

 

Who this course is for

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

 

Course content

  • Introduction
    • Introduction
    • Course Overview
  • Figma Introduction & Explore Interface
    • Figma Introduction
    • Frame Introduction and Explanation
    • Grid Explanation with Example
    • Welcome To The Community
    • Rectangle Tool with Colour Fill
    • Difference Between Frame & Rectangle
    • Line And Arrow Tool Explained
    • Ellipse and Circle Tool
    • Polygon and Star Tool
    • Text & Typography Explained
    • Other Remaining Tools
    • Review & Resource
  • Three Pillars Of Figma: AutoLayout, Components and Variants (2022 Updated)
    • Introduction
    • AutoLayout Basics with Padding and Alignment Explained (Example 1)
    • AutoLayout Space Beween, Strokes, Canvas Stacking Explained (Example 2)
    • AutoLayout Text BaseLine Alignment (Example 3)
    • AutoLayout Absolute Positioning (Example 4)
    • AutoLayout Fill, Hug, Fixed Properties Explained (Example 5)
    • Component In Detail with Example
    • Variants Explained with Example
  • PROJECT 1 : EdTech Startup Website Design
    • Product Brief Project 1
    • EdTech Navbar Design
    • EdTech HomePage Design & Explore Community
    • ETech Course Detail Page Design
    • EdTech Mentor Details Page
    • EdTech Why To Join
    • EdTech Footer Design
    • Create Prototype And Sharable Link
  • PROJECT 2 : Travel Agency Website Design
    • Product Brief Project 2
    • Design Travel Website Hompage
    • Travel Activities Details Page
    • Travel Activity Details Complete
    • Fill Colour From Colour Palette
    • Design Quotation Page
    • Design Testimonial Page
    • Testimonial Page Final
    • Design Destination Page Image Gallery
    • Design Travel Agency Footer
  • PROJECT 3 : Portfolio Design
    • Product Brief Project 3
    • Design Portfolio Homepage with Creative Text
    • Put Your Image and Logo
    • Design Project Showcase Page
    • Create Project Layout using Autolayout
    • Design About Page
    • Design Contact Page
  • Publish Your Portfolio To BEHANCE
    • Prepare Your Portfolio According to Behance Guideline
    • Publish Your Portfolio To Behance
  • How To Use Master Component, AutoLayout and Variants
    • Master Component, AutoLayout, Variants Explained
  • PROJECT 4 : CryptoMoney Platform Design
    • Product Brief Project 4
    • Design CryptoMoney Navbar
    • Design CryptoMoney Homepage
    • Design Custom Crypto Card
    • Design Why To Use CryptoMoney
    • Arrange Illustration
    • Design Three Step Userflow
    • Design CryptoMoney News Article Page
    • Design Creative Footer
  • ADVANCE FIGMA : Prototype and All Animation Explained
    • Prototype Basics
    • TRIGGER On Drag and While Hover Trigger Explained
    • TRIGGER Mouse Enter & Leave and Touch Up & Down Trigger Explained
    • TRIGGER after delay trigger Explained
    • TRIGGER OnTap vs OnClick Difference
    • ACTION Basics with Navigate To Explained
    • ACTION Change To Explained
    • ACTION Open Overlay and Swap Overlay Explained
    • ACTION Open and Swap Overlay and Scroll To and Open Link Action Explained
    • ACTION Back and Close overlay Explained
  • ADVANCE FIGMA : Transition and Easing Curve
    • TRANSITION Instant Explained
    • TRANSITION Dissolve Explained
    • TRANSITION Smart Animate Explained
    • TRANSITION Move In and Move Out and Push Explained
    • TRANSITION Slide In and Out Explained
    • Smart Animate Tick
    • Bezier Curve Basics and Linear Ease Explained
    • Ease In and Out Explained
    • Ease In and Out Back Explained
    • All Curves Explained by Creating Component
  • PROJECT 5 : ProYoga Buddy Web App Design With Animation and Micro-Interactions
    • Project 5 Product Brief
    • HomePage HeroSection with Slide Image Animation
    • HomePage Why To Join Yoga Classes
    • HomePage Button To Navigate To The Course Page
    • HomePage Membership Plan Details with Animation
    • HomePage Footer With Dynamic Email Input
    • CourseDetails Heading
    • CourseDetails Cards with Hover Effect
    • About Page Heading and Mission of Yoga Classes
    • Connect All Pages and Final Touch to ProYoga Buddy Web App
  • Bonus Section : Student Query Solutions
    • Query 1
  • More Upcoming Projects
    • Upcoming Projects

 

Figma UI/UX Web Design & Animation with 5 Projects (2022)Figma UI/UX Web Design & Animation with 5 Projects (2022)

Time remaining or 696 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate