Complete UI/UX Design Course 2026: Figma + AI + Real Project

In this part, we will start our very first screen — the splash screen. You’ll learn how to add a status bar, place the app logo, and set up the perfect layout and spacing to make your design look clean and professional. This is the first step in your real app design journey, and we’ll keep it simple and beginner-friendly.

In this part, we will design a modern Sign In screen. You will learn how to add buttons for Google, Apple, and Facebook login, as well as the option to sign in with email. We’ll focus on layout, spacing, button styles, and keeping everything clean and user-friendly. This screen is an important part of every app, and you’ll create it step by step with me.

In this part, we’ll design a simple and clean Sign Up screen where users can create an account using their email, You’ll learn how to organize input fields, use proper spacing, and add a clear call-to-action button. This screen will follow best practices for user experience while keeping the design modern and easy to use.

In this part, we will improve the Sign Up screen by adding a secure password input field. You’ll learn how to design a clean text field for passwords and add a visibility toggle icon so users can show or hide their password as they type. This small feature adds big value to your app’s user experience and shows attention to real-world app design details.

In this part, we’ll design a beautiful and friendly Welcome screen that users will see after they sign up or log in. You’ll learn how to create a warm and simple layout with a welcome message, user name or icon, and a clear call-to-action to continue. This screen helps create a smooth and engaging experience as users enter the main part of your app.

In this part, we’ll use Frames and Auto Layout to design a clean and responsive popup where users can select their role, like UI/UX Designer, Product Designer, or other options. You’ll learn how to properly align elements, add spacing, and make the layout flexible so it works well on different screen sizes. This is a real-world feature found in many onboarding flows, and it will strengthen your design skills.

In this part, we’ll complete the full version of the Welcome screen by adding more details like the user’s name, a friendly message, and a clear button to move forward in the app. We’ll also arrange the layout properly using Auto Layout and make sure everything looks clean and well-balanced. This screen will give users a great first impression when they enter the app.

In this part, we’ll design a smart and simple screen where users can choose why they’re using the app. Options will include things like “I want to improve my skills,” “I want to grow my team’s skills,” or “Just exploring.”
We’ll first design an empty state screen with a clear message and icons or cards. Then, we’ll show how the screen updates visually when the user selects one of the options. This is a great way to practice interactive layouts and real-world UX thinking.

In this part, we’ll design the Interest Selection screen where users can pick the topics they’re most interested in, such as User Interface (UI), User Experience (UX), Design Patterns, and more. You’ll learn how to create visually appealing selection options, whether through cards, checkboxes, or buttons. We’ll use Auto Layout to ensure the design adjusts nicely across different devices and screen sizes. This feature helps personalize the user experience and guide users to the content that matters most to them.

In this final part of Day 2, we’ll design a Reminder screen where users can set reminders for specific tasks. We’ll also create a time selection popup, allowing users to easily choose the date and time for their reminder. You’ll learn how to design intuitive input fields, date pickers, and time selection controls, making sure the popup is clean, easy to use, and responsive. This screen will enhance the user experience and add functionality to your app.

In this part, we’ll take a deep dive into the user experience (UX) behind subscription screens. I’ll explain what makes a great subscription flow and why it matters for user trust and conversions. We’ll look at real-world examples — especially the Uxcel Go app, which offers one of the best subscription experiences in terms of clarity, smooth transitions, and value presentation. This session will help you understand how to think like a UX designer before jumping into UI design.

In this part, we’ll begin designing the Subscriptions screen, where users can view and manage their subscription plans. You’ll learn how to lay out various subscription options, include features like pricing tiers, plan benefits, and call-to-action buttons to encourage users to make a choice. We'll also incorporate Auto Layout to ensure the design remains responsive and adapts well to different screen sizes. This screen is essential for any app that offers premium features or services, and we’ll make sure it’s both visually appealing and easy to navigate.

