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,220 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 Module
Mastering Figma to WordPress
This is a massive bonus! 3 mini-courses in their own! For each builder we'll complete a pixel perfect streamlined project. Oh, and you get the templates 😉
Course Curriculum
The Most Complete Figma for Web Design Mastery!
111 lessons + 3 Bonus Mini Coures
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 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
- Creating & Using Frames
- Setting Up Your Layouts
- Using Shapes
- Positions In The Properties Panel
- Typography & Text
- Color Palettes
- Images in Figma
- Border Radius
- Using Effects (Drop Shadows & Blurs)
- Creating Vectors & SVGs (Outline Stroke & Pen Tool)
- Masking & Booleans
- Navigating Your Frames (Art Boards)
Module 3
Mastering Auto Layout
- Auto Layout vs. Flexbox (with Elementor & Bricks Examples)
- Responsive Layouts
- Auto Layouts 101 (Getting Started)
- Nesting Auto Layouts
- Auto Layout Menus
- Auto Layout Banners
- Auto Layout Cards
- Auto Layout Sections (Including Images, Call To Actions, & Columns)
- Auto Layout - From Desktop to Mobile
Module 4
Getting Started With Design Systems (Local Styles, Variables, & Components)
- Why Use Design Systems? (Efficient Workflows & Brand Consistency)
- Starting a Design System
- Local Styles vs. Variables
- Text & Color Local Styles
- Effect Local Styles
- How Variables Work
- Create Color Variables
- Utilizing Number Variables (Powerful 🦾)
- String & Boolean Variables
- Creating Typography Styles
- Building Components
- Figma Blueprints (Start Your Design System)
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
Module 7
Mastering The Web Design Process
- Keeping Designs Clean (Figma Best Practices)
- Organizing A Professional Web Design Project (The Project Set Up)
- 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: Complete Your Wireframes & Project Foundation
- Course Challenge: Complete 3 Stylescapes or Mood Boards
- Course Challenge: Finalize Your 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: Design A High Fidelity Landing Page Mockup
Part 3: Mastering Web Design
Module 9
Becoming A Pro Web Designer
- Project & Client Management In The Design Stage
- Streamline A Design Project
- Utilizing UI Kits & Reusable Systems
- Becoming A Creative Director
- The 6-Figure Web Designer (Getting Paid For High-Level Web Design)
Module 10
Mastering The Course (Course Challenges)
- Directions For Your Course Challenges
- Course Challenge: Design 2 Landing Pages In Light & Dark Mode
- Course Challenge: Design 3 Alternate Banners
- Course Challenge: Design a Login Page
- Course Challenge: Design a Contact Page
- Course Challenge: Design a Service Page
- Course Challenge: Design an About Page
- Course Challenge: Design a Blog
- Course Challenge: Design a 404 Page
- Course Challenge: Design a Pop Up Lead Form (Optional For Extra Credit)
- Course Challenge: Design a Pricing Page (Optional For Extra Credit)
- Course Challenge: Design a Product Page (Optional For Extra Credit)
- Course Challenge: Design a Cart Page (Optional For Extra Credit)
- Course Challenge: Design a Checkout Page (Optional For Extra Credit)
- What’s Next...
- Getting Certified as a Lytbox Pro Designer
Bonus: Mastering Figma to WordPress
- 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.
Coming Soon 🚀
Join the Waitlist & Get $50 Off.
The Figma for Web Designers program launches in April with a final pre-sale at $349 before rising to $499. Join the waitlist now for an extra $50 off and lock in $299!
FAQ
Got questions?
I'm here to help.
If you have any questions, you can reach out to me anytime.
Contact MeWhen is the course going live?
Production is in process and the full course is estimated to be released late March. Students who get the pre-sale will get early access as the course modules roll out and immediate access to our student community on Circle.
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!
Do I need a paid Figma license?
Nope! Everything we’re doing is on Figma’s free plan. It’s all we really need.
Is this course beginner friendly?
Absolutely. The course is designed for beginner to intermediate levels.
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.
