Figma for Web Design Online Course

Figma for Web Design Online Course

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
• Final thoughts and what's next