In this part, we’ll design a Customizing Experience screen that allows users to personalize the app based on their preferences. Whether it’s selecting the type of content they want to focus on, adjusting learning pace, or setting app behavior, this screen helps create a more tailored user journey. You’ll learn how to use Auto Layout and components to build a flexible and user-friendly design. This screen is key to improving engagement and making users feel in control of their experience.

In this part, we’ll design the Main Course Selection screen where users choose how they want to start — either with a recommended path or by exploring on their own. While designing, we’ll also create button variants (like selected and unselected states) to improve reusability and interaction feedback. You’ll learn how to set up component variants in Figma and use them smartly across your design. This helps in keeping your file clean and flexible for future updates.

In this part, we’ll design the Detailed Course Page that appears after a user selects a course. This screen will display all the important information about the course — including the course title, instructor name, skill level (beginner, intermediate, advanced), total duration, and a short course description. We’ll also add lesson previews, progress indicators, and action buttons like “Start Now” or “Save for Later.”

You’ll learn how to use Auto Layout and Variants to organize these sections cleanly and make them fully reusable. This screen plays a big role in helping users make a confident choice, so we’ll focus on both visual clarity and strong UX structure.

In this part, we’ll enhance the Detailed Course Screen by adding selection variants to the course options. These variants allow users to choose between different course levels or types, like UI Design, UX Design, or Product Design, with clear visual feedback for the selected state. You’ll learn how to set up and manage selection variants in Figma to make your components more interactive and dynamic.

By the end of this lesson, you’ll have a detailed, functional course page that feels real and engaging — just like in top learning apps.

In the final part of Day 4, we’ll design the Home Page of the app — the central screen where users land after logging in or completing onboarding. This screen will display key sections like Featured Courses, Continue Learning, and Recommended for You.

You’ll learn how to structure the layout for easy navigation, apply spacing and auto layout correctly, and use reusable components like course cards and section headers. We’ll also focus on making the home page look clean, modern, and user-friendly, just like professional learning apps.

By the end of this session, you’ll have a polished home screen that sets the tone for the entire user experience.

In this part, we’ll begin building the bottom navigation by designing the first icon — the Course Home Icon. This icon represents the main dashboard or landing area where users access their learning journey.

You’ll learn how to:

• Design a clean, minimal home icon that aligns with modern design trends

• Use frame structure to keep it scalable

• Apply proper spacing, sizing, and active/inactive states for consistency

• Prepare it as a reusable component to use across your app

This icon sets the foundation for your navigation bar and ensures a smooth start to the user experience.

In this part, we’ll design the second navigation icon — the Explore Courses Icon. This icon helps users discover new courses and browse different categories within the app.

You’ll learn how to:

• Create a visually clear and intuitive explore icon

• Maintain visual balance with the other icons in the navigation bar

• Set up both active and inactive states using variants

• Keep the design clean, scalable, and aligned with your overall style

This icon will guide users into the discovery part of the app, so we’ll make sure it feels interactive and welcoming.

In this part, we’ll design the third navigation icon — the Leaderboard Icon. This icon represents the competitive and motivational part of the app, where users can track their progress and compare with others.

You’ll learn how to:

• Design a simple yet meaningful leaderboard icon that fits the app’s style

• Use consistent line weight, size, and spacing

• Create active and inactive states using variants

• Keep the icon clean and easily recognizable, even at smaller sizes

The leaderboard is a fun way to keep users engaged, so this icon plays an important role in the overall experience.

In this part, we’ll design the Bookmark Icon, which allows users to save their favorite or ongoing courses for quick access later. It’s a key feature for improving learning flow and personalization.

You’ll learn how to:

• Design a clean and recognizable bookmark icon

• Maintain harmony with the other navigation icons

• Use proper alignment and spacing for a polished look

This icon adds a helpful feature to the user’s journey and supports better course management inside the app.

In this final part of Day 5, we’ll complete the bottom navigation by designing the last two icons — the Saved Icon and the Profile Icon.

