Ultimate Figma Megacourse: Ui/Ux Design Beginner To Expert

Become UI/UX Designer in 2023. Use Figma to build career in UI Design, User Interface, User Experience design, UX Design

What you'll learn

How to start working with Figma as a UI/UX Designer.

How to use colours & images properly in user interface.

How to create your buttons, UI components and assets.

How to make micro interactions, page transitions & animated UI.

Work with fonts & colors while designing UI.

How to make fully interactive prototypes that feels like real website.

Best way to export project for development.

Requirements

Just need a copy of Free Figma account, a computer and an internet connection.

No previous knowledge needed in Figma.

No previous UX /UI Design experience is required.

And of course patience and a positive mindset.

Description

Build responsive real-world user interface designs in FigmaIf you're tired of stretching your head while using Figma. Then, this course is the complete guide to learning how to build amazing things in Figma. For absolute beginners — with hands-on exercises.Figma is a web-based graphics editing and user interface design app that works on your browser. That means you can access your projects from any device without installing software. It has collaboration facilities on the same file in real-time. So, your team can join you online taking the project from brainstorming to prototypes. Figma is not limited to UI design. It has the full potential to use as a daily graphics designing tool. By the end of this project, you will be able to use Figma with full potential.From this course, you learn,Navigation and Interface: Familiarize yourself with Figma's interface, including the different panels, menus, and shortcuts.Vector Graphics: Learn how to create and manipulate vector graphics in Figma, including shapes, paths, and vector networks.Layers and Frames: Understand how layers and frames work in Figma, including layer organization, frame creation, and layer styles.Components and Assets: Discover how to create and use components and assets to streamline your design workflow and maintain consistency.Prototyping: Learn how to create interactive prototypes in Figma using the built-in prototyping tools.Design Style: Understand the benefits of design style and how to create and maintain a design system.Collaboration and Sharing: Learn how to collaborate with other designers and stakeholders and share your designs with them.Plugins and Integrations: Explore Figma's extensive plugin library and how to integrate Figma with other tools in your workflow

Overview

Section 1: Getting started with FIGMA

Lecture 1 Creating an account

Lecture 2 Creating new file & introduction to the layout

Lecture 3 Layers tab, assets tab & pages

Lecture 4 Design, prototype & inspect tab

Section 2: Introduction to different tools & creating basic shapes

Lecture 5 Rectangle, line, arrow & ellipse tool

Lecture 6 Polygon & star shape tools & quick view settings

Lecture 7 Selection, move & scaling tool

Lecture 8 Image tool & quick recap

Section 3: Properties, Basic Editing and vector editing of shapes

Lecture 9 Basic and vector edits of rectangles

Lecture 10 Basic and vector edits of lines & arrows

Lecture 11 Basic and vector edits of ellipses

Lecture 12 Polygon and star tool

Lecture 13 Pen & pencil tool, bend tool & bezier curves

Lecture 14 Comment tool, hand tool and basics of text tool

Section 4: Frames, booleans & mask tool, first project

Lecture 15 Basics of frame tool

Lecture 16 Boolean groups

Lecture 17 Mask tool

Lecture 18 Image fill Vs masks with effects

Lecture 19 First project: Sliced Text Effect

Lecture 20 Common mistakes to look out for

Section 5: Alignment tools

Lecture 21 Alignment tools

Lecture 22 Space distribution, Quick rearrange handles & tidy up tool

Section 6: Quiz 01

Section 7: Grid system

Lecture 23 Understanding and first look

Lecture 24 How, why and when of the grid system

Lecture 25 Product page design with text baseline alignment

Section 8: Constraints, fixed while scrolling & demo the project

Lecture 26 Understanding constraints

Lecture 27 Understanding the settings & practical usage

Lecture 28 Fixed while scrolling

Lecture 29 Practical usage with a demo project

Section 9: Getting started with auto layout

Lecture 30 Understanding the basics

Lecture 31 Understanding the options & settings

Lecture 32 Deep dive part 1

Lecture 33 Deep dive part 2

Lecture 34 Deep dive part 3

Lecture 35 Deep dive part 4

Section 10: Practical examples & real-life usage using mock projects

Lecture 36 Mock project 1, 2, 3 & 4

Lecture 37 Mock project 5, 6, 7, 8 & 9

Lecture 38 Mock project 10 & 11

Lecture 39 Mock project 12

Lecture 40 Mock project 13

Lecture 41 Mock project 14, 15 & 16

Lecture 42 Latest features & useful shortcut

Section 11: Typography

Lecture 43 Understanding the terminology

Lecture 44 Intro to FIGMA text tool

Lecture 45 Text customisation options & shortcuts

Lecture 46 Paragraph controls, alignments, justifications, advanced & additional options

Section 12: Quiz 02

Section 13: Strokes, effects & Glass morphism effect

Lecture 47 Adding strokes

Lecture 48 Inner shadow & Drop shadow

Lecture 49 Layer Blur & Background Blur

Lecture 50 Glass morphism Project

Section 14: Intro to Wireframes

Lecture 51 Understanding the concept of a wireframe

Lecture 52 A walkthrough of creating a Wireframe

Lecture 53 Understanding the points of wireframing & key points to remember

Lecture 54 Sketching out the contact us page & a responsive versio

Section 15: From wireframes to the first draft

Lecture 55 Creating a low fidelity design

Lecture 56 Creating a navigation bar & header

Lecture 57 Creating the about us section

Lecture 58 Creating the sponsors & footer section

Section 16: Making a high-fidelity design from a low-fidelity design

Lecture 59 Designing the homepage

Lecture 60 Creating the footer section & understanding the design choices

Lecture 61 Creating a responsive version

Section 17: Intro to components & Rookie mistakes: Do's and Don'ts

Lecture 62 Do's & Don'ts

Lecture 63 Understanding by comparison

Lecture 64 Introduction to components

Lecture 65 Organic components & slash naming convention

Section 18: Quiz 03

Section 19: Components & instances: Deep dive

Lecture 66 Understanding Instances

Lecture 67 Understanding variants

Lecture 68 Instances & instance swaps

Lecture 69 Creating component sets

Section 20: Component properties

Lecture 70 Understanding component properties

Lecture 71 Properties Vs variants

Lecture 72 Integrating properties in previous component sets

Section 21: Prototyping in FIGMA

Lecture 73 What is prototyping & Making connections

Lecture 74 Making a prototype & different interactions

Lecture 75 Understanding overlays

Lecture 76 Overlays part 2

Section 22: Overflow behavior & scrolling

Lecture 77 Overflow behavior

Lecture 78 Full screen preview

Lecture 79 Splash screen animation

Lecture 80 Mock mailing app refresh animation

Lecture 81 Delete tap & drag interactions

Section 23: Plugins & widgets

Lecture 82 Widgets

Lecture 83 Plugins

Lecture 84 Plugins 2

Lecture 85 Plugins 3

Lecture 86 Plugins 4

Section 24: Quiz 04

Section 25: Creating a website design from scratch

Lecture 87 Design look & wireframe

Lecture 88 Type-scale, text styles & color styles

Lecture 89 Spacing system, frame selection, grid layout & top nav bar

Lecture 90 Creating the footer section

Lecture 91 Buttons

Lecture 92 Flip cards

Lecture 93 Review cards & interactive carousel

Lecture 94 Expanding page, support card & article card

Lecture 95 Creating vector designs

Lecture 96 Prototyping & final thoughts

Section 26: Quiz 05

Anyone who wants to start using Figma in their career or Expand the skill set in CV.,This course is for beginners, newbies & amateurs in the field of UI design.,Anyone wants to design their application, website or blog.