This course guides you from beginner to professional UI/UX designer using Figma, starting with the interface, essential tools, and design principles before moving into hands-on projects where you’ll create layouts, UI components, and apply color and typography best practices. You’ll design real-world websites, explore responsive and e-commerce layouts, and learn user experience optimization. The course also covers freelancing skills, from building a strong portfolio to working with clients and collaborating with developers. By the end, you’ll be able to design visually appealing, user-friendly websites and confidently hand off your work for development, equipping you with the skills to succeed in UI/UX design or freelancing.
Who should take the course?
This course is ideal for aspiring web designers, UI/UX enthusiasts, and developers who want to create visually appealing and user-friendly website designs using Figma. It’s well-suited for beginners looking to enter the field of web design as well as professionals seeking to streamline their design workflow and collaboration process. Whether you’re building your first website mockup or refining your design skills, this course will equip you with practical knowledge to design modern, responsive web interfaces.
What you will learn
Design engaging and user-friendly websites in Figma
Create UI components for consistency and efficiency
Apply color theory and typography best practices
Build responsive designs for multiple screen sizes
Prototype and test interactive web elements
Prepare and deliver designs for developers effectively
Course Outline
Get Started with Figma
Introduction
What is Figma and is it better than other design programs?
Your first website design
Solving your first website design
How to get help fast
The welcome screen in Figma
Getting started with Figma
Best ways to move around in Figma
Exercise: How to move elements around
Solving the exercise and a few pro tips
Discover Figma's interface & why professionals use it
Contest 1: Your own mini website
Editing icons: Colors & size
Here's why so many beginners give up
Conclusions
Discover the Most Important Things About Figma
Introduction
The biggest difference in Figma versus other programs
Here's how you create buttons in Figma
The basics of working with color
How to work with color like a pro
How to add images: Frames vs rectangles
Create a gallery / collage in Figma
Here are the 3 types of text in Figma
Discover the properties of text layers
How to work with text like a pro
Effects in Figma: Blur, shadows & more
Everything you need to know about grids
An overview of components
How to mask in Figma
Here's what makes you a good web designer
Conclusions
First Web Design Project
Introduction
Set up the desktop version the correct way
Create the header
Create the main menu
Set up the search box
Create a dropdown menu
Create the most important item – the card
How to improve the cards
Set up the secondary navigation
Create the pagination
Create the foundation for the footer
Adding content in the footer
How to handle visual imperfections
Here's what you need to remember
Contest 2: Your own blog design
Freelancing
Discover what freelancing is REALLY all about
Without this skill, you can't succeed!
Best and worst way to get started as a freelancer
How to set up your freelancing profile
The truth about freelancing platforms: Upwork, Freelancer, Fiverr
Crowdsourcing revealed: The pros and cons
Poll: What are your goals?
Don't go on 99designs before you watch this!
Revealed: Coding and Photoshop vs Adobe XD vs Figma
Here's how to start a portfolio and get clients
The importance of your mindset
Is the competition too difficult on 99designs?
9 tools for working longer: Fix eye, back, neck pain
Improve your mood & concentration
The First Key to Great Web Design
Introduction
Best settings & website components
Case study: Non-standard layouts
Exercise: Create a standard website layout
How to size your web elements correctly
My formula for perfect text
Case study: Text layers
What you need to know about color contrast
Case study: Colors – Part 1
Case study: Colors – Part 2
How to align elements in the hero area
3 rules for web design icons
Case study: Visual Balance
Final thoughts
The Second Key to Great Web Design
Introduction
What's the point of the website?
The user versus the business owner
Analytics in web design
Templates & Website Builders – The web designer's death?
Case Study: 4 versions of the same website
E-commerce homepage layout
E-commerce product details
E-commerce checkout
Why aren't websites perfect?
Case studies: The client's needs
Landing page vs a website
Lead generation in landing pages
Why landing pages have a bad reputation
Digital product landing page
Testing landing pages
Case study: My landing page
Final thoughts about the client's needs
The Third Key to Great Web Design
Introduction
What's UX?
The best example of good UX and attention to detail
Improve the checkout process to double sales
Improve the mobile version to double sales
7 website tweaks that show attention to detail
Upgrading the mobile product page
Doing 1-on-1 sessions with a coder
Here's what you need to remember
Redesign an E-Commerce Business
The most important question when starting a new project
How to research/find inspiration for your project
Set up the foundation of the project
Create the top bar
Set up the header
Decide on a styling for the header
Create the most important part – the hero area
Create the secondary navigation – product categories
Here's where sales are made … or not!
Create the first version of the card
Set the style for the card
Finishing touches for the card design
Don't forget about this important detail!
Create the FAQ section
Here's why auto-layout is awesome
Create a newsletter sign-up form
Set up the footer's foundation
Finishing the footer
Explore variations & improve your design
How to approach the interior pages
Set the top area for the product's page
Adding content to the product's page
How to add clear calls to action for visitors
Main content area
Create a table for the sidebar
Conclusions
Responsive Design: From Desktop to Mobile
Introduction to the mobile version
How to start the mobile version for the homepage
Create the header for the mobile version
How to rearrange the hero area
Set up the card for the grid of products
Don't skip this step when creating product cards
Arrange the FAQ section for the mobile version
Recreate the newsletter in a narrow space
Create the footer for the mobile version
Conclusions
Discover How the Design Gets Transformed to the Live Version
Preparing the design for coding
Zeplin - The missing link!
How to set up the project for the coder/client
Server-side content and multi-layer graphics
Here's what developers want from your design
Here's why it's essential you deliver what's needed