You’ll learn how to:

• Design a clean and minimal Saved icon, showing bookmarked or favorited content

• Create a user-friendly Profile icon that represents the user’s personal area

• Apply consistent styling and sizing to match the other icons

• Arrange everything inside a well-structured bottom navigation bar

By the end of this video, your navigation system will be complete, polished, and fully ready for interaction.

In this final part of Day 5, we’ll talk about finding vs creating navigation icons — and how you can do both right inside Figma using the Iconify plugin.

You’ll learn:

• How to find professional icons quickly with the Iconify plugin

• How to search by keywords and choose between outline or filled styles

• The benefits of using ready-made icons vs. designing your own from scratch

• How to tweak and customize any icon to match your app’s look

• Why using consistent icon styles improves your overall UX

By the end of this video, you’ll understand how to save time with Iconify while still keeping your design unique and polished.

We started by building a reusable navigation component using variants in Figma.

You’ll learn how to:

• Design a clean and functional bottom navigation bar

• Create variants for each icon (active and inactive states)

• Use auto layout and proper spacing for consistency

• Build a component that you can reuse across all screens

This step sets the foundation for connecting all the major parts of our app through a professional navigation system.

In this part, we designed the Explore/Designer Page, where users can easily search and browse courses based on their interests.

You’ll learn how to:

• Design a clean and minimal search bar

• Create a layout for course categories (like UI, UX, Product Design)

• Make the screen easy to explore and user-friendly

• Use consistent styling and spacing to maintain visual balance

This screen helps users discover content faster and improves the overall learning experience of the app.

In this part, we created the Leaderboard Page, where users can see their rank and compare progress with others.

You’ll learn how to:

• Design a clean and structured leaderboard layout

• Highlight top users with different visual styles

• Organize content using auto layout and proper spacing

• Make the page feel motivational and fun

This screen adds a competitive and social element to the app, helping boost engagement and user retention.

In this part, we designed the Profile Screen, where users can view and manage their personal info and progress.

You’ll learn how to:

• Create a layout showing the user’s name, avatar, progress, and badges

• Use proper spacing and structure to keep the screen clean and easy to follow

• Design a UI that feels personalized and interactive

• Add elements like edit profile, achievements, and quick links

This screen helps build trust with users by giving them a space that’s all about their journey and success.

In this final part of the beginner section, we designed the Settings Screen and wrapped up everything we learned so far.

You’ll learn how to:

• Build a clean and simple settings layout

• Add useful options like notifications, account settings, theme modes, and more

• Use auto layout to keep things organized and scalable

• Make your design user-friendly and consistent with the rest of the app

We also finalized the beginner section of the course, preparing you to move confidently into more advanced design topics. Great job making it this far!

In the final part of Day 6, we focused on the Explore Page and took it a step further by integrating prototyping for interactive flow.

You’ll learn how to:

• Design the Explore Page with category selections and content filtering

• Link screens using interactive prototyping to create smooth transitions

• Set up interactions like tap actions and screen navigation

• Ensure the user journey feels intuitive and seamless

This part of the course wraps up the design process and prepares your app for real-world testing and user interaction.

Before we jump into the Daily UI challenges, it’s important to refresh our understanding of color. In this lecture, I’ll walk you through:

• The difference between primary, secondary, and complementary colors

• What makes a color warm, cool, bright, or muted

• How to use the color wheel to create better contrast and balance

• Why color matters in user experience and emotional design

• Tips for choosing colors that work well in real product screens

This is a quick but essential lesson to make sure you approach each UI challenge with strong visual decisions.
Let’s sharpen your design eye and prepare your color sense for daily creative work.

In this video, I’ll introduce you to the Daily UI Challenge — a popular design practice used by thousands of designers to improve their skills and build better portfolios.

What you’ll learn in this video:

• What is the Daily UI Challenge

• Why it’s valuable for beginners and growing designers

