Level up with Figma for web design — create modern, responsive sites easily. Join the course today and boost your confidence! Read more.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Beginners and advanced users eager to learn modern web design
- Website developers who want to expand their skills with professional design techniques
- Anyone interested in transforming a website’s desktop layout into a mobile-friendly design
- Designers looking to stay up to date with current web design principles and trends
- Learners seeking a dependable life skill to build a new career or create an additional income stream
What you’ll learn:
- How to create beautiful, modern website designs in Figma
- Techniques to transform desktop designs into responsive mobile versions
- Best practices for preparing your design handoff to clients and developers
- Key design principles applicable to any web project
- Proven strategies for starting a website design project the right way
- How to discover and use inspiration and design resources effectively
Requirements:
- Figma is completely free
- A computer and a willingness to learn
Mastering web design is more achievable than ever, and this course will teach you everything you need to know about modern approaches using Figma, one of the most trusted design tools. Whether you’re wondering how to use Figma for web design or looking to sharpen your skills, this beginner-friendly course will guide you through engaging, step-by-step exercises.
Here’s what you can expect:
- A solid foundation in UI and UX principles every designer should know
- Responsive design skills, including transforming desktop versions into mobile experiences
- Tips for preparing designs for a smooth developer handoff to make coders and clients happy
- Actionable design principles to elevate any project
- Insights into what clients expect from you — including deliverables and asset formats
Throughout the course, you’ll learn to use Figma for web design by working on real-world projects with active users and clients. We’ll also explore case studies to help you identify and avoid common mistakes. Plus, you’ll have access to a supportive Discord community where you can connect, collaborate, and ask questions.
About Chris Barin
I’m Chris Barin — a professional web and app designer with over a decade of experience. I’ve freelanced, built my own design company, and run e-commerce businesses. I know what clients want, and I’m here to share that expertise with you, offering practical, real-world insights you can trust.
Let’s get started — transform your future with the power of Figma for web design.
Our Promise to You
By the end of this course, you’ll have the confidence to design websites that meet real client needs. You’ll discover expert-backed tips and frameworks that can transform your skillset from beginner to advanced in a short time. Web design changed my life — it gave me independence, confidence, and a career I love. My hope is that this skill can empower you just as much.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Ready to keep learning? Check my profile for more expert-led courses!
Keep Learning and Head to Our Blog Posts For More Actionable Tips and Advanced Strategies!
Course Curriculum
| Section 1 - Get Started With Figma | |||
| Introduction | 00:00:00 | ||
| What Is Figma And Is It Better Than Other Design Programs? | 00:00:00 | ||
| Your First Website Design | 00:00:00 | ||
| Solving Your First Website Design | 00:00:00 | ||
| How To Get Help Fast | 00:00:00 | ||
| The Welcome Screen In Figma | 00:00:00 | ||
| Getting Started With Figma | 00:00:00 | ||
| Best Ways To Move Around In Figma | 00:00:00 | ||
| Exercise: How To Move Elements Around | 00:00:00 | ||
| Solving The Exercise And A Few Pro Tips | 00:00:00 | ||
| Discover Figma's Interface & Why Professionals Use It | 00:00:00 | ||
| Contest 1: Your Own Mini Website | 00:00:00 | ||
| Editing Icons: Colors & Size | 00:00:00 | ||
| Here's Why So Many Beginners Give Up | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 2 - Discover The Most Important Things About Figma | |||
| Introduction | 00:00:00 | ||
| The Biggest Difference In Figma Versus Other Programs | 00:00:00 | ||
| Here's How You Create Buttons In Figma | 00:00:00 | ||
| The Basics Of Working With Color | 00:00:00 | ||
| How To Work With Color Like A Pro | 00:00:00 | ||
| How To Add Images: Frames Vs Rectangles | 00:00:00 | ||
| Create A Gallery Or Collage In Figma | 00:00:00 | ||
| Here Are The 3 Types Of Text In Figma | 00:00:00 | ||
| Discover The Properties Of Text Layers | 00:00:00 | ||
| How To Work With Text Like A Pro | 00:00:00 | ||
| Effects In Figma: Blur, Shadows & More | 00:00:00 | ||
| Everything You Need To Know About Grids | 00:00:00 | ||
| An Overview Of Components | 00:00:00 | ||
| How To Mask In Figma | 00:00:00 | ||
| Here's What Makes You A Good Web Designer | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 3 - First Web Design Project | |||
| Introduction | 00:00:00 | ||
| Set Up The Desktop Version The Correct Way | 00:00:00 | ||
| Create The Header | 00:00:00 | ||
| Create The Main Menu | 00:00:00 | ||
| Set Up The Search Box | 00:00:00 | ||
| Create A Dropdown Menu | 00:00:00 | ||
| Create The Most Important Item - The Card | 00:00:00 | ||
| How To Improve The Cards | 00:00:00 | ||
| Set Up The Secondary Navigation | 00:00:00 | ||
| Create The Pagination | 00:00:00 | ||
| Create The Foundation For The Footer | 00:00:00 | ||
| Adding Content In The Footer | 00:00:00 | ||
| How To Handle Visual Imperfections | 00:00:00 | ||
| Here's What You Need To Remember | 00:00:00 | ||
| Contest 2: Your Own Blog Design | 00:00:00 | ||
| Section 4 - Freelancing | |||
| Discover What Freelancing Is REALLY All About | 00:00:00 | ||
| Without This Skill, You Can't Succeed! | 00:00:00 | ||
| Best And Worst Way To Get Started As A Freelancer | 00:00:00 | ||
| How To Set Up Your Freelancing Profile | 00:00:00 | ||
| The Truth About Freelancing Platforms: Upwork, Freelancer, Fiverr | 00:00:00 | ||
| Crowdsourcing Revealed: The Pro's And Con's | 00:00:00 | ||
| Poll: What Are Your Goals? | 00:00:00 | ||
| Don't Go On 99designs Before You Watch This! | 00:00:00 | ||
| Revealed: Coding And Photoshop Vs Adobe XD Vs Figma | 00:00:00 | ||
| Here's How To Start A Portfolio And Get Clients | 00:00:00 | ||
| The Importance Of Your Mindset | 00:00:00 | ||
| Is The Competition Too Difficult On 99designs? | 00:00:00 | ||
| 9 Tools For Working Longer: Fix Eye, Back, Neck Pain | 00:00:00 | ||
| Improve Your Mood & Concentration | 00:00:00 | ||
| Section 5 - The First Key To Great Web Design | |||
| Introduction | 00:00:00 | ||
| Best Settings & Website Components | 00:00:00 | ||
| Case Study: Non-Standard Layouts | 00:00:00 | ||
| Exercise: Create A Standard Website Layout | 00:00:00 | ||
| How To Size Your Web Elements Correctly | 00:00:00 | ||
| My Formula For Perfect Text | 00:00:00 | ||
| Case Study: Text Layers | 00:00:00 | ||
| What You Need To Know About Color Contrast | 00:00:00 | ||
| Case Study: Colors - Part 1 | 00:00:00 | ||
| Case Study: Colors - Part 2 | 00:00:00 | ||
| How To Align Elements In The Hero Area | 00:00:00 | ||
| 3 Rules For Web Design Icons | 00:00:00 | ||
| Case Study: Visual Balance | 00:00:00 | ||
| Final Thoughts | 00:00:00 | ||
| Section 6 - The Second Key To Great Web Design | |||
| Introduction | 00:00:00 | ||
| What's The Point Of The Website? | 00:00:00 | ||
| The User Versus The Business Owner | 00:00:00 | ||
| Analytics In Web Design | 00:00:00 | ||
| Templates & Website Builders - The Web Designer's Death? | 00:00:00 | ||
| Case Study: 4 Versions Of The Same Website | 00:00:00 | ||
| E-Commerce Homepage Layout | 00:00:00 | ||
| E-Commerce Product Details | 00:00:00 | ||
| E-Commerce Checkout | 00:00:00 | ||
| Why Aren't Websites Perfect? | 00:00:00 | ||
| Case Studies: The Client's Needs | 00:00:00 | ||
| Landing Page Vs A Website | 00:00:00 | ||
| Lead Generation In Landing Pages | 00:00:00 | ||
| Why Landing Pages Have A Bad Reputation | 00:00:00 | ||
| Digital Product Landing Page | 00:00:00 | ||
| Testing Landing Pages | 00:00:00 | ||
| Case Study: My Landing Page | 00:00:00 | ||
| Final Thoughts About The Client's Needs | 00:00:00 | ||
| Section 7 - Redesign An E-Commerce Business | |||
| The Most Important Question When Starting A New Project | 00:00:00 | ||
| How To Research Or Find Inspiration For Your Project | 00:00:00 | ||
| Set Up The Foundation Of The Project | 00:00:00 | ||
| Create The Top Bar | 00:00:00 | ||
| Set Up The Header | 00:00:00 | ||
| Decide On A Styling For The Header | 00:00:00 | ||
| Create The Most Important Part - The Hero Area | 00:00:00 | ||
| Create The Secondary Navigation - Product Categories | 00:00:00 | ||
| Here's Where Sales Are Made... Or Not! | 00:00:00 | ||
| Create The First Version Of The Card | 00:00:00 | ||
| Set The Style For The Card | 00:00:00 | ||
| Finishing Touches For The Card Design | 00:00:00 | ||
| Don't Forget About This Important Detail! | 00:00:00 | ||
| Create The FAQ Section | 00:00:00 | ||
| Here's Why Auto-Layout Is Awesome | 00:00:00 | ||
| Create A Newsletter Sign Up Form | 00:00:00 | ||
| Set Up The Footer's Foundation | 00:00:00 | ||
| Finishing The Footer | 00:00:00 | ||
| Explore Variations & Improve Your Design | 00:00:00 | ||
| How To Approach The Interior Pages | 00:00:00 | ||
| Set The Top Area For The Product's Page | 00:00:00 | ||
| Adding Content To The Product's Page | 00:00:00 | ||
| How To Add Clear Calls To Action For Visitors | 00:00:00 | ||
| Main Content Area | 00:00:00 | ||
| Create A Table For The Sidebar | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 8 - Responsive Design: From Desktop To Mobile | |||
| Introduction To The Mobile Version | 00:00:00 | ||
| How To Start The Mobile Version For The Homepage | 00:00:00 | ||
| Create The Header For The Mobile Version | 00:00:00 | ||
| How To Rearrange The Hero Area | 00:00:00 | ||
| Set Up The Card For The Grid Of Products | 00:00:00 | ||
| Don't Skip This Step When Creating Product Cards | 00:00:00 | ||
| Arrange The FAQ Section For The Mobile Version | 00:00:00 | ||
| Recreate The Newsletter In A Narrow Space | 00:00:00 | ||
| Create The Footer For The Mobile Version | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 9 - Additional Resources | |||
| Resources | 00:00:00 | ||
| Web Design Checklist | 00:00:00 | ||
About This Course
Who this course is for:
- Beginners and advanced users eager to learn modern web design
- Website developers who want to expand their skills with professional design techniques
- Anyone interested in transforming a website’s desktop layout into a mobile-friendly design
- Designers looking to stay up to date with current web design principles and trends
- Learners seeking a dependable life skill to build a new career or create an additional income stream
What you’ll learn:
- How to create beautiful, modern website designs in Figma
- Techniques to transform desktop designs into responsive mobile versions
- Best practices for preparing your design handoff to clients and developers
- Key design principles applicable to any web project
- Proven strategies for starting a website design project the right way
- How to discover and use inspiration and design resources effectively
Requirements:
- Figma is completely free
- A computer and a willingness to learn
Mastering web design is more achievable than ever, and this course will teach you everything you need to know about modern approaches using Figma, one of the most trusted design tools. Whether you’re wondering how to use Figma for web design or looking to sharpen your skills, this beginner-friendly course will guide you through engaging, step-by-step exercises.
Here’s what you can expect:
- A solid foundation in UI and UX principles every designer should know
- Responsive design skills, including transforming desktop versions into mobile experiences
- Tips for preparing designs for a smooth developer handoff to make coders and clients happy
- Actionable design principles to elevate any project
- Insights into what clients expect from you — including deliverables and asset formats
Throughout the course, you’ll learn to use Figma for web design by working on real-world projects with active users and clients. We’ll also explore case studies to help you identify and avoid common mistakes. Plus, you’ll have access to a supportive Discord community where you can connect, collaborate, and ask questions.
About Chris Barin
I’m Chris Barin — a professional web and app designer with over a decade of experience. I’ve freelanced, built my own design company, and run e-commerce businesses. I know what clients want, and I’m here to share that expertise with you, offering practical, real-world insights you can trust.
Let’s get started — transform your future with the power of Figma for web design.
Our Promise to You
By the end of this course, you’ll have the confidence to design websites that meet real client needs. You’ll discover expert-backed tips and frameworks that can transform your skillset from beginner to advanced in a short time. Web design changed my life — it gave me independence, confidence, and a career I love. My hope is that this skill can empower you just as much.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Ready to keep learning? Check my profile for more expert-led courses!
Keep Learning and Head to Our Blog Posts For More Actionable Tips and Advanced Strategies!
Course Curriculum
| Section 1 - Get Started With Figma | |||
| Introduction | 00:00:00 | ||
| What Is Figma And Is It Better Than Other Design Programs? | 00:00:00 | ||
| Your First Website Design | 00:00:00 | ||
| Solving Your First Website Design | 00:00:00 | ||
| How To Get Help Fast | 00:00:00 | ||
| The Welcome Screen In Figma | 00:00:00 | ||
| Getting Started With Figma | 00:00:00 | ||
| Best Ways To Move Around In Figma | 00:00:00 | ||
| Exercise: How To Move Elements Around | 00:00:00 | ||
| Solving The Exercise And A Few Pro Tips | 00:00:00 | ||
| Discover Figma's Interface & Why Professionals Use It | 00:00:00 | ||
| Contest 1: Your Own Mini Website | 00:00:00 | ||
| Editing Icons: Colors & Size | 00:00:00 | ||
| Here's Why So Many Beginners Give Up | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 2 - Discover The Most Important Things About Figma | |||
| Introduction | 00:00:00 | ||
| The Biggest Difference In Figma Versus Other Programs | 00:00:00 | ||
| Here's How You Create Buttons In Figma | 00:00:00 | ||
| The Basics Of Working With Color | 00:00:00 | ||
| How To Work With Color Like A Pro | 00:00:00 | ||
| How To Add Images: Frames Vs Rectangles | 00:00:00 | ||
| Create A Gallery Or Collage In Figma | 00:00:00 | ||
| Here Are The 3 Types Of Text In Figma | 00:00:00 | ||
| Discover The Properties Of Text Layers | 00:00:00 | ||
| How To Work With Text Like A Pro | 00:00:00 | ||
| Effects In Figma: Blur, Shadows & More | 00:00:00 | ||
| Everything You Need To Know About Grids | 00:00:00 | ||
| An Overview Of Components | 00:00:00 | ||
| How To Mask In Figma | 00:00:00 | ||
| Here's What Makes You A Good Web Designer | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 3 - First Web Design Project | |||
| Introduction | 00:00:00 | ||
| Set Up The Desktop Version The Correct Way | 00:00:00 | ||
| Create The Header | 00:00:00 | ||
| Create The Main Menu | 00:00:00 | ||
| Set Up The Search Box | 00:00:00 | ||
| Create A Dropdown Menu | 00:00:00 | ||
| Create The Most Important Item - The Card | 00:00:00 | ||
| How To Improve The Cards | 00:00:00 | ||
| Set Up The Secondary Navigation | 00:00:00 | ||
| Create The Pagination | 00:00:00 | ||
| Create The Foundation For The Footer | 00:00:00 | ||
| Adding Content In The Footer | 00:00:00 | ||
| How To Handle Visual Imperfections | 00:00:00 | ||
| Here's What You Need To Remember | 00:00:00 | ||
| Contest 2: Your Own Blog Design | 00:00:00 | ||
| Section 4 - Freelancing | |||
| Discover What Freelancing Is REALLY All About | 00:00:00 | ||
| Without This Skill, You Can't Succeed! | 00:00:00 | ||
| Best And Worst Way To Get Started As A Freelancer | 00:00:00 | ||
| How To Set Up Your Freelancing Profile | 00:00:00 | ||
| The Truth About Freelancing Platforms: Upwork, Freelancer, Fiverr | 00:00:00 | ||
| Crowdsourcing Revealed: The Pro's And Con's | 00:00:00 | ||
| Poll: What Are Your Goals? | 00:00:00 | ||
| Don't Go On 99designs Before You Watch This! | 00:00:00 | ||
| Revealed: Coding And Photoshop Vs Adobe XD Vs Figma | 00:00:00 | ||
| Here's How To Start A Portfolio And Get Clients | 00:00:00 | ||
| The Importance Of Your Mindset | 00:00:00 | ||
| Is The Competition Too Difficult On 99designs? | 00:00:00 | ||
| 9 Tools For Working Longer: Fix Eye, Back, Neck Pain | 00:00:00 | ||
| Improve Your Mood & Concentration | 00:00:00 | ||
| Section 5 - The First Key To Great Web Design | |||
| Introduction | 00:00:00 | ||
| Best Settings & Website Components | 00:00:00 | ||
| Case Study: Non-Standard Layouts | 00:00:00 | ||
| Exercise: Create A Standard Website Layout | 00:00:00 | ||
| How To Size Your Web Elements Correctly | 00:00:00 | ||
| My Formula For Perfect Text | 00:00:00 | ||
| Case Study: Text Layers | 00:00:00 | ||
| What You Need To Know About Color Contrast | 00:00:00 | ||
| Case Study: Colors - Part 1 | 00:00:00 | ||
| Case Study: Colors - Part 2 | 00:00:00 | ||
| How To Align Elements In The Hero Area | 00:00:00 | ||
| 3 Rules For Web Design Icons | 00:00:00 | ||
| Case Study: Visual Balance | 00:00:00 | ||
| Final Thoughts | 00:00:00 | ||
| Section 6 - The Second Key To Great Web Design | |||
| Introduction | 00:00:00 | ||
| What's The Point Of The Website? | 00:00:00 | ||
| The User Versus The Business Owner | 00:00:00 | ||
| Analytics In Web Design | 00:00:00 | ||
| Templates & Website Builders - The Web Designer's Death? | 00:00:00 | ||
| Case Study: 4 Versions Of The Same Website | 00:00:00 | ||
| E-Commerce Homepage Layout | 00:00:00 | ||
| E-Commerce Product Details | 00:00:00 | ||
| E-Commerce Checkout | 00:00:00 | ||
| Why Aren't Websites Perfect? | 00:00:00 | ||
| Case Studies: The Client's Needs | 00:00:00 | ||
| Landing Page Vs A Website | 00:00:00 | ||
| Lead Generation In Landing Pages | 00:00:00 | ||
| Why Landing Pages Have A Bad Reputation | 00:00:00 | ||
| Digital Product Landing Page | 00:00:00 | ||
| Testing Landing Pages | 00:00:00 | ||
| Case Study: My Landing Page | 00:00:00 | ||
| Final Thoughts About The Client's Needs | 00:00:00 | ||
| Section 7 - Redesign An E-Commerce Business | |||
| The Most Important Question When Starting A New Project | 00:00:00 | ||
| How To Research Or Find Inspiration For Your Project | 00:00:00 | ||
| Set Up The Foundation Of The Project | 00:00:00 | ||
| Create The Top Bar | 00:00:00 | ||
| Set Up The Header | 00:00:00 | ||
| Decide On A Styling For The Header | 00:00:00 | ||
| Create The Most Important Part - The Hero Area | 00:00:00 | ||
| Create The Secondary Navigation - Product Categories | 00:00:00 | ||
| Here's Where Sales Are Made... Or Not! | 00:00:00 | ||
| Create The First Version Of The Card | 00:00:00 | ||
| Set The Style For The Card | 00:00:00 | ||
| Finishing Touches For The Card Design | 00:00:00 | ||
| Don't Forget About This Important Detail! | 00:00:00 | ||
| Create The FAQ Section | 00:00:00 | ||
| Here's Why Auto-Layout Is Awesome | 00:00:00 | ||
| Create A Newsletter Sign Up Form | 00:00:00 | ||
| Set Up The Footer's Foundation | 00:00:00 | ||
| Finishing The Footer | 00:00:00 | ||
| Explore Variations & Improve Your Design | 00:00:00 | ||
| How To Approach The Interior Pages | 00:00:00 | ||
| Set The Top Area For The Product's Page | 00:00:00 | ||
| Adding Content To The Product's Page | 00:00:00 | ||
| How To Add Clear Calls To Action For Visitors | 00:00:00 | ||
| Main Content Area | 00:00:00 | ||
| Create A Table For The Sidebar | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 8 - Responsive Design: From Desktop To Mobile | |||
| Introduction To The Mobile Version | 00:00:00 | ||
| How To Start The Mobile Version For The Homepage | 00:00:00 | ||
| Create The Header For The Mobile Version | 00:00:00 | ||
| How To Rearrange The Hero Area | 00:00:00 | ||
| Set Up The Card For The Grid Of Products | 00:00:00 | ||
| Don't Skip This Step When Creating Product Cards | 00:00:00 | ||
| Arrange The FAQ Section For The Mobile Version | 00:00:00 | ||
| Recreate The Newsletter In A Narrow Space | 00:00:00 | ||
| Create The Footer For The Mobile Version | 00:00:00 | ||
| Conclusions | 00:00:00 | ||
| Section 9 - Additional Resources | |||
| Resources | 00:00:00 | ||
| Web Design Checklist | 00:00:00 | ||
Related Courses
Are you interested in higher education?
All Rights Reserved