Build Your Own Design Systems
You’ll create frameworks that streamline design processes.
Figma Mastery For Web Designers
A Super Powered Figma Learning Experience For Web Designers
Create pro-level designs, streamline mockups to websites, and leverage Figma as a powerful web design tool for your web design process. From strategy to high-fidelity mockups and even graphics.
Join Over 1,486 Lytbox Students & Members
Master Figma & Web Design
Start Building Sites Like A Pro Web Designer
Perfect for Elementor, Bricks, Breakdance users, and any web designer who wants an easy-to-learn streamlined Figma-to-website workflow.
Easy & Simplified Learning Process
Figma doesn't have to be complicated by focusing only on what matters to a web designer & WordPress creator.
Build Confidence In Your Web Design Skills
No more second guessing your web design skills. You'll see the proof in your website's results.
Learn A Pro-Level Web Design Workflow
The first Figma course designed to optimize your WordPress workflows from design to client hand-off.
Designed For Web Designers
Turn Figma Into Your Superpower!
Perfect for Elementor, Bricks, Breakdance users, and any web designer who wants an easy-to-learn streamlined Figma-to-website workflow.
Your Learning Journey
Figma Fundamentals to High-Fidelity Mockups to Live Websites
Designed specifically for web designers and creators. No fluff and no getting lost in complex areas that don't relate to the web design process. The learning journey is for web creators to go from beginner to skilled web designers mastering Figma for web design.
Module 1
Mastering Figma
We start by learning the tools in Figma's newest 3.0 UI. Module 1 is your simplified library to learn and find exactly what's needed for your web design process.
Module 2
Mastering High Fidelity Mockups
This is where your design skills begin to go ninja-level. This stage of the course will be a life-changer for web designers! You'll learn how to design in Figma all areas for your websites.
Module 3
Mastering The Design Process
Packed with course challenges, this is where we'll all have fun together! You'll be challenged in each lesson to design an area of your website and use our dedicated community to get feedback, critique, and design direction. We'll also be wrapping up the course with the design handover for clients and developers.
Bonus Courses
Mastering Figma to WordPress
This is a massive bonus! 3 Figma to WordPress courses! For each builder we'll complete a pixel perfect streamlined project. Oh, and you get the templates 😉 (valued at $79 each)
Includes:- Figma to Elementor Crash Course
- Figma to Bricks Crash Course
- Figma to Breakdance Crash Course
Course Curriculum
The Most Complete Figma for Web Design Mastery!
111 lessons + 3 Bonus Courses
Part 1: Mastering Figma
Module 1
Learning Figma’s UI (The Fundamentals & Essentials)
- Welcome 👋 How It Works
- Setting Up Figma
- Creating & Managing Drafts & Projects
- Figma UI3
- Figma UI Left Navigation Panel
- Figma UI Right Properties Panel
- The Toolbar
- The Context Menu & Shortcuts (The Right Click & Essential Hotkeys)
- Figma Plugins, Assets & Community
- Organizing Figma Files & Layers
- Exporting/Importing Fig Files
- Sharing & Collaboration (Commenting & Duplicating Drafts Best Practices)
- Installing Fonts & Missing Fonts
- Layout Grids for Web Design
- Utilizing Rulers
Module 2
Core Web Design Elements & Styles
- Frames & Groups
- Setting Up Your Layouts
- Using Shapes
- Positions In The Properties Panel
- Typography & Text
- Color Tool
- Images & Exporting in Figma
- Borders & Border Radius
- Using Effects (Drop Shadows & Blurs)
- Creating Vectors & SVGs (Outline Stroke & Pen Tool)
- Masking & Booleans
- Navigating Your Frames (Art Boards)
Module 3
Getting Started With Design Systems (Local Styles, Variables, & Components)
- Module 3 Intro
- Why Use Design Systems? (Efficient Workflows & Brand Consistency)
- Starting a Design System
- Variables vs. Local Styles
- Course Update – Variable Modes (Paid Plan Limitation)
- How Variables Work
- Create Color Variables
- Color Local Styles
- How Variables Work
- Create Color Variables
- Mastering Number Variables (Powerful 🦾)
- Creating Typography Styles
- Effect Local Styles
- String & Boolean Variables
- Building Components
- Figma Blueprints (Your Project Starter)
Module 4
Mastering Auto Layout
- Module 4 Intro
- Auto Layouts 101 (Getting Started)
- Auto Layout vs. Flexbox (with Elementor & Bricks Examples)
- Nesting Auto Layouts
- Auto Layout Menus
- Auto Layout Banners
- Auto Layout Cards
- Auto Layout Sections
- Responsive Auto Layout - From Desktop to Mobile
- Course Challenge #1
Module 5
Creating Graphics For Web Design Projects
- A Web Design Image Workflow
- Blurs, Grains, and Figma Image Tricks
- Creating Background Graphics
- Customizing & Exporting Icons/SVGs
- Creating Logos in Figma
- Graphics For More Than Websites
Part 2: Mastering High Fidelity Mockups
Module 6
Building Web Design Skills
- Part 2 Learning Outcomes
- How To Acquire Web Design Skills
- Color Theory (Choosing Color Pallets)
- Typography 101
- Layouts, Grid Systems, & Funnel
- Content & SEO In The Design Process
- The Design Strategy Process
- A Design To Development Mindset
- Becoming A Web Design Leader
- The Value Of A Web Designer
- Course Challenge #2: Replicate A Landing Page In Figma
Module 7
Mastering The Web Design Process
- Starting A Professional Web Design Project
- The Project Kick Off - Discovery With The Client
- Userflows & Site Maps
- Wireframes
- Using Relume AI In Figma
- Using Wireframe UI Kits
- Finding Design Directions (Design Inspirations)
- Designing Stylescapes & Mood Boards
- Designing Brand Guidelines
- Collaboration With Designers & Clients (Getting Designs Approved)
- Course Challenge #3: Complete Your Sitemaps, User Flows & Wireframes
- Course Challenge #4: Complete 3 Stylescapes or Mood Boards
- Challenge #5: Finalize Your Brand Style Guide & Design Direction
Module 8
Designing High Fidelity Mockups
- What’s A High Fidelity Mockup
- High-Fidelity Design Systems With Text Styles & Variables
- Designing Headers
- Designing Footers
- Designing Banners
- Designing Sections
- Putting Sections Together With Auto Layout
- Fine Tuning Our Designs
- Designing Mobile Versions (Streamlined)
- Adding Graphics
- Create A Project Cover
- Completing A High-Fidelity Design Project
- Course Challenge #6: Design A High Fidelity Landing Page Mockup
Part 3: Mastering Web Design
Module 9
Mastering The Course (Course Challenges)
- Directions For Your Course Challenges
- Course Challenge #7: Design 2 Landing Pages In Light & Dark Mode
- Course Challenge #8: Design 3 Alternate Banners
- Course Challenge #9: Design a Mobile Menu
- Course Challenge #10: Design a Login Page
- Course Challenge #11: Design a Contact Page
- Course Challenge #12: Design a Service Page
- Course Challenge #13: Design an About Page
- Course Challenge #14: Design a Blog
- Course Challenge #15: Design a 404 Page
- Course Challenge #16: Design a Pop Up Lead Form (Optional For Extra Credit)
- Course Challenge #17: Design a Pricing Page (Optional For Extra Credit)
- Course Challenge #18: Design a Product Page (Optional For Extra Credit)
- Course Challenge #19: Design a Cart Page (Optional For Extra Credit)
- Course Challenge #20: Design a Checkout Page (Optional For Extra Credit)
- What’s Next...
- Getting Certified as a Lytbox Pro Designer
Bonus Courses: Mastering Figma to WordPress (Launching End Of 2025 🚀)
- Figma to Elementor Mini Course
- Figma to Bricks Mini Course
- Figma to Breakdance Mini Course
Earn Your Lytbox Certification
Show off your skills with a certification that proves you’ve mastered Elementor & Web Design and display to clients your added value.
Figma Mastery Course
Invest In Your Web Design Skills Today
$499Only a few more days to enroll at the pre-sale promotional price!
Enroll Now- 111 High Value Lessons
- 20 Design Challenges
- 3 Bonus Courses
- Variable Based Design System Template
- Project Starter Blueprint Template
- Lifetime access with all future updates
- Supportive Student Community
- Certified Pro Designer Course Certificate
- Design Review & Feedback (by Jeffrey@Lytbox)
7-Day No Questions Asked Money-Back Guarantee
Enroll in a Lytbox Academy course with confidence, backed by my 100% Satisfaction Guarantee.
If within the first 7 days you’re not completely satisfied and feel like you're not getting tremendous value, just let me know, and you'll get a full refund. No stress, no worries, no pressure, no risk. This is one of those things you'll only gain from!
FAQ
Got questions?
I'm here to help.
If you have any questions, you can reach out to me anytime.
Contact MeWhat if I'm new to web design?
This is a perfect start! It’s been designed to jump start web design skills with a hyper focus on building a healthy design foundation. You’ll be learning best design & Figma practices and learn a system that’s future-proofed.
Do I need a paid Figma license?
Nope! Everything we’re doing is on Figma’s free plan. It’s all we really need. But since this is about Figma Mastery, we will explore the paid version to get the most out of Figma.
What if I'm an experienced web designer?
This mastery program is designed for new and intermediate web creators to build web design mastery. If you’re already a design master Jedi, it might not be for you. But if you feel your designs are not where you want them to be, then this will get you to the next level.
Will we be using WordPress?
We’ll be approaching the course with a WordPress mindset. This is helpful when learning how to design for WordPress websites. Only in the bonus lessons will be using WordPress.
Is there course support?
This is what makes our Lytbox Academy courses special! We’re doing this as a community in Circle and have support throughout your web design journey. You can reach out to me by DM anytime, we have a dedicated student and community support team member at Lytbox and you’ll get my personal feedback for your designs. No one does this alone!
What is the refund policy?
All premium Lytbox Academy courses have a 7-day no-questions-asked refund policy. Since this is a pre-sale, refunds are available anytime during the course production and the 7-day policy only kicks in after the official launch. There’s no risk!