• How solving one UI problem a day builds real design confidence

• How I’ll guide you through this journey step by step

• What tools and mindset you’ll need to stay consistent

This is your starting point to build habits, sharpen your creative thinking, and prepare for real-world design tasks. Let’s get into it.

In this video, we’ll begin designing the first Daily UI challenge — the Sign Up Page — by creating a low-fidelity wireframe.

You’ll learn how to:

• Plan the layout and structure of your screen

• Focus on user flow, spacing, and basic elements

• Use wireframes to stay fast and focused before jumping into visuals

• Think like a product designer by asking: “What does the user need to do first?”

Wireframing is a key part of every design process.
This step helps you avoid distractions and keeps your focus on usability and function, not style.

Let’s sketch the foundation of our first UI.

In this video, we’ll create a moodboard to guide the visual style of our Sign Up page and explore how to find the right UI inspiration online.

You’ll learn:

• What a moodboard is and why it’s important in UI/UX design

• Where and how to find good visual inspiration (Dribbble, Behance, Mobbin, etc.)

• How to choose colors, fonts, and styles that fit your goal

• The difference between copying and being inspired

• How to collect and organize references in Figma or online tools

Before we jump into the final design, this step helps you stay consistent, creative, and clear about the look and feel you want to create.

Let’s set the tone before we start designing.

n this video, we’ll design two core screens — Sign Up and Sign In — based on the wireframe and moodboard we prepared earlier.

What you’ll learn:

• How to apply visual design to your layout

• Choosing fonts, spacing, and structure with clarity

• Designing with accessibility and usability in mind

• Creating consistency between Sign Up and Sign In screens

• Using color and components the smart way

By the end of this video, you’ll have two fully designed screens ready to showcase — and a solid understanding of how to build clean, user-friendly entry points for any app.

Let’s bring your design to life.

In this final video, we’ll take the work you’ve just created — your Sign In and Sign Up screens — and upload it to Dribbble.

You’ll learn:

• How to export your UI screens for Dribbble

• Tips for writing a good post title and description

• Why sharing your work online helps build confidence

• How to start growing your online design presence

• Simple ways to stand out and attract feedback or clients

This is more than just uploading a shot.
It’s about building your voice, building your profile, and starting your real journey as a designer.

You’ve done the work — now let the world see it.

In this video, I’ll introduce you to Daily UI Challenge 02, where we’ll design a full checkout process.

What we’ll cover:

• Why the checkout flow matters in any product

• What screens are included (billing info, payment, confirmation)

• Common mistakes designers make in checkout UX

• How we’ll use AI tools to help us brainstorm and improve faster

• What to expect from this challenge and how to approach it like a real project

This is a must-have skill in your UI/UX toolkit — and by the end of this section, you’ll have a smooth, modern, and user-friendly checkout flow ready to share and showcase.

Let’s get started with Daily UI 02.

In this video, we’ll take the first step toward designing our checkout flow by using AI tools to help with brainstorming ideas and collecting references.

You’ll learn:

• How to use AI to generate layout suggestions and UX patterns

• Getting quick text ideas like button labels or confirmation messages

• How to collect high-quality design inspiration for checkout pages

• Creating a clean and focused moodboard to guide your UI

• Setting a consistent visual tone before jumping into design

This is where creativity meets speed. With the help of AI and visual references, you’ll have everything you need to confidently move into the design phase.

Let’s build the foundation together.

In this final video for Daily UI 02, we’ll take everything we planned — the moodboard, AI ideas, and structure — and turn it into a finished checkout UI.

You’ll learn:

• How to design a clean and modern checkout experience

• Structuring the screens (billing, payment, confirmation)

• Applying visual style based on your moodboard

• Exporting and placing your screens into mockups

• Tips for uploading and presenting your design on Dribbble

By the end of this video, you’ll have a complete, polished project — one that not only looks good but also improves your portfolio and online presence.

Let’s bring your design to life and share it with the world.