Designing With Figma: Your Start To Ui/Ux

Use Figma to build skills in UI/UX design, web design, and create projects that prepare you for your design career

What you'll learn

Start designing amazing websites with Figma from scratch

Learn essential UI/UX tools and techniques in Figma

Create fully interactive prototypes and micro-interactions

Build moodboards, color palettes, and choose the right typography

Learn to design wireframes, responsive layouts, and style guides

Craft custom icons, buttons, and other UI elements

Dive into components, autolayouts, constraints, and variants

Create amazing animations, micro-interactions, and page transitions

Export assets professionally and share designs with clients or developers

Complete a design project from briefing to final handoff

Discover plugins and resources to speed up your workflow

Learn how to pitch your work and land your first design client or job

Access downloadable Figma files, shortcuts, and helpful resources

Requirements

A computer with an internet connection

A free Figma account, which is easy to set up

No prior design experience is required—this course is perfect for beginners

Description

This course is constantly updated with new lessons and resources to keep you on top of the latest trends and techniques in UI/UX design!Are you ready to dive into the world of UI/UX design and bring your creative ideas to life ? Well Hi! If you’ve ever wondered how to create beautiful, user-friendly websites and apps, you’re in the right place. As this course is perfect for beginners who want to start a career in UI/UX design or refine their web design skills. Whether you're new to design or want to master Figma, this step-by-step guide will take you from the basics to advanced techniques.We’ll start by understanding UI/UX design—what it is, why it matters, and how it affects user experience. Then, you’ll dive into practical skills like:Wireframing and prototyping: Learn how to plan, create, and visualize your designs.Autolayout: Build responsive designs with ease.Components & Variants: Create reusable design elements to streamline your workflow.Micro-interactions: Add delightful, small animations to enhance user experience.Design Systems: Organize your design process for consistency and efficiency.Color Palettes & Typography: Choose the right colors and fonts to make your designs stand out.Custom Icons & UI Components: Craft unique elements that reflect your design style.Plugins: Use free tools to boost your design workflow.Collaboration: Learn how to share designs with clients and developers effectively.Exporting Files: Prepare your designs for development and client handoff.Throughout the course, you'll work on assignments to build your skills and create a portfolio-ready design. You'll gain confidence in creating UI/UX projects, share your work with developers, and collaborate with others. By the end of the course, you’ll have practical knowledge of Figma and a deep understanding of UI/UX design principles to help you take on real-world design challenges.No prior experience is needed—just bring your enthusiasm to learn. You’ll also have access to downloadable resources, Figma files, and helpful tips along the way. Start your UI/UX design journey with Figma today and take the first step towards your design career!

Overview

Section 1: Introduction

Lecture 1 Sneak Peek into the Course

Lecture 2 What is UI/UX?

Lecture 3 Why & What is Figma?

Section 2: Starting with figma

Lecture 4 Installing Figma

Lecture 5 Custom Brief

Lecture 6 Task Flow vs User Flow

Lecture 7 Project 01

Section 3: Wireframing

Lecture 8 Adding Our First Pages

Lecture 9 Project 02

Lecture 10 Shapes & Text

Lecture 11 Plugins

Lecture 12 Pen Tool (Lv1)

Lecture 13 Frames vs Groups

Lecture 14 Completing the Wirefrme

Lecture 15 Project 03

Section 4: Prototyping (Level 01)

Lecture 16 Transition Between Pages

Lecture 17 Project 04

Lecture 18 Introduction to Smart Animation

Lecture 19 Project 05

Section 5: Assets before Final designing

Lecture 20 Multiple Pages

Lecture 21 Columns vs Rows

Lecture 22 Moodboards

Lecture 23 Project 06

Lecture 24 Color Palette

Lecture 25 Project 07

Lecture 26 Typography

Section 6: Images in Figma

Lecture 27 Gradients

Lecture 28 Mask Tool in Figma

Lecture 29 Styles in Figma

Section 7: Auto Layouts

Lecture 30 Auto Layouts and Constraints

Lecture 31 Responsive Designing

Section 8: Scrolling effect

Lecture 32 Scrolling in Fgma

Lecture 33 Custom Icons with Shapes

Section 9: Components and Varients

Lecture 34 Components in Figma

Lecture 35 Variants for Components

Section 10: Micro Interactions

Lecture 36 Loading Animation

Lecture 37 Burger Menu

Section 11: Prototyping (Level 02)

Lecture 38 Slideshow Animation

Lecture 39 Custom Bezier

Section 12: Effects to Enhance

Lecture 40 Effects in Figma

Section 13: Pop-Up / Overlay Animation

Lecture 41 Pop-Up animation

Lecture 42 Custom Pop-Up Placement

Section 14: Pen Tool (Level 2)

Lecture 43 Drawing in Figma

Section 15: Libraries to Share

Lecture 44 Libraries

Section 16: Saving your Designs

Lecture 45 How to Save in Figma

Section 17: Teams and Projects

Lecture 46 Teams vs Projects

Section 18: Thumbnail Update

Lecture 47 Thumbnails in Figma

Section 19: Sharing to Clients

Lecture 48 How to Share to Clients

Lecture 49 Exporting in Figma

Section 20: Sharing to Developers

Lecture 50 What are Design Systems ?

Lecture 51 DevMode in Figma

Beginners looking to start a career in UI/UX design,Individuals wanting to learn Figma and its tools from scratch,Those interested in creating web and app designs,People aiming to build a design portfolio for career opportunities