One of my most popular lessons ever is about Design Systems. It’s a comprehensive guide to how to learn and steal from them.

One of the examples I use is Google’s own Material Design System, explaining exactly how to steal from it and use it as a free design course – paradoxically, they chose to feature it in their Google UX Design Certificate Course 🙃.

But why?

While most articles talk about what a design system is and how to make one, in my course, I had been framing them as a teaching tool to help my students explore and learn best practices and principles of atomic UI design, UX and Product Design.

Because what many designers don’t notice is that existing design systems are a tremendous untapped resource for learning UX/UI design just by studying them!

What better way to understand how to design a user flow for e-commerce than from Shopify or an iOS mobile app than from Apple?!

Design Systems are full of what we call UI Components and Design Patterns and great product designers know how to use these to inform their decisions and how best to assemble them to create their own designs.

The best part — there is no need to reinvent the wheel when it comes to learning about these, not when the best companies in the world have already paved the way, tested them with actual users and published their methodologies online in the form of a freely available design system.

“Sometimes I think everything I draw is just a combination of all of the millions and millions of drawings I’ve seen.”

So how can you learn and steal from Google?

Well it starts by taking a look at their design system. The current iteration they’ve released is called Material Design 3: Expressive.

It’s completely open source and it contains every atomic UI component, style, typographic rule, motion system and foundation of UI design you could ever need to know about.

It’s basically a free course in UI/UX design.

How to get started stealing

I recommend exploring the online guide and also downloading the Design Kit for Figma so you can follow along and play with it yourself. Here’s how use it as a study guide and reference.

Part 1: Philosophy

First up, we have the philosophy of Material Expressive Design System.

If you’re familiar with Material Design 2, Material 3 isn’t a dramatic visual overhaul or departure from that. It’s more of a mindset shift.

The earlier versions of Material Design were about giving everything a clear, consistent Google look — strong colors, clear structure, recognizable patterns. It was polished and unified. Material 3 — often referred to as “Material You” — shifts the focus from consistency to personalization. Instead of saying, “Here’s how Google apps should look,” it asks, “How can this system adapt to the person using it?”

So the biggest difference isn’t just softer corners or new color rules. It’s that the design system becomes flexible by default. It can generate its own color palettes, adjust to light or dark mode more fluidly, and feel less rigid without losing structure. If Material 2 felt like a carefully designed uniform, Material 3 feels more like a tailored outfit — still structured, but made to fit the individual rather than the brand alone.

Every design system needs to have an underpinning philosophy like this, something that stems from the product’s vision and the ideal user experience you want people to have when they use your product.

🥷🏼How to steal from this: Think about your own design philosophy and how you would write something like this for a product or project you are working on.

Part 2: Foundations

The Foundations section defines the core structural rules that govern how an interface is built and should behave in different environments.

Accessibility

If you haven’t spent time learning about accessibility and accessible design yet, this is a great place to start.

Here’s you’ll get introduced to accessibility concepts, requirements and goals, the minimum requirements established by WCAG that you need to have in order support specific human needs and how things should be documented across your components and pages.

Assistive Technology

You’ll also learn about assistive technology, how to support different disabilities and the various inputs and outputs that make it possible.

Adaptive Design

Another area of foundations is Adaptive design, like accessibility it’s another one of those silent design techniques that is often left ill-considered. Things like how user preferences affect the visual design, device usage and the conditions that determine layout, sizing and presentation.

Interaction Design

Interaction design deals with things like gestures, inputs, selections and states and are an extremely important part of UX design. Things like selection indicators, how users enter text into fields, focused and hover states of buttons are crucial experiences every designer must consider.

🥷🏼 How to steal from this: Start to build an mental map and checklist of the ‘invisible’ things that your designs need to consider and accomplish.

Part 3: Styles

Now, onto the flashy stuff. Like most design systems the styles section deals with the visual identity of the components and elements you see on screen. Things like colors, elevation of cards, icons, graphical elements and shapes, typography and even motion design.

One of the most important and more advanced aspects of M3 is in the color schemes section. It’s no longer just about choosing a static color palette, but about choosing dynamic color schemes that change based on personalization and interaction on the user-side. It’s a whole other world to consider, with many color decisions to be made and permutations to be tested.

🥷🏼How to steal from this: You can quite literally steal their color palettes, icons and fonts. Check the most up-to-date resources in each section of the guide for links.

Part 4: Components

My favorite part. Product design is all about these tiny, little atomic elements that stack together to form bigger and more useful elements. The way we assemble and choreograph the interaction of these elements is what matters the most.

Google organizes these components into 6 main categories:

• Action
• Containment
• Communication
• Navigation
• Selection
• Text input

I love the simplicity of this. It takes an otherwise seemingly endless list of components and makes it mentally manageable and gives them a distinct purpose.

☑️ Checkboxes - that's an action component

📆 Date and Time Picker - those are selections

⚠️ Dialogs - these are communication (and maybe an action thrown in there for good measure)

🥷🏼 How to steal from this: Learn what each of these are, how to use them and practice assembling them and designing them yourself from scratch to form larger components and entire screens and flow.

Bonus - Part 5: Advanced Studies and ‘Thievery’

Each component has a ‘Specs’ tab where you can go deeper into the granular aspects of things like design token naming as well as precise spacing and sizing of these elements.

Now this is just Google’s way, but as you learn and improve your design skills this is the kind of precision you should be aiming for with your own design elements and thinking about how to document and communicate them clearly to other designs and developers on your team — this is part and parcel of excelling and your craft.

Everything you need to become a great product designer is all here, and it’s here for free. You just need to know how to look at it and how to steal from it.

I've spent hundreds of hours vibe coding and building apps this year trying out new tools and helping my students and businesses build products with AI. What I found is that most people are doing it wrong and wasting a lot of time and credits in the process.

What you're going to learn

If you want to be better than most at vibe coding, I'm going to show you my four-step framework for figuring out what idea you should build, what to do to make it successful, what tools you should use, and how to turn your idea into a real app step-by-step.

We're going to do this by building a complex SaaS app together that integrates AI LLM APIs like OpenAI, Google Gemini 3 and Anthropic and third-party apps like Google Calendar.

Who this guide is for

Whether you’re a designer, a developer, a product manager, or a founder I'm curious– what is the closest that you have come to building a really good app? Did you get stuck at some stage? Was it learning the tool? Was it the prompting? Did you have trouble coming up with an idea?

If any of those things have plagued you in the past, this guide will help you overcome those hurdles and make something better than average and will save you a significant amount of trial and error—not to mention wasted credits.

Step One: Research and Problem

Step one is research and problem definition. This is by far the most important step, but it's the part that people don't spend nearly enough time on.

It all starts with picking the right problem to solve. And keep in mind that I said the right problem to solve and not the right solution to build. So I wanted to solve a problem that I had and that my fellow creators and teachers and founders that I know complain about constantly and that is

How do we create better social media posts to get more eyes on our content? So for this we need to do some good old-fashioned user and market research because honestly, building is easy now, good ideas and distribution are really hard.

I kicked off my research by talking to a bunch of folks that I know who are content creators to see what they're doing, what they're struggling with.

Whatever it is, spend as much time as you can getting to know the people and the problem space. If you're thinking about launching and monetizing later, this is even more important.

🔸Do enough people have this problem?

🔸How would you actually get out in front of them?

🔸Would they pay to solve this problem?

Competitive Analysis

What about existing products that already do this? Buffer is an example of one of the most popular social media scheduling tools, and this is what it generates with its AI assistant.

Buffer, for example, is one of the most widely used social media scheduling tools, and it now includes an AI assistant for generating posts. But examining existing products often reveals an important truth: the presence of a solution doesn’t guarantee the quality of that solution. And it certainly doesn’t mean there isn’t room to create something better.

Research Insights

The purpose of this early research phase is to uncover two or three meaningful insights and define a clear unique value proposition—something that will guide every decision that comes afterward.

After interviewing, surveying, and having long conversations with other creators and founders, here’s what emerged:

💡 Insight 1: Each platform has its own etiquette—and its own “invisible rules.”
There are subtle algorithmic preferences and formatting conventions baked into every platform. Most people only learn them by running countless small experiments, paying attention to what performs, and noticing what quietly gets suppressed.

💡 Insight 2: AI thinks in content. People think in shapes.
AI can generate a persuasive block of text, but that doesn’t mean it will work on a platform like LinkedIn. Humans respond to structure—the shape of the post, the rhythm of the lines, the use of emojis, how much appears above the fold, and the overall scannability. These visual qualities often matter more than the words themselves.

What many creators are doing right now is cobbling together their own workflow: digging through past notes, asking friends for advice, and relying on a patchwork of tools. Meanwhile, those who have been writing online for decades have a strong intuition built from trial and error—not abstract theories.

Which leads to the unique value proposition for this project:

💡 The real value comes from the accumulated, hard-earned knowledge you can’t find by browsing the internet.
Capturing that lived expertise—those nuanced rules, patterns, and formatting instincts—is what will make this tool genuinely useful, and it’s why I feel confident moving forward with it.

Step Two: Plan and Strategize

Step two is planning and strategizing. I need to come up with the features and the UI and the user experience that I want for the app. It doesn't have to be a massive startup idea, either it can be:

App Ideas

• An internal tool that saves you time
• Something that reduces a repetitive task
• A B2B tool like a dashboard or an automation
• Something that consolidates scattered tools

To save myself time here, I'm going to start by enlisting the help of ChatGPT.

I mentioned earlier, most people are doing it wrong. They just type in a single prompt asking the AI to build them something. But if you want to spend a lot less time going back and forth with the agent and debugging things, then I recommend ditching the prompt altogether and doing something called Metaprompting.

Prompting is telling the AI what to make.

Metaprompting is telling the AI how to think.

Usually, it's done by asking one AI to generate a complex prompt that you will then give to another AI.

That's exactly what we're going to do here with ChatGPT.

Generating a PRD (Product Requirements Document)

At this stage, I take all of my research—the notes I’ve gathered, the insights from conversations with other creators, and the unique angles I want this app to have—and paste it directly into ChatGPT. I usually format it as a set of bullet points so the model can clearly understand what matters most.

Then I give it a ChatGPT simple instruction:

I want you to act like a co-founder and help me build this app idea called Visual Virality. Ask me any questions you need to such as:

• Who is this app for?
• What is the problem statement?
• What are the user stories?
• What type of app am I building?

💡The goal here with the metaprompt is to generate a PRD, which is known as a product requirements document that I will then give to to my AI Coding Agent.

From there, ChatGPT generates a full metaprompt tailored for the agent. It prepares a structured PRD, user stories, and the checklist logic I'll need for platform-specific formatting and algorithm-aware best practices. It even outlines the core user flow and captures details like microinteractions and small animation moments I want to include.

Looking at the output, it’s clear that this project will require support from multiple tools—likely several third-party integrations and definitely some AI assistance. The PRD becomes a guide for choosing which AI models or coding agents will work best for each part of the build.

Since this project branches into so many “side quests”—content generation, platform previews, research tasks, design details—the agent that I want to use is Replit.

Vibe Coding Agent Features

I've tried out a lot of different AI generation tools this year and by far, Replit is the most non-technical-person friendly that's still capable of making really complex apps without having to do any technical stuff.

✅ It lets you design it, build it, and deploy it.

✅ It has a super smart agent to help you.

✅ It integrates really well with Figma, which I like because it's a tool that I'm in all day anyway as a designer.

✅ I don't need an API key or to make like a developer account in order to integrate my app with things like Claude or OpenAI. I can use third-party connectors and integrations like Google Calendar.

✅ I don't have to worry about losing all of my work because it has built-in version control.

Those are just some of the things to consider when you're choosing what tools to build your app with. And for all of those reasons, I'm going to go with Replit.

Step Three: Design and Build

Once inside of Replit, the first thing you’ll notice is the main prompt screen. From here, you can decide how you want to begin: either by generating a quick design prototype or by diving straight into a full build that includes integrations, a database, and complete app scaffolding.

The Design feature is a prototyping tool - this route is lighter and faster—essentially a visual draft—while the full build creates the structural foundation for a working application. You can start with either and choose which direction to go in once you finalize your plan in the next step.

Adding LLM APIs and Tool Integrations

I started by pasting in my problem statement and the general description of what I want the app to become. After that, I added the specific integrations and LLM's that will power the app.

In Replit, integrations and connects are added using a simple backslash command. The left panel also shows every available integration, including newly added options for OpenAI and other large language models. You can search for what you need or scroll through the list to explore what’s available.

• /openai for generating written content
• /gemini for image generation using the latest Gemini 3 model
• /anthropic for deeper content generation and research-oriented tasks

I also pasted the full PRD into the prompt so the system has a clear blueprint for what it’s building.

If you already have mockups or screen examples or even a Figma design file, Replit lets you upload those as well, which helps guide the layout and interactions.

Within a few seconds, it produced a complete plan and confirmed that all of the integrations were active. It’s a surprisingly seamless way to set the foundation for a more complex AI-driven app.

Adding Google Calendar Integration

When I’m setting up an AI-assisted build in Replit, one of the first things I do is check and tweak the project plan. In this case, I realized I forgot to include a Google Calendar integration, so I went back into the plan to add it. Replit makes this part simple: after adjusting the details, it immediately surfaced the Google Calendar connector, and I connected it to my account. Once authenticated, the plan refreshed itself with the new functionality woven in.

At this stage, Replit gives you a choice: you can generate a full build with the database scaffolding included, or you can begin with a design prototype. Starting with the design is usually the faster route—it takes about five to ten minutes—and it gives me a chance to check whether the layout and general direction feel right before committing to a longer build. The full version, with everything wired up, takes closer to twenty minutes.

For this project, I opted to begin with the design prototype. It’s a good way to get a sense of the app’s structure and aesthetics before moving into deeper implementation.

Designing the prototype with Replit Agent

Once you click Start Designing, Replit opens up a split workspace. On the left is the agent—a conversational assistant you can collaborate with to create features, test ideas, and make adjustments. On the right is the live preview area, where the app begins to take shape.

Replit starts by generating the interface as a lightweight prototype. You can actually watch it assemble components, iterate through design steps, and stitch everything together into an interactive layout. In my case, the entire process finished in about eight minutes, and the cost of that work came out to $2.34. For what it produced, that’s remarkably efficient.

The prototype included all the foundational sections I planned for:

• Posts, backed by a database where everything gets stored
• A calendar view for upcoming scheduled content
• A Google Calendar sync option
• Even a built-in analytics section

It’s impressive how much Replit can scaffold with very little input. If the final version resembles anything close to this prototype, we’re in great shape.

Testing it out, I selected a topic—productivity—and set the campaign goal to comments. From there, I generated a batch of “viral” posts. The interface responded with smooth microinteractions and subtle animations, the kind of polish that makes an experience feel thoughtful and intentional.

The preview displays every post on a single canvas so you can see the variations side by side. You can adjust the “angle” or framing of the post based on different characteristics, regenerate alternatives, and evaluate how everything reads visually.

At the bottom sits the posting checklist—a set of best practices sourced directly from the interviews and research I compiled earlier and then encoded into the PRD. It’s the small, experience-driven details like these that help the tool feel genuinely useful rather than generic.

Editing the design

While reviewing the prototype, I noticed a design pattern I really liked—something I remember seeing on Mobbin. To incorporate it, I grabbed a quick screenshot (though mocking it up in Figma would work just as well). Replit allows you to attach Figma designs, link prototypes, or upload reference files directly, so I uploaded the image to guide the next iteration.

The pattern included a bit more contextual information for each platform, a clear checkmark to show which ones were selected, and a visual indicator for features locked behind a pro upgrade. I asked the agent to update the design so the platform list matched this style, including the ability to paywall certain platforms.

Within a moment, it regenerated the layout with those elements added.

Fixing the design

After making those changes however, I noticed the icons for X, TikTok, and Threads were missing. This is the sort of small inconsistency you only catch once you see the design in context, so I asked it to continue iterating.

These are the kinds of quirks that come up during early design exploration—little mismatches, missing pieces, or incomplete details—and they’re easy to correct once you spot them.

The agent actually found that the icons weren’t actually missing—their colors simply matched the background, making them invisible. The agent picked up on the issue, reasoned through what was happening, and corrected it. Once updated, the icons displayed properly.

At this stage, if you’re a designer or a product manager, this is an ideal moment to pause and share the prototype with your team. It gives everyone a chance to react to the direction, catch anything that feels off, and give early feedback before the build phase begins. It’s far easier to adjust concepts here than after everything is coded.

Building the app with a database

Once the prototype feels solid, it’s time to move into the actual build. At this point, all I need to do is click Build Functionality, and Replit begins assembling the real application. It generates the database, creates the underlying app structure, and wires in all of the integrations we added earlier and makes sure everything functions smoothly.

First version

Once the build phase finished, Replit produced a working version of the app with all the elements from the prototype now fully functional. This is the moment where the real evaluation begins—testing how everything behaves, not just how it looks.

I started by entering a simple UX/UI topic, selected a few platforms, set the tone to something casual, and generated a batch of posts. The results were surprisingly solid—short, witty, and formatted in a way that genuinely resembles content I’d post on LinkedIn or see from other creators.

A few flow gaps stood out immediately. The app didn’t generate images for Instagram or TikTok, which means the image-generation flow still needs refinement. And on LinkedIn, I tend to prefer posts with more visual rhythm—emojis, line breaks, and shape. The structure of the content matters just as much as the words themselves.

To troubleshoot effectively, I started taking each platform one at a time. This step-by-step approach—one feature, one screen, one flow—is the only way to build something complex without getting overwhelmed. After guiding the model through a few refinements, the LinkedIn output improved dramatically: cleaner formatting, no strange characters, and much more personality.

Along the way, you’ll run into countless small adjustments like this. I recommend capturing them in a simple Kanban board—I use this one in Notion to keep track of bug fixes, design tweaks, and future enhancements.

Having a place to store insights and edge cases keeps the process organized and prevents ideas from slipping through the cracks.

Adding Gemini 3 Image Generation

The next issue to address was the absence of images for platforms that rely heavily on visuals. None of the posts had accompanying graphics, so I asked the system to use Gemini 3 to generate a relevant image for each one.

Replit updated the plan accordingly: OpenAI would handle the written content, Gemini would create the graphics, and Anthropic would score the results. With that in place, I ran another test to see what the new outputs looked like.

The images were better than I expected—coherent, on-topic, and aligned with the tone of each post. There’s still room to refine them by specifying the exact style or visual identity I want, especially if I want everything to match a consistent brand aesthetic. But overall, the results felt contextual and integrated well with the surrounding text.

Step Four: Iterate and Improve

When you’re building with AI—especially with tools as capable as Replit—it’s tempting to aim for a fully featured product right away. But it’s always better to start small. Treat your idea like a product roadmap: add one feature, refine it, and iterate over time. The more intentional and focused you are at each step, the easier it becomes to maintain clarity as the project grows.

If you already have a sense of how you want the interface to look, tools like Mobbin are incredibly helpful for exploring real design patterns. Pulling from examples that have been tested in the wild gives you a stronger foundation and helps the agent understand the type of experience you're aiming for.

It also helps to use clear vocabulary when describing your vision to the agent. You don’t need to speak in highly technical terms, but being able to reference basic frameworks, animation styles, or thematic design elements makes a noticeable difference. It gives the AI stronger creative direction and results in a UI and user experience that feels intentional rather than generic..

Testing Google Calendar Connection

With the main features in place, I moved on to exploring the rest of the screens and testing how the app behaves end-to-end. The posts that were generated appear in a central dashboard where each one can be edited or copied. What I really wanted, though, was the ability to add a post directly to my Google Calendar.

I asked the agent how to enable scheduling, and after running a quick set of fixes, it updated the interface. A new option appeared in the context menu, allowing me to choose a date and time—so I scheduled a post for 9:00 a.m. on Tuesday.

To my surprise, the moment I opened Google Calendar, the post was already there, automatically created through the integration. Seeing an app I’m actively building communicate with tools I use every day felt remarkably satisfying. It’s a small feature, but one that makes the project feel real.

This is also the kind of functionality that would be far more tedious to implement with most other AI-assisted coding tools. Replit handles it with almost no friction, which makes iterating on ideas significantly faster.

From here, the process becomes a loop:

1. Build a feature.
2. Test it in the real world.
3. Share it with the people you interviewed earlier.
4. Gather feedback.
5. Adjust and refine.

That cycle is where the product actually becomes useful.

I’ve done other full builds with Replit as well, so if you’re curious about what deployment looks like or how different concepts evolve from prototype to production check that out. You’ll also find more Replit resources and a link to claim $10 in free Replit credits if you want to try building something yourself.

And if you're interested in learning how to research, design, and build thoughtful products—using tools like Replit while understanding the fundamentals of UX and UI—I teach all of this in my course.

We've got an incredible round-up of deals and discounts happening in 2025. This covers everything from holiday discounts, Black Friday deals, and Cyber Monday codes. Find discounts on the best design and development software, tools, SaaS apps and more. If you're a graphic designer, web designer, UX/UI designer, product designer or developer, this is the place to find all the best discounts happening this year!

Courses and Communities

DesignerUp Product (UX/UI) Design Course

Ranked 2025's Best Design Bootcamp—the DesignerUp Product (UX/UI) Design Course is the most comprehensive self-paced course with 1:1 mentorship online!

Learn the skills and techniques to design apps and software and end-to-end products from zero-onem including UX, UI, business, product management and strategy:

✅ Self-Paced, On-Demand Lessons

✅ 74+ Original HD Video Lessons

✅ 1-1 Instructor Assessment and Feedback

✅ Community Access

✅ Live monthly video calls

✅ Real-World Exercises and Projects

✅ Figma/FigJam Design Files

✅ Course Notes and Cheat Sheets

✅ Software Tutorials Vault

✅ Certificate of Completion

✅ Lifetime Course Access

🚀 Figma Professional EDU plan free for 12 months Worth over $200!(Bonus)

🚀 Project Management System for Notion - Worth over $100! (Bonus)

🚀 Access Software Discounts Vault - Worth over $400! (Bonus)

This year you can get $100 off of DesignerUp's Product (UX/UI) Design Course as well as on any of their Notion Templates for Designers.

For a limited time this bundle also includes access to Figma Pro EDU plan for 12 months--a whole year! (that's over $200 in value!)

Product Strategy for Designers - Femke Design

Tired of being the last person in the room to hear about product decisions? Ready to stop pixel-pushing and start shaping strategy?

Product Strategy for Designers is the course that helps you go from executing other people's ideas to influencing the roadmap from day one. Over 500 designers have used this course to finally get a seat at the table—and the confidence to speak up once they're there.

• Learn from 21+ design and product leaders at Google, Stripe, Uber, Discord, IKEA, and Shopify—not just theory, but real strategies they use to influence product decisions

• Proven results: Students have landed senior promotions, secured new job offers, and transformed how their teams see them—some even got interview questions that matched course content

• Practical, not theoretical: Every module includes hands-on exercises and templates (PRDs, design vision planning, etc.) you can use immediately in your actual work

• Bridges the designer-PM gap: Specifically designed to help designers speak the language of product and get involved in strategy before solutions are handed down

• Self-paced with lifetime access: Learn on your schedule, revisit materials whenever you need them, and join a community of 400+ designers in the Level Up Club

• Goes beyond craft skills: Focuses on the strategic thinking, communication, and influence skills that actually get designers promoted—the gap most design courses ignore

Accessible Design and Content Course

We can't recommend this course enough of the importance of the information it provides! The Accessible Design and Content Course is a practical, self-paced course that transforms how you think, design, and collaborate. Whether you’re a solo designer looking to stand out by offering accessibility to your clients, or a company wanting to empower your team, you'll gain the knowledge and confidence to embed accessibility into your everyday practice – for better conversions, more compliant products, happier users, and stronger, more motivated teams.

This is the course Piccia Neri wishes had existed when she started learning about accessibility as a designer and content creator. Every module will include real-world examples, accessible design practices, and explicit references to WCAG success criteria: all explained clearly and accessibly (of course). Every lesson will also be stand-alone: you won’t have to watch the entire course in order to get the answer you need right now. 

This is a Black Friday offer on top of the existing pre-sale offer! Lock in this incredibly affordable price now and join the live rehearsal sessions. 

What you'll learn:

• Design accessible typography, colour palettes, layouts and interactions
• Create inclusive visuals, web pages, app screens, and social content
• Navigate WCAG success criteria with confidence
• Apply practical accessibility knowledge to real-world projects
• Transform your team's approach to inclusive design

With the European Accessibility Act deadline already being enforced, and more global legislation gathering strength, now is the time to future-proof your skills and your business. Make accessibility your design superpower! 

IntoUX "Job Hunt" community access

IntoUX helps designers navigate the UX job hunt with structure, clarity, and consistent practice. Everything centers on building a strong portfolio, sharpening your storytelling, and learning how to communicate your value in a market that’s constantly shifting. Members join 8+ live sessions each month — portfolio reviews, case study critiques, storytelling workshops, interview practice, and whiteboarding challenges — all designed to help you present your work with confidence and stand out to hiring managers.

• Imagine landing your dream UX job, the kind that truly shifts your income — for the price of a $170 yearly membership.
• Move toward this outcome with sharper storytelling, a stronger portfolio, real interview practice, and AI-powered support.
• Plus, a full year of Figma Pro (worth $240 on its own) + a community that has your back for a whole year.

Figma Fast-Track Course

Learn how to craft beautiful product designs faster in Figma. In this course, you build an efficient design process and learn how to deliver high-quality designs that "Wow" your product team and end users while leveraging AI.

Here's what you'll walk away with by the end of this course:

💎 Putting together a design system from scratch

💎 Turning concepts into wireframes

💎 Structuring your designs using Components, Auto-layout, and Variables

💎 Creating responsive designs for web & mobile

💎 Leveraging AI (both inside Figma and out) to get more done faster

💎 Creating an advanced prototype using Animations and Variables

💎 A complete mobile & web app design that you can add to your portfolio

💎 Direct feedback from me in your Figma file

What you'll get:

✅ You get to join a community of like-minded designers

✅ You get up to 6 months of Figma Professional Features Included ($90 value)

✅ Lifetime access to 160+ lectures that you can watch at your own pace

✅ 6 Live Zoom sessions for group learning and Q&A as we design together

All while learning how to put together designs from scratch.

AI Design Academy

Vibe Coding & Prototyping AI apps with Cursor. Translate your ideas into functional AI-powered products using LLMs so you can design, communicate, and iterate faster.

• Hands-on, project-based learning
• Taught by an industry expert who has trained 300+ designers and leaders
• Walk away with functional AI apps powered by LLMs not just frameworks or theory, but real working builds
• Easy-to-follow teaching style trusted by designers from leading companies such as Google, Chase, HubSpot, Intercom, and more

Tools and Software

Mobbin

Mobbin is an online platform tailored for UI and UX designers seeking inspiration from real-world mobile and web applications. It features an extensive library of over 300,000 screens sourced from more than 1,000 popular iOS, Android, and web apps, making it one of the largest repositories of design patterns available. Mobbin allows users to explore complete user flows, from onboarding and navigation to micro-interactions and transitions, offering deep insights into how successful apps structure their user experiences. Its advanced search and filtering tools enable designers to pinpoint specific design patterns or features based on categories, platforms, or keywords, significantly speeding up the design research process. With Figma integration, users can easily download or import designs directly into their projects, streamlining the workflow. The platform also allows users to create personal collections, where favorite designs can be saved and organized for future reference.

Shadcn UI Components

Explore 1,000+ Shadcn components, 550+ UI blocks, and the powerful AI Theme Generator — all designed to help you build sleek, customizable React + Tailwind projects effortlessly. Create anything from SaaS dashboards and landing pages to modern web apps — all powered by shadcn/studio.

Framer

Build a website without coding, complicated setups or endless plugins. Framer’s Black Friday Deal — 50% off your first year — is a great chance to try a visual website builder that feels intuitive and fast. Whether you’re creating a portfolio, a small business website, a landing page, or a blog, Framer lets you design and publish in real time so you can see your ideas come to life instantly.

You can start with responsive templates, add your own branding, connect your domain and update everything with simple drag-and-drop tools. It’s a gentle way to bring your design or creative work online without the usual technical hurdles.

If you’ve been searching for a no-code website builder, an easy portfolio builder, or a smoother way to launch a professional website, this deal makes it a good moment to finally start.

Setapp

Setapp is one of those tools that quietly simplifies your entire workflow. Instead of bouncing between random downloads or paying for a dozen separate apps, you get a whole collection of curated Mac and iOS apps in one place. It feels like having a toolbox that’s already been sorted for you — writers, designers, developers, and anyone who just wants their digital life to feel a little lighter will find something useful.

You can install what you need with one click, try new apps without worry, and keep everything updated without lifting a finger. Whether you’re looking to stay organized, clear your mind, focus better, manage files, or keep your system running smoothly, Setapp brings all of those everyday helpers under one subscription.

Webflow

Webflow’s Black Friday and Cyber Monday sale is a good moment to finally start building the website you’ve been picturing. If you’ve been searching for an easy website builder, a no-code design tool, or a way to create a professional portfolio, business site, landing page, or online store without handing everything over to a developer, Webflow makes that feel doable and even enjoyable.

You can design visually while still having the freedom to customize layouts, interactions and responsive breakpoints in a way that feels closer to real design work — not just dragging blocks around. Everything updates in real time, hosting is built in, and you can publish with one click. For anyone who wants full creative control without the technical stress, it’s a smooth, all-in-one setup.

Replit

Replit gives you a way to build full, working apps using plain language — almost like talking your ideas into existence. You can simply describe what you want, and Replit will generate the structure, the code, the UI and the logic for you. It’s not just snippets or suggestions; it can create entire, functional projects you can edit, refine and deploy right from the same workspace.

If you want an AI-powered app, an interactive tool, a web app, or something that connects to external APIs, you don’t have to hunt for API keys or wire everything up yourself. Replit handles that behind the scenes so you can focus on shaping the actual experience. You can pull in data, build features, and adjust your app with natural-language prompts, and the platform will rewrite or expand the code for you without breaking your flow.

And when your app is ready, deployment is built-in — no servers, no configuration, no separate hosting. You just click to publish, and your project goes live.

If you’ve been looking for a calm, browser-based space where you can create real, AI-powered software from simple prompts, test everything instantly, connect APIs without the hassle, and deploy in minutes, Replit makes that feel incredibly accessible.

Buzzy AI

Buzzy AI is a no-code platform that transforms your app ideas into fully functional web or mobile applications within minutes. By integrating artificial intelligence with Figma, it enables users to generate high-quality designs and operational apps without the need for coding.

Key Features:

• AI-Powered App Generation: Input your app concept, and Buzzy AI will create a comprehensive Figma design along with a working full-stack application. Buzzy
• Seamless Figma Integration: Utilize the Buzzy Figma plugin to convert your designs into functional apps directly from Figma, streamlining the development process. Buzzy
• Customizable Templates: Access a variety of ready-made templates to kickstart your project, which can be easily adapted to fit your brand and specific requirements. Buzzy
• Real-Time Editing and Publishing: Make design changes in Figma and publish updates instantly, allowing for efficient iteration and testing. Buzzy
• Scalable and Flexible: Buzzy AI supports the creation of both web and native applications, providing scalability and flexibility to meet diverse project needs. Buzzy

By combining AI capabilities with user-friendly design tools, Buzzy AI simplifies the app development process, making it accessible for individuals and teams without extensive coding experience.

Miro

Miro is a versatile online collaborative whiteboarding platform designed for teams to ideate, plan, and execute projects seamlessly. It serves as a digital workspace where individuals and groups can visually collaborate in real time or asynchronously, making it ideal for brainstorming sessions, agile workflows, design sprints, and strategic planning.

• Infinite Canvas: Offers an expansive digital workspace where users can create mind maps, flowcharts, and visual plans without limitations.
• Templates Library: Provides a rich collection of customizable templates for various use cases, including retrospectives, brainstorming, customer journey mapping, and more.
• Real-Time Collaboration: Allows team members to collaborate simultaneously on boards with features like live cursors, sticky notes, and comments.
• Integration with Tools: Seamlessly integrates with popular productivity and project management tools like Slack, Jira, Trello, Microsoft Teams, and Asana.
• Visual Elements: Includes a range of tools like sticky notes, shapes, connectors, and wireframing components for creating engaging and organized boards.
• Presentation Mode: Facilitates easy sharing of ideas and progress with stakeholders through a dedicated presentation feature.
• Cross-Device Compatibility: Accessible from desktop, tablet, and mobile devices, making it easy to work from anywhere.
• Facilitation Tools: Features like voting, timer, and attention management tools help guide collaborative sessions effectively.
• User Roles and Permissions: Offers granular control over who can view, edit, or comment on boards.

Miro is widely used across industries for activities like remote collaboration, product development, education, and strategic planning. Its intuitive design and wide-ranging capabilities make it an essential tool for teams aiming to enhance productivity and innovation.

ProtoPie

ProtoPie allows you to create realistic, multimodal, and dynamic prototypes for multi-state scenarios beyond a single device. Limitless no-code, high-fidelity prototyping awaits.

If you're new to ProtoPie, they are offering up to 40% off on yearly plans.

If you're already a subscriber, you can switch to a yearly plan to take advantage of the discount.

Screen Studio

Screen Studio makes it easy to create clean, polished screen recordings without getting tangled in timelines or complicated editing tools. You just record your screen, and the app automatically enhances everything — smooth cursor motion, gentle zooms, crisp UI highlights, and that subtle cinematic feel people love on social media.

If you’ve been searching for a Mac screen recorder, tutorial recorder, or a way to make product demos, UI walkthroughs, course videos, or app previews that look professional without hours of editing, Screen Studio does most of the work for you. You can add callouts, adjust pacing, tweak zoom levels, and export in the right formats for TikTok, YouTube, X, LinkedIn or your course platform.

It’s especially helpful for designers, developers, founders, and creators who want their recordings to feel calm, clean and intentional — not jittery or rushed. Everything happens in a simple interface that keeps your workflow light: record, polish, export.

Onestream Live

OneStream Live allows you to broadcast both pre-recorded and real-time content to over 45 social platforms and websites simultaneously. These include YouTube, Facebook, Twitch, LinkedIn, and more. Its multi-platform streaming boosts visibility, helping users reach larger audiences effortlessly.

• OneStream Live Studio for live streaming
• Pre-recorded Streaming for scheduling and pre-recorded streams
• External RTMP Streaming for live streams from other software
• Hosted Live Pages for stream landing page creation

Pixpa

Pixpa is an all-in-one, no-code website builder for creatives and small businesses to create beautiful, professional websites with an in-built online store, a dynamic blog, client galleries, ecommerce galleries, a photo gallery app, and marketing tools. Pixpa’s versatile platform has everything you need to showcase your work, share ideas, and sell your work online without any coding knowledge.

Key Features:

• Portfolio Website Builder
• Customizable Templates
• E-commerce Integration
• Client Galleries
• Blogging Platform
• SEO Tools
• 24/7 Support

My Web Audit

My Web Audit uses AI to help freelancers and agencies generate more leads and close bigger deals. Our AI audits instantly uncover critical website, SEO, and GBP issues that others miss. Our professional reports build trust, establish expertise, and transform sales conversations into high-value client relationships.

TestDino

TestDino is a modern Playwright-native test reporting and analytics platform for engineering, QA, and product teams. It automatically classifies failures, detects flaky tests, and provides actionable insights to help teams debug faster, improve stability, and maintain high release confidence.

• Flaky test detection and analytics
• Dashboards for trends, test duration, performance, and stability
• Git-aware reporting linked to PRs, branches, and CI runs
• AI-based failure classification (bug, flaky, or unstable)
• Integrations with GitHub, GitLab, Jenkins, Jira, Linear, Slack
• Rich evidence viewer (screenshots, traces, logs, videos)

VisusalSitemaps

Generate visual sitemaps + screenshots for live & staging websites. Run Audits > Plan Content > Create Flows for SEO, UX, and Competitor Analysis. We save tons of hours for you - and you will win more projects!

Dorik - AI Website Builder

Dorik is an AI-powered no-code website builder designed to help anyone create professional, responsive websites without writing a single line of code. With its intuitive drag-and-drop editor, users can build stunning websites, blogs, and landing pages in minutes.

Dorik offers 110+ customizable templates, 250+ UI blocks, 20+ design elements, and a built-in CMS, making it ideal for freelancers, creators, agencies, and small businesses. It also includes secure hosting, SEO-friendly structure, and automatic mobile responsiveness to ensure every site looks and performs beautifully.

For agencies, Dorik provides a white-label and client management dashboard, enabling them to manage multiple projects under their own branding efficiently. Whether you're launching a personal portfolio, a business website, or managing client sites, Dorik simplifies every step of the web creation process.

- AI-powered website generation from simple text prompts

- Drag-and-drop builder with 110+ templates and 250+ UI blocks

- Built-in CMS, hosting, and SEO optimization

- White-label and agency dashboard for managing client sites

- Fully responsive, fast, and secure websites

UXTweak

UXtweak - UX research and user testing platform. With the platform’s extensive toolkit, you can run powerful studies to improve the usability of your prototypes, check your designs for mobile, conduct A/B testing on your designs, and get actionable feedback from target users.

Resources & UI Kits

DesignerUp Notion Templates

An entire project management system for Notion. Save yourself hours by keeping all of your UX/UI project assets and notes organized, repeatable and shareable with 21+ pre-built, one-click templates and connected databases! So you can focus on creating, not chasing down files.
Includes section with templates for everything from Research, Business plans, Project boards, Persona's, User Journey's and so much more.

You can also grab our Portfolio Templates for Notion so you can host case studies with proven formats to make it easy to create and update and get you noticed!

Untitled UI

Untitled UI has become one of those design resources that quietly saves you hours without you even noticing. If you’ve ever found yourself rebuilding the same components in Figma, searching for clean icon sets, or trying to piece together a consistent design system, this kit brings everything into one thoughtful place.

It’s a full Figma UI kit and design system that includes ready-made components, responsive layouts, icons, templates, styles, grids, tokens, and all the small details that usually take the longest to get right. Whether you're working on SaaS dashboards, marketing sites, mobile apps, or product interfaces, it gives you a strong foundation so you can focus on the actual design decisions — not the repetitive setup.

Practical UI Book

A UI design book to learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.

• A whole UI design course squeezed into a quick and easy read.
• Use a system of logical guidelines, rather than just gut feeling.
• Gain years of design experience in a matter of hours.

Beyond UX Design Shop

Head on over to beyonduxdesign shop to pick up your paperback copy of "Beyond UX Design: Master Your Craft Beyond Pixels and Prototypes". Pick up some big, beautiful art prints of some of our favorite UX and software-related quotes, or pick up some digital downloads and print them yourself. Get 30% off plus FREE shipping now through December 12 when you use the code BLACKFRIDAY at checkout. Head on over to beyonduxdesign.com/shop and get your print on!

UX Playbook

Resources to guide a Designer's entire career: build a kickass portfolio, learn how to job hunt, and master UX frameworks for project success, grow meaningfully, and lead your first design team.

Notion guides with:

93,000+ words
130+ videos
125+ templates
200+ examples

6 products:

✔ UX Portfolio Playbook
✔ 7-Day UX Job Hunting Challenge
✔ UX Interviews Masterclass
✔ UX Playbook
✔ UX Growth Playbook
✔ UX Management Playbook

Bonuses:

✔ Portfolio Critiques Vault (80+ videos)
✔ Tactical Communication Templates
✔ LinkedIn Personal Brand Guide
✔ Resume Power Phrases
✔ UX Process Blueprint
✔ UX Career Ladder (80+ examples)
✔ Private Slack community access
✔ One-time purchase & lifetime updates

Wrap Pixel

Leading Provider of Best Web Templates & Admin Panels. Trusted by 500k+ Dev's Worldwide Fully coded in Famous Frameworks Next.js,Tailwind CSS, React, Angular etc.

• 25+ Premium Admin Dashboards & Website Templates
• Multiple Framework Options (React, Angular, Vue, Next.js, Tailwind, Bootstrap, Nuxt, Vuetify)
• 1000+ UI Components & Pages
• Clean, Production-Ready Code
• Responsive Design
• Easy Customization
• Premium Support

👉🏽 Add Your deal!

More Deals Coming...

Some links may be affiliate links through which we get a small percentage from your signup. Your click helps to keep our content free so, thank you!

We couldn't be more proud to tell you all that we've been ranked as the best online bootcamp to learn product (UX/UI) design by SwitchUp.

Our course has been running for over 7 years strong with hundreds of students enrolled. Our ranking is made up of independently submitted, glowing reviews as well as ratings across a number of different categories for our course, community and mentorship program.

Here are some of the things that make our design course top-rated!

Practical Product Design Curriculum That Goes Beyond the Surface

When we created this curriculum, our intention wasn’t to package a set of quick tips or short-lived design trends. We wanted something that felt more like a path—one you walk at your own pace—where each lesson builds on the last in a way that actually stays with you.

Many programs focus only on visuals or tools, but real product design asks you to think deeper and more holistically. That’s why our curriculum is built around four core pillars that shape how designers understand, create, and communicate:

• UX Research — learning to observe with curiosity and uncover what people truly need.
• UI Design — creating interfaces that feel clear, intuitive, and purposeful.
• Business Requirements — grounding your decisions in the realities behind a product, not guesswork.
• Product Strategy — stepping back to see how every choice supports the bigger picture.

These pillars are not taught in isolation. They weave into each other throughout the course, showing up in different ways so you begin to understand how interconnected they are in real product work.

With more than 74 original HD video lessons—each paired with a guided exercise—you’re not just watching; you’re doing. You’ll sketch, map, write, test ideas, and make decisions that slowly shape your own MVP from the ground up. Piece by piece, you see your project take form in a way that feels hands-on, intentional, and rooted in what you’re learning.

The curriculum is structured, but never rigid. It’s practical, but still personal.
And the pace allows things to sink in rather than rush past you.

Our goal is simple: to help you understand why you’re designing something, not just how. Once you start approaching your work from that place, everything you create becomes more grounded, thoughtful, and true to your own perspective as a designer.

With over 74+ original HD video lessons each with a guided lesson exercise, you are not just passively watching, you are actively following along and creating your own MVP step by step in a hands-on way.

1:1 Instructor Mentorship

What makes our program feel different from many others is the kind of attention you receive from your instructor. Instead of being paired with a rotating mentor or someone you speak to only a handful of times, you’re guided by the same person throughout your learning journey.

From the moment you join, your instructor takes the time to understand where you’re starting from, what you hope to grow into, and what might be getting in your way. Your course plan is shaped around that. Nothing is one-size-fits-all; it’s built with you in mind.

Every piece of work you submit gets a thoughtful review—no generic comments, no rushed checkboxes. You get personal notes from someone who actually knows your learning style and your goals. And because everything happens asynchronously, you can reach out whenever you need support. Your instructor is there to help you slow down, look closely at your decisions, and grow with intention.

This kind of steady, personal guidance isn’t common in most programs, but for us, it’s the core of how students build confidence and a body of work that truly reflects who they are.

A Community That Feels Like a Creative Home

One of the things students tell us they value most—sometimes even more than the coursework—is the feeling of having a real community to grow within. Inside DesignerUp, you’re not just joining a course; you’re stepping into a space filled with people who are learning, questioning, experimenting, and supporting each other in a very real and human way.

Our community isn’t loud or overwhelming. It’s steady, welcoming, and thoughtfully organized so you can ease in at your own pace. You can share your work, ask questions, or simply sit back and learn from what others are discussing. There’s no pressure to perform—just a group of people walking similar paths and offering their own experiences along the way.

We’ve created different spaces that students can wander through depending on what they need in the moment:

• DesignerUp Events — live gatherings where we connect, learn something new, and talk through what’s happening in the design world.
• Mindful Exercises — short practices that help you slow down, regulate your nervous system, and reconnect with why you’re creating in the first place.
• Software Tutorials — step-by-step guides that help you feel more grounded and capable inside the tools you’ll use every day.
• UI Kits, Design Systems, & Figma Plugins — practical resources you can use immediately in your projects without feeling like you’re starting from scratch.
• Icons, Illustrations, and Stock Photos — ready-to-use visuals to support your portfolio work or speed up your design process.

And then there are the student perks—things we quietly built over time because they make your workflow smoother:

• Designer Discounts
• Notion Workspaces
• Notion Checklists
• Notion Fonts Table

All of this lives inside one shared space you can return to anytime. Whether you’re stuck on a design problem, trying to learn a new tool, or simply needing a moment of encouragement, the community is there—steady, supportive, and filled with people who actually get what you’re going through.

If you’d like, I can help you turn this into a more concise section for the blog, or expand it with examples of how students actually use these spaces.

Exclusive Free Figma Access for Students!

DesignerUp is an official Figma Education Partner that has gone through a rigorous course approval process to be able to afford our students free access to all Figma products and features in the Figma Pro Plan completely free for 12 months! That's over $200 dollars of access to everything in the Figma family including:

Core Products:

• Figma Design: The core product used for creating, sharing, and testing designs for websites, mobile apps, and other digital products. It allows for wireframing, high-fidelity mockups, and interactive prototyping with features like Auto Layout and shared components.
• FigJam: A collaborative online whiteboard space designed for meetings, brainstorming, diagramming, and research using sticky notes, shapes, and drawing tools.
• Dev Mode: A feature set within Figma Design that helps translate designs into code, streamlining the handoff process between designers and developers with inspection tools and code snippets.
• Figma Slides: A presentation creation tool that lets teams co-create slide decks, insert designs and prototypes from Figma Design, and gather feedback with interactive widgets.

New & Beta Products:
Figma recently introduced several new AI-focused products in 2025:

• Figma Draw (New): Provides advanced vector illustration tools like brushes, texture fills, and a shape builder directly within the Figma environment.
• Figma Sites (Beta): Allows users to publish fully responsive websites from their Figma frames without needing external web development tools.
• Figma Buzz (Beta): A content production tool for marketing teams to create on-brand assets at scale while maintaining design control.
• Figma Make (New): An AI companion that translates plain-language prompts into functional prototypes and web apps, generating readable code.

Other Offerings:

• Figma AI: A collection of features integrated across products that uses artificial intelligence to help with tasks like removing image backgrounds building apps, generating prototypes, and creating wireframes.
• Figma Community: Figma has a vast community ecosystem offering free and paid templates, plugins, UI kits, and widgets to enhance workflows.

AI Tool and Workflow Integration

Our course is on the bleeding-edge of what is happening right now in the design and technology space! Not only will you learn the foundational core principles of research, analysis, usability and interface principles, but you will also learn how you can speed everything up with AI.

We teach the core principles—research, analysis, usability, clear interface design—because those never go out of style. But we also show you how to pair those foundations with modern AI tools to make your work faster, smoother, and more intentional.

Throughout the course, you’ll see how AI can help you:

• Process research insights more quickly
• Uncover patterns and opportunities in your data
• Run competitor analysis with more depth and less overwhelm
• Generate ideas, wireframes, and early prototypes
• Speed up the parts of the workflow that usually feel slow or repetitive

When a new tool, workflow, or technique becomes important, we fold it into the curriculum. You’re never learning from outdated material; you’re learning from a course that’s alive, evolving, and deeply connected to what designers are actually doing right now.

Our goal is to help you feel grounded in the fundamentals while also confident navigating the tools that are shaping the future of product design.

Live Monthly Group Calls

Every month, we come together on a live video call—an hour carved out for connection, clarity, and shared momentum. These calls give students a chance to slow down, reflect, and check in with each other in real time.

We use this space in different ways depending on what students need. Sometimes we walk through lessons together and talk through areas that feel confusing or new. Other times, students share their works-in-progress or early versions of their final presentations, and we offer gentle guidance to help them refine their ideas.

These calls also open up space for career conversations—honest discussions about breaking into the industry, navigating interviews, building confidence, and shaping a path that feels right for each person. And when the moment calls for it, we even take a few minutes for a group mindfulness practice to help everyone breathe, recenter, and reconnect with why they’re creating in the first place.

It’s a rhythm that keeps students supported throughout their journey. You’re not learning alone; you’re learning alongside others who are moving through the same challenges and discoveries, month after month.

Everything You Need, All in One Figma File

To make the learning experience feel smoother and less overwhelming, we created a master Figma and FigJam file that holds everything you need in one place. Instead of jumping between scattered resources, you can open a single workspace and have the entire project laid out in front of you.

Inside the file, you’ll find the full example project so you can see how each part of the process comes together—from early notes and sketches to wireframes, flows, and polished screens. Alongside that, we included templates for your own project, so you can follow along step by step without wondering where to start or what to include.

There are also notes, guidelines, checklists, and helpful references built right into the pages. Everything is organized to gently guide you through the process, while still giving you the freedom to shape your work in your own way.

It’s a simple setup that students tell us it helps them stay focused, grounded, and clear on what they’re building throughout the course.

Deep-Dive Tool Tutorials

Design tools can feel overwhelming when you’re trying to learn everything at once, so we created a space that helps you explore them more calmly and intentionally. Our Software Tutorials Vault is a curated collection of lessons that go deeper into the tools you’ll use as a product designer.

Instead of sending you on endless searches across the internet, we bring together the clearest, most helpful tutorials so you can learn exactly what you need, when you need it. Whether you’re trying to build a design system in Figma, set up reusable components, organize your files, or explore more advanced techniques, you’ll find step-by-step guidance laid out in a way that feels manageable.

This vault grows over time, too. As new tools emerge or existing ones evolve, we continue adding fresh resources so you can stay grounded and confident in your workflow without feeling like you have to chase every trend.

It’s a quiet library you can return to whenever you want to strengthen your skills or get unstuck.

Your Certificate of Completion

When you finish our program and complete your portfolio case study, you’ll receive a Certificate of Completion that acknowledges the time, care, and steady effort you’ve put into your learning. It’s a meaningful marker of your progress and the skills you’ve developed throughout the course.

You’ll also receive a LinkedIn certificate link you can add directly to your profile. It’s an easy way to share your new skills and the work you’ve created with potential employers.

*DesignerUp is not an accredited institution, and this certificate is a recognition of your completion of the course rather than an academic credential.

Thank You

We are very thankful to each and every student who enrolled and helped us get here. We asked them what makes DesignerUp so special. Here are just a few of the things they had to say.

🎨 Creativity Is Pattern Fluency

This is how Spotify handles playlists →

That onboarding flow didn't work in A/B tests →

There are 14 ways that I can use interaction patterns for this filter, but I know my users’ tendencies, so I'm most confident in using number 12 →

🧠 These are the kinds of things running through designers' minds.

But how exactly?

Is it just because they're a lot faster than you or because they're more talented or because they've spent a lot more years designing than you?

Actually, it's none of those.

It's just two things that they formed the habit of doing.

And you can do them too and get 80% better at UX/UI in a month's time.

🧩 Patterns Are Stored Recognition

Really great designers can move through design problems faster because they're not inventing from scratch, but because they're scanning through possibilities their brain already knows and thinking quickly about how they can apply them.

Thousands of UI interactions, gestures, flows that they've seen, broken, reassembled along with this natural tendency to see design metaphors in the everyday world around them.

Great designers don't necessarily think faster.

They recognize sooner.

And that recognition is what develops their instincts and what I call the muscle memory of design.

There are so many different ways that you can have a progress indicator, for example. And each one of these is a design pattern.

There can be a circular ring that shows the percentage of a daily learning goal.

There could be a milestone path that looks like this.

So, it's kind of a step counter that lets you know how far you've come.

There could be a streak counter. You see these a lot on language learning apps that show you days and how long your streaks are.

Maybe it's a level system so that it shows you your current level and where you've got to get to.

And maybe it's a skills tree.

All of these are progress indicators.

And for your particular product or your problem that you're solving, one of these will probably make more sense than the others. And the more of them you've seen and experienced, the larger your playground is.

Design patterns are this memory externalized. They're not hard and fast rules to obey, but examples of flows, placement, rhythm, and cadence of things that we've come to know before in digital interfaces.

Each time you explore an app, you dissect an onboarding flow, or you notice how a tooltip behaves, you're feeding your own internal library of references. That's how you build your muscle memory of design.

To outsiders, this may look like originality, but to the designer, it's simply pattern play.

📚 Building Your Mental Library

Let's try a little exercise

Open up the X app if you have it on your phone and then you can go to your profile or mine. Mine is @LizTheWhizard.

Scroll down and find a post and hit like.

Then scroll down, find another one, and we're going to repost it.

Click the repost icon and click repost.

Then we'll bookmark something.

Now, let's do the same thing again, but this time we're going to be really hyper aware of every action we take and every reaction that the interface has.

↳Watch how the navigation sticks to the top as you scroll past your title.

↳Notice the subtle animation when you like a post.

↳See how the screen darkens and a panel slides up when you click repost.

↳Tap bookmark and a snack bar drops from the top with an additional action.

↳This is a perfect example of a design pattern and a design system.

The pattern is the sequence of interactions.

The design system is the reusable UI element like the snack bar.

Now that's just one example.

Imagine if you could see hundreds of apps at a glance without having to download each one...

🧰 Best Design Pattern Tool

This is my absolute favorite resource for developing the muscle memory of design and it's called Mobbin.

Mobbin isn't just a gallery of design examples. It's like a design gymnasium for your brain. Each time you scroll through their curation of existing product design screens and flows and patterns, you're doing reps and you're training your eye and your brain to recognize how other teams have solved recurring problems with design.

When you know a vast array of design patterns deeply, you can access them more quickly and bend them without breaking them. Users can feel that. They instantly understand it because your new pattern is built on top of their old expectations.

This is why pattern fluency matters.

It lets you go past imitation into synthesis.

The Design Systems Behind The Patterns

If design patterns are the big picture stuff, the flows and the choreography of screen events and conditional reactions, then design systems are the tiny UI components that make up those patterns.

Take Atlassian's design system for example.

Each element from the colors and typography to the badges, checkboxes, and breadcrumbs are broken down and given purpose and context.

The crazy part is that these design systems and hundreds of others like them from the world's top tech companies are freely available. You can download them in Figma and use them in your own product.

There are even really great white-labeled UI kits like Untitled UI that are worth investing in.

🤳🏽Actions to take for the next month

Here's what to do to improve in the next month

1. Sign up for Mobbin and start immersing yourself in how great products solve problems with design.
2. Spend time each day mindfully observing the orchestration of what happens in the apps you use every day. Replace passive scrolling with active, aware usage.
3. Download existing design systems and learn (and steal) from them. Then try putting them together to create your own screens and components and flows.

If you want to level up that last 20%, come join my Product (UX/UI) Design Course. You'll build a real product and case study for your portfolio with one-on-one mentorship. And for a limited time, I'm giving away 12 months of Figma Pro for free, plus 50% off Mobbin when you enroll.

Want to learn more about design patterns and design systems? Watch this crash course next.

Most design problems aren’t ‘design’ problems.→

They’re ‘Thinking’ problems.
They’re ‘Clarity’ problems.
They’re ‘Too-many-tabs-open’ problems.

More prototyping. More pixel-shifting. More polish in Figma alone isn’t going to help you with those.

For me, without clear thinking, Figma just results in more confusion, more mess, and more mockups than I can mentally manage.

The Problem: Figma wasn’t the bottleneck — my thinking was

Like most UX/UI designers, I used to jump straight into Figma the moment I had a product idea or a design task to complete. I’d tweak colors, mock up screens, build components, and then… get stuck.

Not because I didn’t know how to design, but because I didn’t know what I was designing — who it was for, how it solved the problem, and what the business actually needed from it.

I was designing aimlessly.
Which meant I was redesigning constantly.
Which meant I was wasting time.

This is what most of my design students come into my course doing too, and it’s why I teach problem-first thinking before they even open Figma.

Polished pixels ≠ finished product

I knew something had to change when I caught myself redesigning the same dashboard for the third time that week — still unsure if the core components even made sense.

So I asked myself:
“What if the problem isn’t the design tool, but the order I’m doing things in?”

“What if what designers are struggling with isn’t ‘what’ but why?

What if I could figure out the strategy, systems, and structure first — and then let Figma be the final step, not the first?

That’s when I started doing something that changed everything:

I built a repeatable process and a system that takes the guesswork out of product design

The Solution:

I started by asking:
What are all the things I do before pushing pixels that actually move the needle?

Things like:

• Writing my problem statement, tagline, and persona
• Laying out my business model with a Lean Canvas
• Doing competitive analysis and a SWOT
• Capturing inspiration, moodboards, colors, and typography
• Organizing all my user research, interviews, and survey data (and having AI help me analyze it)
• Writing a PRD (Product Requirements Document)
• Writing UX copy without opening 20 Google Docs
• Outlining my user flows and information architecture
• Creating personas without needing to design a new deliverable every time
• And even planning out my content marketing, assets, and roadmap

Then, I built out a single Notion Workspace and Figma System with templates to hold all of it and make the process easily repeatable.

Over the past 7 years, I’ve been sharing this with my product design students and teaching them the thinking behind these processes. I’ve refined it to be clean, templated and ridiculously efficient in helping me to:

⚡️ Build multiple 6-figure products and MVPs
⚡️ Save designers hundreds of hours and dozens of browser tabs
⚡️ Help my design students learn the modern product design and development process within my course.

Here’s what’s inside the Notion workspace I now use every day.

🧠 Product Dashboard

Start with clarity, not chaos.

When I begin a new project, I don’t open Figma. I go to the dashboard.

This is where I have all of my sections.

It sounds simple, but this is the anchor I return to every time I feel lost in a design decision.

It’s where I track product metrics as they evolve — business KPIs, user goals, or just a few numbers to ground my thinking.

Design without this is just decoration.

💡 Inspiration Board

Capture the spark before it fades.

Every project starts in that messy, beautiful phase of random ideas and rabbit holes.

So I built a place to hold those: images, videos, links, swatches, typography, and even embedded moodboards.

I drag them in as I go. It’s loose, raw, and incredibly important.
This section helps me stay connected to the soul of the product — even when things get technical.

💼 Business Requirements

Designing for visuals is easy. Designing for viability is what matters.

Most designers don’t learn this early: the business is your design constraint.

So I included tools like the Lean Canvas, Competitive Analysis, and a full Business Plan template right inside the workspace.

I ask:

• What’s the market doing?
• Who are our competitors?
• What’s our unfair advantage?
• What are the goals that design has to support?

This is where I connect strategy to screens. It’s how I make sure I’m designing a solution, not just a slick UI.

🔍 User Research

Research shouldn’t live in a thousand places.

This section changed everything for me.

🚫Before, I had tweets bookmarked, survey responses buried in forms, and interview notes scattered in Google Docs. Now it’s all in one place.

I built a connected database for online research, surveys, and interviews.

I even track where customer sentiments and responses from places like Twitter, Reddit, or a form response — and tag it by theme.

I can immediately spot patterns and insights before I ever move into wireframes and if you have Notion Teams you can use AI to help with this!

I created a plug-and-play user persona template that lets me add an image, user bio, favorite brands, motivations, and even a progress bar made of colored text to visualize personality traits.

It’s fast, lightweight, and easy to update. Most importantly, it’s not some dated old artifact — It’s something I can update easily and actually use and refer to regularly.

🗺️ User Journeys

Empathy needs motion, not just notes.

User journeys were one of the trickiest things to replicate in Notion — but I found a way.

I use the timeline view to show progression through the user’s experience — each phase mapped to an emotion. (Displeased. Neutral. Happy. Ecstatic.)

I have a connected database directly to the persona it belongs to, so when I revisit Jenna’s onboarding experience for example, I immediately see that she was neutral. That tells me: we have work to do there.

It’s simple, but it brings emotion into the product thinking early.

🧭 Information Architecture

No more missing pages or broken flows.

When I’m building out a product or auditing an existing site, I use this section to log every page: what it does, why it matters, and where it stands.

I’ve mapped user flows step-by-step with conditionals and even included a space for UX copy.

There’s also card sorting templates and mental model exercises I use to align the IA with how real users think.

This is where a product’s skeleton takes shape — before any UI skin is added.

🎨 UI & Style Guide

Systemize your aesthetics.

Once I do get into visual design, I don’t want to reinvent the wheel every time.

So I created a mini design system inside Notion:

• Brand assets
• Color palettes
• Typography
• Accessibility standards
• Layout and spacing guides
• Design patterns for common flows

Even if I’m working alone, I want to design like I’m working with a team.
This makes that possible — and handoffs so much easier when the team grows.

📢 Marketing Section

Design supports growth, not just delight.

If I’m creating content, product screenshots, or writing launch copy — I want it connected to the product.

This section houses all of it:

• A content calendar
• Social media assets
• Screenshots
• Promotional materials

It’s not just for marketers. It’s for designers who understand that getting your product seen is part of the job.

🛣 Product Roadmap

Know what’s next, for whom, and why.

This is the command center.

I can view all my tasks as a table, Kanban board, or timeline. I can filter by team, by status, or by role.

When I’m wearing multiple hats — designer, developer, founder — this is the only way I stay sane.

And because it’s built on relational databases, everything stays connected: from business objective → research → persona → feature → task → delivery → measurement.

👉🏽That’s how you scale your thinking, not just your to-dos.

Why this works

This is the system I wish I had when I was jumping between Figma, Google Docs, Sheets, and half a dozen other tools.

Now, I open Notion first.
I design better.
I design faster.
And I design with way less rework.

👉🏽 The real benefit I found was that I stopped second-guessing my design decisions because I wasn’t just designing for aesthetics — I was designing with context.

👉🏽 I wasn’t hoarding screenshots and moodboards in a thousand tabs — I had it all visually embedded in one clean dashboard.

👉🏽 I wasn’t getting lost in vague feedback from stakeholders — I was handing off clear documents that made sense to everyone.

This wasn’t just a workspace.
It was a way to design with clarity — before I ever opened Figma.

→ Want your copy of this exact workspace?

After many years, I’m making these Notion Templates available to the public.

It’s been launched to Product Hunt and has sold over 2,000 times and has gotten much love (thank yous! 😊)

Real Love from Real Designers

👉🏽 Grab the Notion Product Design Workspace here and try it yourself.

👉🏽 Want hands-on training with mentorship on how to use these tools to design great products?Consider Enrolling in my Product Design Course
(and get this Notion Workspace and my Figma System for free!)

🙋🏽‍♀️ I’m Liz btw! I’m all about teaching ways of designing more mindfully and with less stress. I teach product (UX/UI) design on YouTube and in my course where I show you all of the methods and techniques behind this type of work and how to become a more skillful product designer.

I decided to do something crazy—and I built this thing in 48 hours.

Hopefully, I pulled you in with that big number in the title—and it is real. Here are the numbers

But it isn’t magic. It’s just a really good research, design, and dev process. And I’m going to show you the whole thing from start to finish.

🛠️ Background: Building the Hard Way

I’ve built a few SaaS products (5 to be exact) the old-fashioned way—handcoded. Some were super successful and some were absolute flops. But either way, to design and dev properly, it took months. And as a non-coder, I could never do it without the help of engineers.

Thanks to AI and vibe-coding that has completely changed and it opened up my eyes to new ways I can solve old problems—and what I can actually build all by myself.

Step 1: Have A Compelling Problem

I've taught hundreds of students in my product design course, and so many of them were facing the same problem – They didn't know how to frame their experience and tell really compelling stories about their UX/UI skills. So, whether that was in their case studies or during interviews, a lot of them had been rejected or ghosted or just didn't even feel confident enough to apply. So, that was the problem I was trying to solve.

💡Takeaway: You need to have a compelling problem that a lot of folks you've actually talked to are experiencing.

Step 2: Gather The Data

For years, I worked with my students one-on-one in the course, helping them write better stories and case studies. Talking to recruiters and hiring managers, figuring out what worked for them. So, I had a lot of data to work with.

💡 Takeaway: You need data. The more qualitative and quantitative data you can gather and analyze, the better.

Step 3: Validating the Idea

I knew the problems and the players well, but my one-to-one was kind of capping out. I wanted to empower students to be able to do this themselves. So I decided to make an internal tool for this. I created this Notion self-assessment where my students could fill in their skill stories on their own, and it would help them come up with a personal value proposition that they could then use to get hired and to interview and they loved it!

💡 Takeway: You need to see people using some version of your solution so that you can see how they use it and if it's actually solving the problem in some way. Keep it simple and low-effort.

Step 4: Testing the Market

After tweaking and refining this with their feedback, I decided to release it to the public and I could not believe it, but it sold over 816 times, which generated around 10K in revenue. You can grab a copy of this if you want to check it out, too.

💡 Takeaway: You need to get people to open their wallets for the solution. If they aren't paying, then it's just a nice-to-have, and it's not a viable business.

The Realization

I love using this Notion template, but it’s always been a little manual and clunky and not everyone liked using Notion and I always dreamed of making it better, more platform agnostic and interactive. I just didn’t have the coding skills or time to build something.

I was over at the Replit offices at Andresearn Horowitz in San Fransico, I got to witness one of the coolest AI tools I’d ever seen - in essence, it's an entire AI engineering team at your fingertips 😳

This is when I saw my chance to turn this notion template into a real app.

And I decided to do just that...in 48hrs.

🗓️ Day 1: Research and Design

We've got 24 hours to start off. So, let's go!

Research

I created a custom workspace for Notion that helps me organize and analyze all of my data. I can add interview transcriptions and business models, I've got persona templates and user journey maps all in here. It's been perfected with my students over 6 years and is a favorite of UX/UI and Product Designers everywhere - you can grab your copy here!

With my Notion workspace all set, the first thing I'm going to do is have ChatGPT help me fill in these different sections. I need a research plan to kick this off. Again, I have a lot of data, so I'm going to be using most of that, but I'm going to have ChatGPT help me write the research plan.

I made a project in ChatGPT for the product so it already had all of the context of the things I'm asking it for.

Here is the research plan. I want it to be compatible with FigJam AI because that's what I'm going to be using to analyze and synthesize all this data.

Here is the problem statement:

"Creative professionals applying for jobs often struggle to articulate their relevant skills and accomplishments in a structured, compelling way. Skillshot helps them reverse-engineer, job descriptions to create impactful portfolio stories based on their experience."

Perfect.

Now, I want to understand how users are currently solving this problem so I can validate the usefulness of turning job descriptions into tailored stories. I want to identify common pain points and gather common language and patterns and keywords and things that are associated with this so we can create a very specific user experience flow.

So we've got our target audience, some research methods and it's now advising us to conduct user interviews, surveys, competitive analysis, usability testing later, and some of the key questions that we need to answer here. This is really helpful.

I also have a persona here in Notion based on the students and customers that have used the MVP.

Over in Figjam, I'm going to take the interviews I've collected with students and paste the transcripts right onto a sticky.

Then, I'm going to come down to this toolbar at the bottom and drag in a Jambot.

Jambot is the AI tool that lets me converse with these stickies. Right now, I want it to summarize this so I'm just going to connect this sticky to this summarize chatbot.

That was really fast. It's saying that this person:

📌 Used a Notion skills assessment to reflect on past projects and map out skills for a new role.
📌 They like the way it was structured. It helped them identify transferable skills. 📌 Confusing that it was isolated without guidance on how to connect the skills to the job description.

I can now continue asking these questions, I can go down a Rabbithole and it tells me:

📌 To effectively connect your skills to job descriptions, it can be helpful to break down the job requirements into specific skills. Then match these with your own skills and experiences by providing examples that demonstrate how you meet those requirements.

This is along the same lines of how I wanted to improve the user flow.

You can just keep having fun with this, keep analyzing this in different ways by dragging in another Jambot.

Now it's showing me what they liked, desired features, and recommendations. I can even take all of these individual items and I can put them into stickies and continue chatting with them. This is going to become the foundation for my features.

Feature Planning

Next, I want to create some user stories for the app so that I know what I need each feature to accomplish and each element and component on the screen. For that, I'm going to ask ChatGPT to give me the user stories for this app.

Based on the product requirements doc, it came up with a couple of Epics. So, the first Epic is the Job Description Capture. That's kind of the first big feature or flow that we need to work on. It says,

Epic 1: As a designer, I want to paste a job post link so that Skillshot can analyze its requirements. I want to cue up to five links so that I can compare skills. I want visual feedback letting me know that when a post is processed, it's, you know, complete or being analyzed or whatever it is. And I want to remove an unwanted link so that it doesn't affect my analysis.

Then we have Epic 2, which is the skills part, Epic 3, is the story creation and then Epic 4, which is progress and motivation.

There are these different flows and segments each with very different needs and we're just going to take it one at a time and get into Figma and start wireframing.

Visual Inspiration

One of the first places I'm going to go is over to my favorite resource called Mobbin. This let's me see design patterns from all of the world's best apps. I can see how others have approached similar UX problems and what UI patterns they've used. And I can search by UI element. I can search by entire flows. This is by far the place that I visit the most for getting inspiration and helping me come up with my first ideas and wireframes.

I'm going to search for 'skills' and look through some different learning apps and habit tracking apps. And this one has some interesting tags that I could probably pull from. I like that it allows me to copy this frame and drop it into Figma as well, so I can create a mood board.

Wireframes

To save time, I want to use an existing component library and also because I want something that's already been tested for accessibility and uses Tailwind.

I have just made a very simple component here using ShadCN. It's a card component following those user stories in that first Epic and I'm making sure to use good design patterns and practices, proper grouping and hierarchy. This is actually quite easy using the ShadCN component library that I've chosen (I also did a deep dive about ShadCN here), as it has typography set and spacing already set for me.

These elements are going to be placeholders, so we don't need to get too detailed on these screens. Mainly, what I'm thinking about is the user's mental model and how much of what's under the hood I need to show. Do they need to see everything? Are they a pro power user or is something really simple that leads them from step to step?

After testing this prototype with some users, I actually found that they get a little bit stuck here, trying to come up with a story because there is no format. There's no prompt or guidelines, so they tend to draw a blank and that's something that was happening in the Notion templates too, because it was just very open-ended. So I want some more fields here.

Now, I can continue to design all of the other screens, but I'm a little short on time. So, what I'd like to do is actually have AI help me out more. So, I want to jump right into Replit and see what it comes up with now that we have the gist of it and we have our main screen.

It's been a long day. I'm spent. I'm going to stop here for today and pick back up tomorrow and jump into the actual building.

🗓️ Day 2 - Building and Deploying

Importing Figma Designs into Replit

Here we are inside of Replit. This is the screen where you can use natural language to ask it to create an app. We are going to start with our Figma designs.

We’re going to click on import code or design and then select Figma design. You’re going to need to connect your Figma account. I'm going to do that and click 'Allow Access'. Great. We're connected. It was that fast.

Now all we need to do to convert our designs is paste the URL. We're going to select the frame we want to build and paste that frame in. I've got some of my screens here in Figma. Here is the general flow. I'm going to start with this one in the middle that has most of the components clearly shown. Then I'm going to come up here to share and copy the link to this frame and this frame only.

Now I'm back in Replit. I have my URL and I'm going to paste it here. I have this on private for now. I'm going to click import from Figma. It's getting those designs. It's now generating the code and handing off to the agent.

The agent is working on it. Now it is creating the full-stack application and all of the code scaffolding. It's installing dependencies. These are all of the files it’s created and it is explaining what it’s doing as it goes along.

Tweaking the Design with Replit Agent

Here we have it! A few things are not exactly like my design and we have a couple of options we can use to fix it. First, we can talk to Replit Agent and ask it how to help us fix this.

Agent tells us we can upload another file, such as attaching an image. We can also click on 'Select', which allows us to see this as a visual editor, like a no-code editor.

If I click on an element in this div, I can look at it and say there's padding here. I'll bump that up a bit, maybe to about 20 pixels, and then save changes. That looks great.

What I'm going to try to do now is say that I would like more space at the top and bottom. I'm going to upload a screenshot of that frame.

It says, I can see that you want more vertical spacing. I can see the cards need more padding at the top and bottom. Let me update things.

There we go. It's added more padding. That looks close enough. It's letting me know that I can roll back the changes if I don't like them. I can review the code changes that were made here.

One thing I noticed was that it was giving me a solid background that was white instead of my gradient. I asked it to go ahead and add that gradient in. I uploaded a picture of it to make sure it could see it, and it went ahead and did that for me.

Adding a Database

Let's continue building. The next thing is that I can add is a database. I need to do this because I want to be able to start building the real functionality of this app.

Now it's getting to work building our database. We can take a peek at this and see what it's creating.

It's creating the schema, setting up tables, and testing to make sure everything is working correctly.

This is crazy compared to the amount of manual work this would take to set all of this up. There we go. Our application is now ready with full database functionality while maintaining the same interface and user experience.

Writing a Product Requirements Document (PRD)

Now that some of the visual stuff is sorted out and we have the database set up, I need to focus on the user experience. For this, I'm going to have ChatGPT help me.

In ChatGPT, I have a project where I've been working on my research and planning. I'm going to ask it to write me a PRD for Replit so I can build this app with the functionality, user experience and database all connected.

The product requirements document is what I'm going to use to help guide our design and development decisions.

Now, I'm going to give this PRD to Replit by copying and pasting it into the Agent. It's going to start updating these cards, adding core functionality.

Six minutes later, Agent has built the complete skills analysis interface with the priority badges and the coverage tracking. It has the STAR format forms for comprehensive skill storytelling. It's added the navigation.

Building Skills Analysis Functionality

We have our job postings working. Now we're want to be able to click the buttin to analyze common skills.

It's added these two buttons here for story builder and skill analysis. This isn't exactly the user experience that I have in mind. It's not flowing to the next screen. We'll work on that design in a minute, but right now I just want to test the functionality of this to make sure it all works.

Let's try skills analysis and see what happens. It didn't show me any of the skills that were extracted from those job postings. And when I click this, it takes me back to this screen.

We're going to fix that. I'm also going to share with it the other screen that I designed in Figma so that it looks more cohesive. I'm letting it know that I was expecting to see this screen as it mentioned here in the skills analysis.

This is what vibe coding is. Doing one thing and fixing one problem at a time until you get it to match the exact vision you had in Figma. That's what I love about Replit. The way you can do it from any starting point, just like working with a developer or engineering team.

It says it has extracted the skills. Let's see what those skills are. There we have it. It's showing these skills. It says that for user experience design, this is a high priority skill because five out of four jobs have this.

That's strange, right? How can it be five out of four? We'll go with that for now.

Tweaking the User Experience with Replit Agent

I want to quickly clean this up. I want to remove these buttons and add a top-level navigation for our three main areas. I'm going to chat with Agent back and forth until we get this design nailed down.

We've got a pretty good app going. I need to walk through some of the user experience things and do some tweaking.

Let's start from the top. We've got our two jobs in. We're going to click analyze. This little snack message lets us know that it worked. It takes us to the skills page and it's showing us our high-priority jobs and we can add a story.

If I click Add a story here, it takes me to the story builder. That's not what I want. I'm going to say that after I click Add story, I want it to open the story form with the priority story tag pre-selected for that skill.

About a minute of work later, it seems to have worked through its issues. I'm going to click on this one. Now it works. It opens the form with that related skill tag selected.

That's exactly what we wanted. The rest of the skills are down here. We can keep adding to this. Perfect.

Building Progress Functionality

I'm on to the final Epic. I want to show that overall progress bar so we can do more things with it—maybe generate what I want to call a skills snapshot or a PDF users can download.

I'm going to ask it to add that. I have my design in Figma with a simple progress bar. It's going to show how many overall stories of high-priority skills you have, how many are left, and your overall percentage of completion.

I've exported that image, and I'm going to upload it here. Now it's got to do some math, because it needs to know what's the max amount of stories for this bar to be considered 100% complete. Then it has to track how many tags you have. It needs to know if you have the three recommended tags for Figma, for user experience, etc.

It's going to figure that out for us—all of the logic and the conditionals. I love it. Dropped it in there. It even changed it to a gradient.

It's exciting. It's not just a prototype. This is the real functional app. Now if we come over here, let's go ahead and add another prototyping skill. And just like that the progress bar increased. We've got more stories!

Final Screens

I want to update the screen so that when the progress bar is completely filled, it disappears and is replaced with a button that takes users to their skills snapshot screen. Back in Replit, I told it to do exactly that—show the button once the bar reaches 100%.

It worked beautifully. The final screen was generated to show a overview of your Job Readiness, Skill, Stories totals, Mastery and some Export and Share options

Adding PDF Functionality

I decided I wanted to add one more feature, which is the ability to Export your Skills Stories to a PDF. I've asked Replit to do this (not knowing if it was even possible) but in a matter of seconds it started adding a PDF library to handle this.

About a minute later, it's done! Now, when we click the button, we see a summary of all our stories. If we click download, it generates a PDF.

Deploying The App

Now for the final step: deployment—so you can actually use this app.

At the top of the Replit dashboard, there's a “ready to share with the world” button. I clicked deploy.

There are a few deployment options. We can publish a stable public version, and it recommends autoscale. There's a tutorial for more detail, but I’m going with the default recommendation.

It also suggests running a security scan, which I did.

It found one issue—a vulnerability in a JSON package. I clicked "fix with agent," and it resolved it immediately.

With that done, we’re ready to set up deployment. Replit shows the machine requirements, compute units, and expected billing. You know exactly what you’ll pay.

I kept the default settings and set the primary domain to skillshot app.

On the usage dashboard, I saw that the entire build process only cost me $16. That’s like hiring a full engineering team for the price of lunch!

We’re now live. The status says “deployed,” and the domain is active. I jumped into the browser—and there it was. The real, working product. You can fill everything out, save your stories, track your progress, and once everything’s added, you get your snapshot.

Conclusion

If there's one takeaway from this whole process, it's that the research and Figma design phase is the most important part. You can vibe code all day, but if you don’t have a clear vision of the user experience upfront, you’ll end up with a Frankenstein product and burn way more time and credits fixing things later.

The clearer your thinking is in those early stages, the smoother the build. And if you want to go deeper into that process with me, that’s exactly what we do in my course. We’ve been running it for six years, and our students are building incredible products—doing the research, the design, and the business strategy that makes them work.

Try the app out for yourself, leave a comment with your feedback, and if you want to see how I use Figma and AI to create amazing apps like this, read this story next

I was a bit stuck on creating a color system for the design system of a product I’m working on. The problem was, I already had some existing colors that I needed to incorporate, and my devs are using Tailwind, so I needed to customize things by hand and expand my scales.

I found a lot of tutorials on generating color styles, using a plugin or borrowing from an existing design system (many of which I wrote myself 😏) — but almost nothing that walks you through how to do it from scratch manually.

So after a few failed attempts (and creating far too many tiny color swatches), I thought I'd share my not-so-terrible final workflow:

1️⃣ How I pick a color palette from scratch

2️⃣ How to turn it into color scales.

3️⃣ How to convert those into styles and variables

4️⃣ How to generate a style guide that you can hand straight to developers.

Tailwind’s Color Palette—Explained

This is Tailwind CSS's Version 4.1 default color palette and to touch on it briefly, if you don't know Tailwind is just a CSS framework that developers love to use.

It includes all of these colors in code so they don't have to think about picking all of these scales, shades and tints for products making easy to implement colors. Most designers, however, want to customize this or use their own brand colors.

Now if you're wondering why we use THESE numbers, well Tailwind inherited Google Material's 50 through 900 tonal ladder because it already mapped to 11 perceptually even light to dark color stops. It also keeps class names short and sortable while still leaving plenty of numeric gaps for future shades (like the later 950 that was added) It also helps avoid any conflict that a literal 1 to 10 or 1 to 100 scale might create with percentages and other utility scales that are often used.

💡TL;DR - Why the numbers?

• Tailwind inherits Google Material’s 50 – 900 tonal ladder—eleven perceptually even stops from light to dark.
• Class names stay short and sortable (bg-blue-500).
• Numeric gaps leave room for future shades like 950.
• It avoids clashes with other “1-to-100” scales you might use elsewhere.
  

Tailwind’s numbering isn’t mathematical, but it isn’t random either: it’s a perceptual ramp. The goal is to change perceived lightness in roughly even steps while keeping the hue nearly steady.

Step 1 – Choosing a Color Palette

Now let's get into Figma, and we’ll go step by step.

1. Create a frame in Figma—that frame will hold your entire palette. Inside it, draw one rectangle (yes a rectangle from a frame; there is a reason for this which we'll get to later). Give the shape some rounded corners for style.

2. Draw rectangles to build the palette, duplicate that rectangle across a row, then nudge each duplicate’s Hue in the HSB color picker while leaving Saturation and Brightness untouched. Keeping those two values identical perfectly balances every swatch, so the colors feel like they belong together.

3. Duplicate and repeat using this method to tweak an existing palette, build one by hand, or generate something brand-new—the technique works either way. By the time you finish, you’ll have your primary, secondary, tertiary, and alert hues (think red, orange, yellow for notifications and warnings) ready to go.

4. Add a heading above the row—these are your primitive colors, the base hues that power the rest of your system.

Real-World Color Inspiration

Now, if you need inspiration for picking that initial color swatch or that initial color palette, there's nothing better than getting inspired by real apps and products that are live in the wild, and that's why I absolutely love about Mobbin.

They catalog and categorize all of these apps and flows and prototypes from the world's biggest companies. You can view by mobile or web app, and there are lots of sorting and filtering options. You can even look up a UI elements and you'll be able to see all of the colors that they've chosen to use.

When you find some screens that you like, you can bring these directly into Figma, using their plugin so you can select these colors for your own color palettes.

How to use Mobbin:

• Filter by platform or UI element.
• Import screens into Figma with the Mobbin plugin.
• Sample colors directly.

Step 2 – Expand Each Hue into a Color Scale (Tints & Shades)

Each primitive color needs its own 11-step ramp. The base color sits at 500. Anything to the right (600 – 950) is a shade (darker). Anything to the left (50 – 400) is a tint (lighter).

Take one swatch—let’s use the blue—and create a tonal ramp. Tailwind uses 11 steps, so place the base color at 500. Everything to the right becomes progressively darker shades (600–950), and everything to the left becomes lighter tints (50–400).

Example Color Scale with Tints and Shades

Manual method (HSL)

• Duplicate the 500 swatch to create 600.
• Switch to HSL and drop Lightness about 10 points.
• Repeat for the remaining shades.
• For tints, raise Lightness 5–10 points per step.

This isn't necessarily the fastest way or the best way to do it, but it does give you a keen understanding of how these scales are derived, what the ramp is and what the numbers mean.

Plugin Generator Method

Once you understand how these scales are derived, you can speed things up by using a plugin or generator if you so choose. I like to use Color Tint & Shade Generator Plugin then just paste any hex value (usually the brand color or 500 mark), and hit Generate. In seconds you’ll have a ready-made ramp.

Generate Ramps for Every Primitive Hue

Drop each primitive hue into the plugin and let it crank out a ramp. Repeat until every brand, accent, and alert color has its own scale.

Remember, flexibility is the point: if an existing color needs a nudge or fails contrast, you can always regenerate or fine-tune individual stops.

With this palette, you can resize the row, adjust column widths, or spread the swatches out—whatever helps you match the rest of your file. The plugin keeps the base swatch at 500 and produces five darker steps (600–900) plus four lighter tints (100–400). The extreme endpoints—50 and 950—are omitted, but you can add those later if you need the full Tailwind ladder.

Note: Most plugins create nine steps instead of eleven; that works to—just fill in 50 and 950 if you need the full scale.

Naming Conventions and Bulk Renaming

We're going to keep the color naming simple which will help us later batch rename things faster and create styles and variables.

Use colorName/number

• blue/500
• aqua/700
• mustard/300
• Etc

(lower-case color name, slash, numeric value, no spaces)

Bulk-Rename Swatches to Tailwind Format

Once each ramp is in place, swap out those hex labels for Tailwind-style names. Figma’s native Bulk Rename feature makes the job painless—no extra plugin required.

1. Rename the frame. Select a ramp’s frame (for example, the one labeled generated color palettes), type a simple hue name like pink, and press Enter. Figma automatically selects every swatch inside that frame.
2. Assign numeric values. With the swatches still selected, press ⌘ R (Rename), enter 100, and Figma numbers the row 100…900 in sequence.
3. Append the color name. Select the same row, hit ⌘ R again, type pink/ followed by {current}, and confirm. Each swatch now reads pink/100, pink/200, and so on—exactly the convention Tailwind expects (lowercase hue, slash, numeric value, no spaces).
4. Repeat for every ramp. violet, blue, green, yellow, orange—same two-step rename routine, done in seconds.

Step 3 – Convert Swatches to Styles

All we're going to do is take all of these colors, and use this plugin called Styler.

1. Select each ramp’s swatches.
2. Press ⌘ R (Rename) in Figma:
   First row → 100, 200, … 900.
3. Append the color name (pink/100, pink/200, etc.).
4. Run the Styler plugin and click Generate Styles. Figma instantly creates perfectly ordered styles.

And just like magic it made all 54 styles from 100 down to 900, perfectly ordered.

Step 4 – Turn Styles into Variables

Turning Styles into Variables is pretty easy again using the Style to Variables Plugin.

Find the plugin—styles to variables—and you'll see that it's selected all of our styles, we can name this collection and I'm just going to call this primitive colors.

There are a few other options here—grouping, binding styles to the variables created—but we're just going to convert these styles into variables.

1. Run Styles to Variables plugin
2. Select all styles, name the collection (e.g., “Primitive Colors”), and click Convert.
3. In the Variables panel you’ll see every swatch, ready for theming or semantic aliases.

To find your Variables panel - Deselect everything on the canvas, come up to variables icon and there are all of our colors that we created turned into variables and now you can go ahead and semantically name those if you choose to.

Step 5 – Build a Share-Ready Style Guide

By now every swatch carries a Tailwind-style name, but the underlying hex values are hidden inside styles and variables. To hand off brand-ready specs—or drop colors into marketing decks—we still need a visual style guide.

1. Fire up the Variable Color Style Guide Plugin (Plugins → variable color style guide). Two quick choices:
2. Palette: select primitive colors—the variable collection you just created.
3. Layout: pick a template. Modern gives a neat grid; Classic mimics old-school brand books.
4. Click Create Swatches and let the plugin build the page.

Figma adds a frame packed with labeled chips, hex codes, and a handy mini-navigation sidebar that jumps to each hue. Want a different look? Re-run the plugin, switch layouts, or tweak the frame’s max-width to display all chips in a single row.

In seconds you have a polished, copy-and-paste style guide—perfect for dev hand-off, stakeholder reviews, or marketing collateral.

📕 TL;DR Steps

Step 1: Manually create swatches (rectangles) for each color and make a scale for each one

Step 2: Batch rename your color swatches

Step 3: Convert swatches to styles

Step 4: Turn styles into variables

Step 5: Generate a Style Guide

🧰 Quick Reference of Tools Mentioned

Figma Source File

Final Thoughts

This workflow isn’t the only way—and it’s not always the fastest—but it’s flexible and powerful:

• Works with existing brand colors or strict accessibility tweaks.
• Plays nicely with developer-friendly Tailwind.
• Scales from tiny side projects to enterprise design systems.

I'm Liz btw 🙋🏽‍♀️ the Founder here at DesignerUp, it's nice to meet you! If you're interested in hands-on training like this, in modern product design—from UX and UI to business and strategy—check out our course. It's comprehensive, affordable and includes 1:1 mentorship. I’d be honored to have you as a student.

I just asked Google to make me a UI design—and it did. But is it any good?

At I/O 2025 the company Google unveiled Stitch, a Gemini-powered tool that promises to turn “ideas into UI designs and front-end code in minutes.” As a product (UX/UI) designer of 20 years, I wanted to see how this latest flavor of Text to UI generation tool would stack up.

I started off by using a simple prompt for a mobile app.

This is what it made:

It missed the mark on some of the stylized things that I asked it to do, but it’s clean otherwise. I can’t click around on it and do anything; it seems to have generated only one screen.

2. Editing

↳Using a Prompt

You can click Edit, and what it does is drop that screen into a text-prompt area. and asks you again to describe your design. Let’s see if it can do multiple screens. This time I said, “Make it purple and make me the next logical screen.” You can see Stitch working in the text chat area. Generally, I found my prompts tool about 2-3 minutes to generate. So it adjusted it to what seemed to be the very faintest purple tint (almost imperceptible) and made the primary color a dark gray, not quite the vivid purple hue I had in mind. It also did not in fact generate me the next logical screen or any other screen.

↳Using the Editing Options

There is also an option to edit a few elements using the edit modal in the top right corner. Not many options to choose from just a few colors, a color picker, a handful of Google Fonts, and a few corner radius options. (To be honest, I was anticipating this tying into Google's new Material Design 3 Expressive Design System or something far more advanced, creative or interesting than this very basic, boring screen.)

3. Importing into Figma (with Auto Layout)

What is interesting is you are able to bring this into Figma. I clicked the Copy to Figma button and pasted it into my Figma Canvas and it dropped it in with all the nested layers and Auto Layout. This made it pretty easy to work with and I could finally get that purple I really wanted.

4. Generating another screen

I wanted to prompt the next screen in the flow. So imagining if we were to click on that first 5 Minute Meditation from the list, I asked it to:

That kind of worked—it made the next screen and it is relatively clean (safe for the terribly aligned, framed photo that it also generated). The colors are a little off and don’t exactly match the previous screen.

5. Exporting the Code

I found it interesting that you could export the Code. I'm not sure how good the code is, but it is code. Of course, you still need to implement this properly, figure out all the other screens and how to tie it all together with a back-end, but it seems to give you at least some structure to start with (which I'm not sure is better or worse).

6. Switching to Experimental Mode

All of this was done in 'Standard Mode' which runs on Gemini 2.5 Flash. You can also switch to 'Experimental Mode', which uses Gemini Pro and lets you generate UI designs in a few other ways:

↳ From an image
↳ From a wireframe
↳ From a mockup

I flipped over to 'Web' in order to generate a website design this time and clicked the Image icon to upload an image for inspiration

7. Generating a UI from an Image

I uploaded a website I had designed and described what I wanted: “A crypto wallet called Cupcake—make it a landing page.” After clicking Generate Designs, this is what it produced—and I was not impressed. The right side was cut off, sections didn’t go full-width, the typography was bad, the color combinations were worse, and the shadows and icons looked dated.

There is also no option to export to Figma; it states 'Figma export is not available yet with the upload-image feature'. You could view the code, but do you even want to? Experimental is an overstatement.

8. Generating a UI from a Sketch

Next, I took a quick sloppily drawn wireframe sketch that I made in Figma Draw and asked it to

Stitch generated the design and asked if I wanted any changes. It was pretty clean and included most of what I had requested, but it was cut off with only one table row visible. The icons weren’t centered, there were grouping and alignment issues, and there were no actual charts.

There seems to be a lot of design knowledge and best practices that are left unconsidered in these renderings and mostly random approximation of what is intended. Even with more specific prompting I didn't get much improvement in the result. If I were to turn this into something useful I would still need to reference existing design patterns and think through lots of flow and interaction pieces and aesthetic choices.

9. Final Thoughts

I had much higher expectations from Google given that there are already so many existing AI to UI design generation tools on the market that do this much better. Their effort seems half-baked at best. Although it is in Beta, it does not seem to have anywhere near the polished output of Figma's First Draft or Uizard's Autodesigner for example. This release seems like a bit of a mad dash to throw their hat into the ring of the AI UI design hype and it's hard to tell who this is for exactly (beginners? non-designers? pro-designers?) and what they would do with it.

If you're just starting out as a designer, I know that it can be tempting to vibe design your way into creating a website and UI's but be careful of the risk of being solution-focused rather than problem-focused. There is also still a level of discernment and taste that needs to be developed to identify good and useful output and whether or not it is actually solving a problem for your users, and that insight only comes from talking to your users, knowing the right design patterns to use, the business model and the tech stack that underpins your designs. That's exactly what I teach my students in my course and, at least for now, it's clear that it's not something that AI is capable of generating away.

💬 What do you think? Would you use it and do you think it has potential for future improvement?

We are living in a time of great uncertainty. Lately, I’ve been feeling the weight of this heavily — both professionally and personally.

When I get overwhelmed, I find myself stuck in a loop of asking more and more questions and clinging to the answers. I start obsessing over data, wanting every decision in my design process or my career to make perfect sense and to add up.

Sometimes, it just feels so hard to find your mark when the mark keeps moving — when jobs feel fragile, industries are constantly shifting, economies are in flux and users are fickle. What was true last year feels shaky at best today. As designers, I think we feel this especially deeply. We want to know where we stand, who we are in this space, and whether we’re building something that matters.

We spend much of our days trying to get to solid ground. We make plans, set goals, chase clarity — as if certainty will save us. But life, in its most honest form, doesn’t promise stability. It promises movement, change, flux instead.

As UX designers, we’re trained to seek clarity. We want to know our users. We run surveys, interviews, usability tests — all to reduce the fog of uncertainty. We want answers. We want confidence. We want to be sure we’re building the right thing.

But here’s the truth: we will never fully know.

User experience design is, by nature, a practice of listening in the dark. Our users are constantly changing. Their needs shift with context, environment, and emotion. What worked yesterday might not land tomorrow. And that’s not a failure — that’s the nature of creating for humans. Uncertainty doesn’t mean you’re doing it wrong. It means you’re in it. You’re paying attention. You’re making space for real insight, not just surface solutions.

This is why I always come back to mindfulness. Mindfulness teaches us to meet what is, how it is, without trying to force it into what we want it to be. That applies to design, too.

I believe in designing opinionated software and solutions. This may be a privilege granted to me after nearly 2 decades of being wrong and solving a lot of problems through design, but I think it’s important to start with action and a point of view. Each step I take thereafter is in the service of proving myself wrong. But it’s hard, it’s tough on the ego and sometimes on my spirit. 😔

There have been many times that what I felt so sure would help our users ended up doing the exact opposite — creating more friction for them and more problems for us (Have mercy on my developers’ souls). But mindfulness always reminds me that doing with intention and watching with discernment is always better than freezing with overthinking and reacting with judgment.

When we cling to certainty — when we insist on having all the answers before we begin — we close ourselves off to what might emerge from the beauty of uncertainty.

Real insight, real creativity, comes from learning to stay open. To ask instead of assume. To test without attachment. To sit with not knowing and trust that the next step will reveal itself in time.

When we design from that place — of curiosity instead of control — we’re not just building better products. We’re becoming more grounded, more flexible, and more human in our process.

Uncertainty is not a flaw in the system. It’s the natural state of the system.

We’re taught to think of uncertainty as a problem to solve, something to eliminate before we can move forward. But what if it’s not a problem? What if it’s the default state of the design process — and of life itself?

Design exists because the world is uncertain. If users were predictable, if problems stayed the same, if solutions worked forever — we wouldn’t need designers at all.

Uncertainty gives us something to respond to. It’s the reason we test, iterate, and evolve. It’s what keeps our work honest and human.

When you start to see uncertainty not as an obstacle, but as part of the creative structure you’re working in, you stop fighting it — and start working with it.

You start asking better questions. You stop judging yourself for not knowing. You become more adaptable. More resilient. More present.

What if uncertainty isn’t an obstacle but the reason we design?

Harnessing Uncertainty in our Design Process

The system (whether we’re talking about human behavior, product ecosystems, career paths, or creative processes) is dynamic, not static. That means it’s constantly shifting in response to internal and external factors.

1. Human behavior can be unpredictable

People change. Their needs, motivations, environments, and emotional states evolve. What users say they want and what they actually do are often different. That’s not a flaw in research or design — it’s a reflection of how complex human beings are.

→ How we can use this:
Use unpredictability as a reason to observe more, ask more, test more. Instead of aiming to “know everything” up front, approach your work like a conversation — open-ended, ongoing, and flexible. Lean into methods like usability testing, interviews, and A/B testing not just to confirm, but to discover. Surprises are where insight lives.

2. The design process is iterative by nature

Design thinking is built on testing, learning, and adjusting. If we had certainty from the start, we wouldn’t need prototyping or feedback loops. We’d just build once and be done. But real-world design requires living with ambiguity, because clarity emerges through the process, not before it.

→ How we can use this:
Let go of the pressure to get it perfect the first time. Use low-fidelity prototypes and sketches to explore ideas without overcommitting. Treat each round of feedback not as a critique of your ability, but as fuel for refinement. The messiness is momentum.

3. Technology and context are always shifting

New tools, trends, and disruptions constantly reshape what’s possible or expected. The “right” design today might be irrelevant six months from now. You can’t fully predict that, and you’re not supposed to. Uncertainty forces us to stay adaptive.

→ How we can use this:
Stay curious, not reactive. You don’t have to chase every new tool or trend, but you can build a habit of continuous learning. Pay attention to why something is catching on, not just what it is. Flexibility becomes a superpower when you can quickly absorb change without being thrown off course.

4. Careers and identity aren’t fixed

Especially for students or new designers, the path isn’t linear. You don’t go from A to B in a straight line. You learn, you pivot, you question. That messiness is the system working — not failing. The exploration is the work.

→ How we can use this:
Use uncertainty as permission to explore. Try different types of projects, clients, and roles. You don’t need to pick your “forever path” right now. Instead, notice what excites you, what drains you, and what patterns keep showing up. Your evolving identity as a designer is data, not a flaw.

5. Biology and nature work the same way

Even in systems biology or physics, equilibrium is rare. Growth, change, and emergence come from instability, not order. Creative ecosystems thrive when they’re open, not closed.

→ How we can use this:
Just as muscles grow by being stressed and repaired, creative growth comes from working through tension — not avoiding it. The ambiguity you feel when things are unclear isn’t a sign you’re failing; it’s a sign you’re being stretched. That pressure builds your ability to think flexibly, adapt quickly, and stay grounded when things don’t go to plan. Growth doesn’t happen in perfect conditions — it happens when you keep showing up anyway.

Working with Your Own Uncertainty as a Designer

• You don’t need to know it all to get started. The sooner you begin, the sooner you’ll gain clarity. Action creates clarity — not the other way around.
• Document what you’re unsure about. Write it down. Make a list. Let uncertainty be visible. This is how real problem-solving begins — not with answers, but with honest questions.
• Treat every project as an experiment. Not a test of your worth or skill. Experiments are allowed to fail. Their purpose is to teach you something.
• Reframe rejection and confusion as data. Didn’t get the internship? Got confused during a case study? That’s information. Not failure. Collect it. Reflect on it. Use it to adjust your next step.
• Highlight the uncertainty — Don’t keep it in the dark, share it, bring it to light, point it out. In your case studies, in your interviews. Make your ability to work with it and use it as fuel be your superpower.
• Focus on your ability to learn, not just to know. You won’t always have the right answers — but your ability to learn in real time is what makes you valuable.
• Build emotional tolerance for not knowing. It’s a skill. And the more you practice it, the less power uncertainty has over you. Mindfulness can really help with that.

Thoughts to Reflect On:

What if not knowing is where the real design begins?
What becomes possible when I loosen my grip on control?
Can I design from a place of presence, instead of pressure?

Reframing uncertainty:

Instead of asking “How do I eliminate uncertainty?”, the more useful question is:

“How can I learn to work skillfully with it?”

When you stop treating uncertainty as a signal that something’s wrong, and start seeing it as a sign that you’re engaged in something real, alive, and unfolding, the pressure shifts.

You’re in the process. You are a designer.

I teach a course on end-to-end product design with a mindful approach. I also have a YouTube channel about product (UX/UI) design and write about designing products more mindfully on Medium.

Over the past few months, I’ve been working on improving the onboarding and user conversion for one of the products I'm building. During that time, I studied and analyzed over 200+ onboarding flows to get a better sense of the main types of UX/UI design patterns and the components used in these flows.

For this, I created a Figjam table as well as a Notion table where I've categorized the 14 main types of onboarding design patterns from the world's best apps and I thought it would be useful to share this and how you can borrow from and copy these patterns to enhance your product's user experience.

Here is our table. You'll see that I have all of the patterns listed here on the left, followed by a definition of what it is, the best use case where this is appropriate, pros and cons, the UI elements that you need, and real working examples.

In Notion, I also have these tagged with app type, so if you're, let's say, working on a SaaS app, you can come up here, search "SaaS," and you'll see that I've tagged the ones that are most commonly used in those types of apps. I also have a gallery view here so you can see everything at a glance and all of the examples that I've added.

1. First Look

What it is

A brief introduction to your product that appears right after someone signs up or logs in for the first time. It usually takes the form of a concise carousel or a short video that highlights the product’s main benefits.

UI Components / Design Pattern

• Carousel / Slider: A few panels that open in a modal that people can swipe, click through or use next button
• Embedded Video: Useful if a dynamic in-action preview explains things better than static slides.
• Way to close the modal: Like an x button in the top right

Best use case

• Productivity and collaboration apps (e.g., Slack, Notion)
• Creative tools (e.g., Adobe Express, Canva)
• Complex SaaS tools (e.g., HubSpot, Airtable)
• When you want to give a quick snapshot of how things work
• This is great to show that high-level bird’s eye view of your product’s workspace or workflow in action.

Pros

• Doesn’t overwhelm the user with too much information, you want to keep this to the main big things that they need to understand.
• Helps them preview what’s going to happen and how they can move around your product

Cons

• Can be too high-level if it’s mostly pretty slides with little substance.
• Some of these videos are not edited or paced well and user just loose and patience and want to click off and try it already.
• Some people skip them if they’re in a hurry.

Why we like this pattern

They’re visually appealing and easy to skim. Carousels or sliders let people click at their own pace, while an embedded video can instantly show the product’s feel.

2. Product Tour

What it is

A step-by-step guide pointing out core features of your product. Usually involves overlays or pop-ups that guide new users around the interface in a set order or sequence.

UI Components

• Modal Overlays: Dim the rest of the screen, highlight one feature at a time.
• Progress Indicators: Show how many steps or items remain.
• “Next” and “Skip” Buttons: Give people control over pacing and let them opt out.

Best use case

• Analytics or data-heavy platforms (e.g., Google Analytics, Amplitude)
• Feature-rich project management tools (e.g., Asana, ClickUp)
• SaaS apps with complex interfaces (e.g., Intercom, Salesforce)
• Ideal if there are a few crucial features you don’t want anyone to miss.
• Provides a guided first experience for those who like structured help.

Pros

• Reduces initial confusion by showing exactly what matters.
• Provides a sense of direction and completeness.

Cons

• Might feel forced if people just want to explore.
• Too long a tour can fatigue users, leading them to quit halfway.

Why we like this pattern

They create a clear path without taking over the entire screen all at once. Progress indicators reassure users they won’t be stuck in an endless tour, while “skip” gives them the freedom to exit if they prefer to explore on their own.

3. Walkthrough Beacons

What it is

Similar to a product tour but it uses small beacons or glowing indicators in the interface. That user’s have to interact with before they move on. When users click or hover on these beacons, a pop-up or tooltip explains the feature right it place..

UI Components / Design Pattern

• Beacons / Dots: Small, often pulsating indicators.
• Popover Tooltips: Brief text that appears on click/hover, explaining the highlighted element.
• Subtle Animations: Catch the eye without feeling too “in your face.”

Best use case

• Website builders and customization tools (e.g., Siimple, Webflow)
• Design and editing apps (e.g., Figma, Canva)
• Apps where subtle discovery of features enhances experience (e.g., Shopify, Squarespace)
• When you want to introduce features without using full-screen overlays.
• Stay immersed in the product and by guided through action within it
• Helpful for highlighting parts of the interface folks might not notice on their own or drawing thier attention to things that might be hidden within menus.

Pros

• Feels lightweight and part of the UI (instead of dominating the entire screen).
• Lets users pick which beacon to explore, rather than being forced through a set sequence.

Cons

• Could still distract if users are trying to get something done immediately and it gets in their way.
• Too many beacons can clutter the interface or become visual noise. So don’t try to use this for every single feature that you have.

Why we like this pattern

They provide a gentle nudge in the right places. The subtle nature of beacons keeps the interface from feeling locked down with front-loaded onboarding steps, and popovers deliver more info only if and when the user wants it.

4. Empty State

What it is

What the user sees when they have no content or data in a particular feature. Often a mostly blank screen with a small illustration, message, or prompt guiding them on what to do next.

UI Components / Design Patterns

• Illustration or Icon: Visually warms up a blank screen.
• Prompt / Call to Action: Tells users what to do first (“Create your first board”).
• Skeleton Screens or Placeholder Content: A quick preview of how data will eventually appear.

Best use case

• Productivity or content creation apps (e.g., Trello, Notion)
• Task or project management software (e.g., Todoist, Monday.com)
• Apps that rely heavily on user-generated content (e.g., Pinterest boards, Airtable bases)
• When you need to show someone how to add or create their first piece of content. That initial interaction

Pros

• Sets a friendly tone with an inviting message.
• Keeps things uncluttered, focusing on a single nudge or next step.
• Prevents users from feeling lost in a bare interface.

Cons

• Might leave people stuck if instructions are unclear or too minimal.

Why we like this pattern

They transform emptiness into an instructive moment. A simple visual plus a concise call to action helps people understand what’s to do without feeling like they’ve hit a dead end.

5. Personalization

What it is

A quick way to gather user preferences or choices so the product experience can adapt to them (like picking favorite topics or categories or setting up notifications).

UI Components

• Questionnaire or Survey: A short form with checkboxes or dropdowns.
• Selection Chips: Little tags that they can select
• Progress Bar: So user know how many steps remain if multiple questions are asked.
• Profile Customization Options: Sliders or toggles to pick themes, categories, or personal preferences or in the case of Reddit to setup your avatar.

Best use case

• Social media and content apps (e.g., Reddit, TikTok)
• News and media aggregators (e.g., Medium, Flipboard)
• Streaming platforms (e.g., Spotify, Netflix)
• Helpful when your product has many features or content types, and you want to show people only what matters to them.
• Immediately tailors the experience to each person’s taste.

Pros

• Helps users feel it’s “their” product right away.
• It helps with tailor discovery and avoids overwhelming user with irrelevant content because instead it gives you the opportunity to only show them only thing they are interested in or care about.

Cons

• Asking for too many details upfront before users can try the product it can scare some user off.
• If nothing meaningful changes after they answer or they don’t feel like this is custom, it feels like a pointless exercise.

Why we like this pattern

It gives people a sense of this is made for me when they are done.

6. Checklists

What it is

This is a simple list of tasks for users to complete to get fully set up. Each item is typically a action they need to take, and they can see progress as they go.

UI Components

• List with Checkboxes: Each item has a short explanation and instructions on what to do and where to do it
• Progress Bar or Completion Percentage: Lets users see how close they are to finishing.
• Completion Badge: A small celebratory note once they’re done. Some sort of success message.

Best use case

• Account setup-heavy apps (e.g., accounting software like QuickBooks)
• Productivity and communication tools (e.g., Front, Slack)
• Complex onboarding scenarios (e.g., Shopify store setups, CRM integrations)
• Great for products that require multiple configurations, like connecting accounts or setting preferences.
• Encourages users to systematically explore all the essential features.

Pros

• Very clear, step-by-step approach.
• Crossing tasks off gives a nice feeling of progress.

Cons

• A big list can be intimidating if it looks like too much work.
• If tasks aren’t described well, it might be confusing rather than helpful.

Why we like this pattern

They present the setup as actionable steps rather than vague tips. Checkboxes make each step concrete and trackable, while the progress bar motivates users to keep going.

7. Action-Oriented

What it is

This pattern prompts folks to do a specific key action instead of just reading about features. It’s all about hands-on engagement from the start. Completing onboarding here may also be incentivized or rewarded.

UI Components

• Bold CTAs (Call-to-Action Buttons): Clear, direct language (“Send your first message now”).
• Inline Prompts: Tiny nudges or labels inside the interface where the user takes the action.
• Celebratory Micro-Animations: A small “hooray” moment after completing the action.

Best use case

• Communication or messaging platforms (e.g., Slack, Copilot)
• Document and collaboration apps (e.g., Google Docs, Dropbox Paper)
• SaaS products focused on quick value demonstration (e.g., Loom, Grammarly)
• When there’s a primary action that really shows off why the product is worthwhile.
• Perfect for software where one core task unlocks major value.

Pros

• Users learn by actually doing and see immediate results.
• Builds confidence early since they accomplish something tangible.

Cons

• Some people might prefer to explore on their own before committing to an action.
• If multiple tasks are equally important, focusing on just one may feel limiting.

Why we like this pattern

They encourage immediate interaction without burying the user in instructions. A direct CTA is easy to see and understand, while a little celebration when they succeed makes the product feel more friendly and fun.

8. Goal Setting

What it is

A pattern where you help users define a goal (like a weekly target) and then track their progress, encouraging them to stick with it.

UI Components

• Goal Creation Screen: A place to set daily, weekly, or monthly targets.
• Progress Tracker or Dashboard: Shows how close they are to meeting that goal, often as a ring or bar.
• Motivational Notifications: Little nudges that remind users to stay on track (though these might be in-app or via email/push).

Best use case

• Learning and education platforms (e.g., Duolingo, Coursera)
• Fitness and wellness apps (e.g., Nike Run Club, Headspace)
• Habit tracking and personal development tools (e.g., Fabulous, Strides)
• Products that rely on consistent or repeated usage.
• Any scenario where you can clearly measure success over time.

Pros

• Gives a concrete sense of purpose.
• Motivates recurring engagement because people want to reach that target.

Cons

• Can turn off users who just want to poke around without big objectives.
• Missing goals repeatedly might discourage some folks.

Why we like this pattern

They neatly frame progress in a way users can easily see and measure. A creation screen helps them commit, a dashboard keeps them updated, and gentle reminders help sustain momentum.

9. Coach Marks

What it is

Small pointers or highlights around different parts of the UI, each offering a short explanation. Think of them like digital sticky notes on buttons or sections.

UI Components

• Highlighted Spotlights: Dim the background, highlight the element in focus.
• Short Text Labels: One or two lines explaining the feature’s benefit.
• Close or “Got it” Buttons: So users can dismiss them easily once they’ve read.

Best use case

• Creative software and design tools (e.g., Canva, Photoshop Express)
• Apps introducing new features regularly (e.g., Instagram, Trello)
• Complex productivity suites (e.g., Microsoft 365, Google Workspace)
• When you need to explain what certain icons or tabs do without permanent text cluttering the screen.
• Especially useful for introducing a new feature to returning users.

Pros

• Doesn’t block everything else, so it feels less pushy than a full-screen overlay.
• Each coach mark is short and sweet.

Cons

• If you add too many, it’s overwhelming and might get ignored.
• Some users will skip them if they feel confident enough to explore solo.

Why we like this pattern

They allow targeted, on-the-spot guidance without making people sit through a long tutorial. The short labels keep it quick and relevant, and the spotlight naturally draws attention to important areas.

10. Demo Content

What it is

A sample set of data or project content that people can play with to get a sense of how the interface works, without having to upload or create something from scratch.

UI Components

• Prefilled Templates / Data: Realistic examples people can click around in.
• Editable Example Fields: Let them tweak or modify the sample data to see how things respond.
• Switch between “Example” and “My Content”: So they can easily move on when they’re ready to start fresh.

Best use case

• Data analytics and reporting tools (e.g., Tableau, Google Analytics)
• Creative software with templates (e.g., Figma, Adobe XD)
• SaaS apps where immediate exploration is valuable (e.g., Frame, Airtable)
• Tools that revolve around data, like analytics or design platforms.
• Any product where seeing it in action speaks louder than blank screens.

Pros

• Instantly shows the workflow in a more realistic way.
• Reduces friction because users don’t have to set up everything themselves.

Cons

• Might confuse some folks who think the sample data is theirs.
• Doesn’t necessarily reflect someone’s real-life scenario, so it could still feel abstract.

Why we like this pattern

They let users explore the product’s full capabilities from the get-go. Editable sample data helps people experiment in a “safe” way and often clarifies how things work more effectively than just reading instructions.

11. Simulation

Number eleven is Simulation. This is an interactive or recorded demonstration that shows the product in action under realistic conditions.

For example, Intercom does this when setting up a chatbot. Users can test the messenger and see how it responds, simulating the real experience before going live.

The UI elements mimic the real user experience but include guidance to ensure users understand what’s happening.

You'll see this in customer support tools (Intercom, Zendesk), collaborative software (Zoom, Slack), and SaaS platforms (Salesforce). This is ideal for complex products that require customization.

12. Self-Segmentation

What it is

An approach that asks users to pick the path or user type that best describes them (e.g., “I’m a teacher” vs. “I’m a student”), so the onboarding flow can be tailored.

UI Components

• Segment Buttons or Cards: Each option neatly labeled, often with a quick “who this is for” line.
• Short Explanations: Help users pick the best match.
• Customized Follow-Up Screens: The product changes based on the choice.

Best use case

• Multi-purpose productivity tools (e.g., Notion, Monday.com)
• Educational software (e.g., Khan Academy, Edmodo)
• Business apps serving varied user groups (e.g., HubSpot, Mailchimp)
• If your product serves multiple user types with distinct needs.
• Helps reduce clutter by skipping irrelevant features.

Pros

• Makes the experience feel more relevant.
• Streamlines onboarding so different users get different flows.

Cons

• Too many categories can be overwhelming or confusing.
• If someone picks the wrong category, they might see a bunch of irrelevant prompts.

Why we like this pattern

They guide people to the right experience from the start. Clear button labels and quick blurbs prevent them from guessing, and splitting the next screens ensures each segment sees only what they need.

13. Contextual Tooltips

What it is

Pop-up tips that appear exactly when users hover or click on something that might need more explanation. They show up at the moment of need, rather than covering the screen.

UI Components

• Hover or Click Tooltips: Usually a small box with a sentence or two.
• Arrow Pointer: Visually links the tooltip to the specific button or icon.
• Close / “Got it”: Lets folks dismiss the tooltip once they understand.

Best use case

• Complex workflow or editing tools (e.g., Adobe Photoshop, Figma)
• Data visualization dashboards (e.g., Cycle, Databox)
• SaaS applications with many hidden or secondary features (e.g., Trello, Airtable)
• When your UI has advanced or hidden features that aren’t super obvious.
• If you want to keep the screen minimalist but still offer help.

Pros

• Keeps the design clean, only appearing when relevant.
• Feels less pushy than a mandatory walkthrough.

Cons

• Users might never see the tip if they don’t hover or click in the right spot.
• Repeated appearances can be annoying if not managed well.

Why we like this pattern

They provide bite-sized info right in context, without cluttering your layout. Hover/click triggers keep it subtle, and the quick dismissal option lets users continue working without interruption.

14. Just-In-Time Modals

What it is

A modal that appears exactly when it’s relevant — for example, the first time someone tries a feature after an update, or the first time they return and attempt a new action.

UI Components

• Modal Dialog: Pops up over the interface with a brief explanation.
• Short Setup Prompt: A concise line about what’s new or how to use the feature.
• Opt-Out Buttons: “Don’t show me again” or “Remind me later” so users aren’t stuck seeing it repeatedly.

Best use case

• Apps frequently updated with new features (e.g., Miro, Slack)
• Collaboration or productivity tools (e.g., Asana, Notion)
• Software that introduces occasional significant UI/UX changes (e.g., Google Workspace apps, Adobe Creative Cloud)
• Pointing out recent changes or new features at the moment someone engages with them.
• Works well if you track usage so you know when to show help or tips.

Pros

• Timely, so people are more likely to pay attention.
• Makes sure the info arrives when it’s actually needed.

Cons

• Can interrupt the flow if people just want to get the task done.
• Too many unexpected modals can quickly become frustrating.

Why we like this pattern

They deliver crucial information right at the moment of relevance, which is often the most effective time to teach. Giving users a quick way to dismiss or snooze ensures they aren’t repeatedly startled by the same message.

15. Bonus: Information Gathering

Number fifteen is a bonus pattern: Information Gathering. This is used when an app requires a lot of upfront user input before being useful.

For example, Acorns needs to collect financial details before users can start investing. Users must set up security questions, link bank accounts, and choose investment preferences.

This onboarding type is common in finance apps, HR platforms, e-commerce personalization (Etsy), and recommendation engines.

These flows can be long or short, depending on the required setup.

Final Thoughts

These onboarding patterns are highly effective at engaging users. Many of them can be combined depending on user behavior and preferences.

The real challenge is knowing how and when to use them. To do that, you need to understand the golden rule of user onboarding and the three main elements that create a great user experience.

If you want to learn more about that, read this next!

I studied the UX/UI of over 200 onboarding flows - here’s everything I learned

I studied over 200 onboarding flows across some of the most successful and not-so-successful digital products out there, and what I found were patterns, mistakes, and some interesting insights that will change the way you think about onboarding UX.

Elizabeth AlliDesignerUp

📚 I teach a comprehensive, affordable course all about product (UX/UI), business and strategy, so if you’re interested in learning that sort of thing check it out.

There is a moment when you open a brand-new app or log in to a service for the first time where you don’t know this is going to work for you and you don’t really where anything is

And somewhere in the back of your mind, a little voice is already deciding: Is this worth my time?

I’ve studied over 200 onboarding flows across some of the most successful and not-so-successful digital products out there, and what I found were patterns, mistakes, and some really interesting insights that will change the way you think about onboarding UX.

Why Onboarding Matters

Well for starters, let's talk a little about what onboarding is and what it isn't. It's not the login screen (Authentication) or even the fields where you enter your account information (Account Setup). While these might be part of 'onboarding', a true 'onboarding flow' is the structured UX flow of screens, interactions, and prompts designed to introduce a user to a product or feature.

Onboarding is often an afterthought for many, but it's also a product’s first line of defense against the delete button. One of the biggest things people get wrong about onboarding is that it's not exclusive to first-time users or even the first time a user signs up or logs-in. It's a bit more nuanced than that, or at least a good onboarding flow should be more nuanced than that.

A bad onboarding experience can cause up to 80% of people to abandon an app before they even use it.

That’s like opening a restaurant and having 100 people show up but only 10 of them stay to try the food, the other 90 look at the menu and walk right back out. That’s not good. Especially when you’ve poured so much into building a great product and no one even gets to see it. And we all know how important first impressions are and how hard it is to win people back.

But products that get onboarding right? They can increase retention by up to 50% and create die-hard users who actually stick around.

So the big question is: What separates a winning onboarding flow from a failed one? And how can we design them better?

Turns out, I've' uncovered a formula and some of it might not be what you expect.

The Golden Rule of Onboarding

You can’t onboard someone you do not understand.

No amount of beautiful illustrations, perfectly laid out screens or tool tips will make up for not clearly understanding users.

That's because the key to getting someone "onboard" is being able to meet them where they are at and having a plan to get them where they are trying to go.

Onboarding isn’t just about showing off your product and its features—it’s about getting them to the result they care about.

And for that, you need to know who they are, and what they care about, and you need a strategy to get them to a result.

Developing an effective onboarding strategy

Good onboarding is all about strategy and most designers don't think much about it. They throw up a carousel of walkthrough screens and hope that users don't skip it. But if you want to do it right then here are the steps you need to take to figure out your onboarding strategy.

Step 1: Know thy user - Define Your User Types

The most successful products know that NOT every user is the same. Some might be:

• Power users who want advanced features fast
• Casual users who need hand-holding
• Skeptical users who need immediate proof of value
• Business case users
• Some might be motivated by rewards
• Some might be terrible with technology and have only ever used to used Facebook

So it’s really important that you do the research to understand who your ideal customer is.

And here’s the kicker you also need to understand who your product is NOT for.

📓 Example: Notion’s Onboarding Flow

Notion’s web app is a great example of this.

When you first sign up, it asks whether you want to use it for:

• A team
• Personal use
• School

This means you're self-identifying with the type of use case. Then, it asks you just a few questions about yourself using a dropdown with limited options.

I think in a lot of cases, this is better than just an empty form field, because it allows for a more tailored experience on the other end.

After selecting a few details, like:

• What kind of work you do (e.g., Product Management)
• Your team role
• Your primary use case (Wiki, Project Management, or Company Goals)

You're dropped into the workspace, with walkthrough tooltips to help guide you. This means you're not left alone to fumble through the experience.

💡 Takeaway: Trying to be everything for everyone rarely works so knowing who your product isn’t right for is a constraint that will really help you in the next step.

Step 2: Work backward - Define what success looks like for your users

The best apps recognize that different users and user types have different goals, motivations, and levels of experience, and that changes each step of their journey too.

For each type, you need to define what success looks like for them

• What’s the ultimate outcome they’re here for?
• What steps absolutely need to happen to get them there?
• What’s the simplest, most intuitive way to guide them through those steps? or to get them to their first “win”

📓 Example: Acorns Onboarding Flow

Acorns onboarding is a great example of this.

Since it’s a financial app, there are a lot of questions that need to be answered in order to classify the user correctly.

It starts with simple toggles that allow you to choose multiple answers—so the app knows how to categorize you.

The first critical step is linking your bank.

• This is a non-negotiable because, without it, you can’t see any results.
• They reassure users that it’s safe, encrypted, and secure.
• You can either auto-connect your bank or manually enter details.

Next, Acorns uses Plaid, a third-party service, for secure automatic linking. After logging into your bank and going through security checks (2FA, etc.), you reach success!

At this point, the app explains that it’s subscription-based, showing different pricing tiers (Personal, Family, etc.).

While this flow is quite extensive, it makes sense for a financial product. However, one thing I don’t love is that you can’t pause and finish later. I wish there was a notification upfront letting users know they’ll need to complete this in one sitting.

💡 Takeaway: If you don’t define success for your users, you won’t know when they’ve achieved it.

Step 3: Align Onboarding with Your Business Model & Strategy

This is the step that is most often overlooked by designers. Onboarding isn’t just about helping users understand the product—it also needs to align with how the business plans to make money and the business's long-term objectives. If onboarding is too aggressive in pushing monetization, users will bounce before they even understand the value. But if it’s too passive, they might never convert.

We’ve all been catfished into being really excited about an app only to be slammed face-first into a paywall before we even get a chance to see what it can do.

That’s why it’s critical to balance user experience with business objectives—whether that’s

• Driving subscriptions
• Increasing ad revenue
• Bolstering engagement
• Attracting investors

😳 Yes, sometimes, you need to have ads in your app and yes, you should be designing for them intentionally instead of randomly sticking them wherever they will fit into the UI.

📓 Example: VSCO’s Onboarding Flow (Not so great 👎🏽)

VSCO is an app I have mixed feelings about.

After signing up, you immediately hit a paywall.

• Because VSCO follows a premium business model, it does allow you to see a few features without paying.
• However, it’s unclear what’s free and what’s behind the paywall.
• I also had no idea I could explore the app before using it but all it let me do was see some very basic functions without telling me what's paid and what's not.

This means users end up clicking around aimlessly, not knowing what they’re getting into.

📓 Example: Fotor’s Onboarding Flow (Much better 👍🏽)

In contrast, Fotor (another photo editing app) does this well.

• Right from the start, it has a lovely onboarding modal that classifies the user.
• You select options like:
  • Your content creation experience
  • What you plan to use the app for (e.g., social media content)
  • How often you edit/create content

This personalizes the app experience right away.

Once inside, you can immediately see different features, templates, and editing options. Paid features are clearly marked with a diamond icon, so you’re never left guessing what’s free.

💡 Takeaway: The best onboarding isn’t about locking users in—it’s about showing them why they’d never want to leave

Step 4: Test, Tweak, and Optimize in Small Steps

If users drop off at a certain step, it doesn’t mean that everything is wrong. Don’t go redesigning it all—change one thing at a time and then measure it. Because it’s been my experience that small nudges can lead to big results.

• Reduce the number of clicks
• Change the copy
• Add a visual cue

💡 Takeaway: You don’t fix onboarding with panic and guesswork. You fix it by testing —one change at a time.

Finding The Best Examples of Onboarding Inspiration

After designing onboarding flows for years and studying these 200+ examples, I saw the same mistakes over and over again but before I get into those...

You might be curious how I was able to study all of these? Well, luckily I didn't have to download, install and create accounts on 200+ apps. I used my little secret weapon called Mobbin.

I just went to Mobbin and searched 'onboarding flows' and started analyzing them and you can too! It’s such an underrated tool for UX/UI designers, you can gain invaluable insights from looking at the screenflows and screencasts that they collect and curate and you can even bring them right into Figma.

Common Onboarding Mistakes to Avoid

Okay, now that we know what works, let’s talk about what doesn’t.

And these easily fixable mistakes are costing companies millions in lost users and revenue!

🚫 Mistake #1: The “Too Many Steps” Trap

If you’re asking for their full name, job title, favorite color, and your grandma’s maiden name—before you even let them see the product?

They’re not going to like that.

The best apps get users to their first win as fast as possible.

🚫 Mistake #2: The “Wall of Text” Problem

If your onboarding flow feels like a textbook, users will skip it.

Instead, use visual storytelling, quick tooltips, and real user testimonials to make it feel natural.

It's been my experience that storyboard-style flows are very engaging.

🚫 Mistake #3: The ‘No Escape Room’

It’s normal to feel like you want your users to understand every little thing about your product in order for them to get the full effect but if you force them through a 12-step program before letting them do anything?

Yeah, they are not going to like that.

Give users the option to skip if they want to skip and encourage them to explore on their own at the right time. Sometimes a 'choose your own journey' approach is what’s right for your type of user and sometimes more hand-holding is needed.

The key is flexibility—the best onboarding flows feel like a helpful guide, not and escape room you have to struggle your way out of.

🏆The Winning Formula and Three Key Elements that Work Really Well For Onboarding

So here is the actual user experience you want to aim for in terms of the interactions:

1. Personalized Onboarding → The “This is Just for Me” Effect

The best apps don’t treat every user the same.

💡 Takeaway: If your onboarding flow is one-size-fits-all… it’s can probably be improved.

2. Progressive Disclosure → The “Just-in-Time” Rule

Great onboarding follows the Just-in-Time Rule—users only get information when they actually need it.

I love using action-based triggers and conditionals for this and you could use something like Intercom to do this.

💡 Takeaway: Too much too soon is overwhelming. But not enough can make them feel lost

3. Emotional Engagement → The “Make It Feel Good” Factor

Apps that use micro-rewards, progress bars, and even subtle animations create an emotional connection with users—keeping them engaged, excited, and coming back.

It’s not just cute—it’s pure psychology. This tiny dopamine hit makes users feel good about using the app.

And it works.

💡 Takeaway: The best onboarding flows don’t just educate—they make users feel something.

Conclusion

So, after analyzing over 200 onboarding flows, here’s what I found:

✅ Personalization makes users feel seen.

✅ Progressive disclosure prevents overwhelm.

✅ Emotional engagement keeps users hooked.

✅ And the only real way to master onboarding?

👉 Know your users, define their goals, and test if you can get them there.

💬 Now tell me—what’s the WORST onboarding experience you’ve ever had? Drop it in the comments!

And if you want to see my huge collection of onboarding flows and screens cataloged and categorized by type like Walkthrough, Product Tour, Beacons etc. Then subscribe and follow for part 2!

I teach an affordable course all about product (UX/UI), business and strategy, so if you're interested in learning that sort of thing check it out.

This month alone I have built three polished animated landing pages and an entire CMS and I didn't:

This month alone, I’ve built 3 polished, animated landing pages and an entire CMS but I didn’t:

🚫 Do it from scratch
🚫 Use AI
🚫 Use a UI kit
🚫 Build a design system
🚫 Use a no-code tool

So how did I do it? Well, I used two big cheat codes.

I'm going to show you how to start designing before you even open Figma and find unlimited inspiration, how to create dynamic designs that are functional out of the box, and how to do the heavy lifting of building a product—even if you don't know everything about code or design.

Cheat Code No. 1: Work Backwards

Modern front-end web and app development involves a tech stack, and the most popular tech stack right now uses React and Tailwind. So, as a designer, I decided to do the same.

Now to back up a little bit: if you don't know, React is a JavaScript library that developers use to build websites and user interfaces. So when we hand off our static designs to our front-end developers, this is the language they're coding them in. Tailwind CSS is a styling framework that makes it easy to customize how everything looks.

So, as a designer, instead of starting with static designs in Figma, I used an existing UI component library. Now, these are nothing new. Front-end devs and builders have been using these frameworks for a while now, but I'm not talking about any old UI component library. I'm talking about the new generation of UI components that are making it possible to build crazy-looking stuff like this ten times faster.

For example, imagine you're designing a popover component or a navigation menu. Instead of starting from scratch, noodling thousands of interactions in your prototypes in Figma, and annotating what you mean for the devs,

you can grab a UI component from a library that's already fully designed and fully coded and developers can plug it directly into your app.

This saves so much time between design and code and ensures consistency between the two because:

✅ It's built for React.
✅ It's completely styleable using Tailwind (without wrestling with weird defaults
✅ It doesn't require you to pick entire color palettes and color scales yourself.
✅ It's copy-and-paste (so you don't need all of those code dependencies)
✅ It includes the sickest animations and micro-interactions (like Framer Motion, built right in).
✅ They also have UI kits for Figma so you can design with them.

Getting started with UI Component Libraries

Here's the process I would use if I wanted to get started with these UI component libraries.

Step 1: Communicate with your developers

The first step would be to communicate with your developers. Have a conversation with them about what they're using. Are they already using React? Do they have a framework in mind? Is there one that you like that they would consider implementing?

Step 2: Get familiar with the UI component library

The next step is to familiarize yourself with some of these UI component libraries. You can sit down together and go through them to see what might work and what might have the components you need. There are some UI component libraries out there with amazing documentation that are also open source. You can go through all of this in detail and see if it'll work for your project ahead of time before you spend a ton of upfront effort implementing things.

Step 3: Grab the Figma UI Kit

The next step is to grab the Figma UI kit and then start using all of the components to assemble your UI screens and flows and customize them.

Example:

Here I am inside of Next UI Figma kit (which they've recently renamed to Hero UI). You can see that there are themes here in dark mode or light mode.

I'm going to grab one of these Tailwind breakpoints (1280 by 768). Then I'm going to create a template page. I'll start assembling these into screens. I’ll paste this here, convert it to a frame, and name this frame "Dark Container."

With that, I’ll switch the color selection over to black so that my background's dark.

Then I can start dragging in these components. I'll go over to the Assets tab, search for "tabs," and use that to create my main navigation. You’ll see it’s in white right now, so it doesn’t quite work with the background.

To fix this, all we need to do is select the container, go over to the Appearance property, and click on this little "Apply Variable Mode", button then select 'Tokens' and click 'Dark'. There it is! You'll see it switches right over to dark mode.

If I want to test in light mode, I duplicate this, select white for the background, name this "Light Container," go over to Appearance, select that token, and switch it to light. You can now just drag and drop components back and forth between light and dark and watch them change automatically!

Now we have all of these properties and variables that we can toggle on and off. For instance, underlined here—that's great for navigation. We can remove the background, leave the button hover action.

We can drag in an avatar component in for our profile.

This is a little big, so we go over to the properties and select the small size. Now it's nice and proportional. Then we just keep building.

I’ll drag in this table component onto the screen as the start of my dashboard, customize it by toggling off the selection text box, and add sorting. We can add cards, chips, and keep building.

What's amazing is that this is all available in code. You can refer to this component when talking to your developers—they can see it and the functionality.

If you're a designer working with developers, you can shortcut so much of the process by starting with these pre-designed components and just styling them. If you're a developer who's not confident in your design skills, these are really well-crafted and ready to go, giving you a great boilerplate to start with.

Now we have more time for the really important stuff: focusing on the user flows and experience.

Normally, when I do this, I collect inspiration from all over the place—taking screenshots or screen captures of apps, doing market and competitor research, and seeing what my users are currently using and how they're solving problems.

Cheat Code No. 2: Mobbin

This next cheat code does all of that for you, and it’s called Mobbin. This is honestly one of my ride-or-dies because we’re talking about a catalog of screens, flows, interactions, and screencasts of the best apps out there. It’s got a Figma plugin so you can bring all of these into Figma and work with them.

This is Spotify's Wrapped. Here’s the flow of all the screens for that.

I copied it from Mobbin, opened the plugin, and pasted it right into Figma. It brings all of those screenshots in so I can look through everything and get inspiration.

You cannot afford not to subscribe to Mobbin if you are a designer or developer who cares about making great products.

Some things to note about using UI Component Libraries

Remember, you don’t want your codebase to get out of control and unmanageable. Make sure you aren’t just trying to build the kitchen sink out of this. Use these tools smartly and sparingly, and understand the experiences you want to create. Also, ensure everything is well-documented, and make sure all components have their own unit tests to catch bugs early.

What I love about Next UI, for example, is that it integrates with Storybook so you can ensure your components function properly. Next UI isn’t the only component library, though. Here is my full list of the best, hottest UI component libraries, why I love them, and how to use them.

I also have a course where I teach all of this stuff, so if you want to learn more, check it out at DesignerUp.

UI component libraries are incredibly helpful for building web interfaces. They make it so much easier to create web animations and user interactions, even if you’re not a coding expert. This new generation of copy-and-paste UI libraries take this convenience to the next level by focusing on simplicity and quick setup. With these libraries, you can skip the complicated configurations and get straight to building and designing.

Unlike older libraries that acted more like toolkits, requiring you to manually assemble components and handle dependencies, these modern options come with fully styled, pre-coded components that are ready to use. They integrate smoothly with frameworks like React and Tailwind CSS, making them ideal if you’re short on time but still want high-quality results.

If you’re looking to save time and effort while creating polished designs, this list of the best free, open-source, copy and paste UI component libraries is for you.

What is a UI Component Library?

Copy-and-paste UI component libraries take the idea of a traditional UI library and simplify it for modern development. Instead of acting as a full framework that you need to install or a static UI kit like a Figma - these libraries offer pre-coded, fully functional components—buttons, forms, modals, animations, and more—that can easily be styled with Tailwind, work with CSS and React are ready to implement directly into your project. They go beyond just providing design inspiration by including built-in features like animations, theming, and responsive design, making it easier than ever to create polished and professional interfaces in a fraction of the time.

Why Use Open Source UI Component Libraries?

Open-source UI libraries are ideal for developers who want to create beautiful and functional designs quickly and best of all - they are completely free to use! Here’s why you should consider using them:

• Ease of Use: Many libraries offer copy-and-paste code, making implementation effortless.
• Time-Saving: Skip the tedious process of coding components from scratch.
• Customization: Tailwind CSS and similar frameworks make it easy to tweak designs to match your brand.
• Cost-Effective: These libraries are free, making them accessible to anyone.

The Hottest Free UI Component Libraries of 2025

After trying out many of these copy and paste UI component libraries we've narrowed it down to these as our favorites of 2025. They are chosen for their ease of use, flexibility, scalability, ease of customization and beautiful animation and micro-interaction properties baked right in.

1. Daisy UI: A Beginner-Friendly Tailwind Design System

Daisy UI is one of the most versatile open-source UI component libraries out there. Built on Tailwind CSS, it transforms the framework into a fully functional design system with pre-styled components and themes.

Key Features:

• Beginner-friendly.
• Pure CSS and framework-agnostic.
• Multiple built-in themes, including dark mode.

Pros:

• Easy to learn and integrate, even for beginners.
• Provides a consistent design language for projects.
• Supports theming and customization out-of-the-box.

Cons:

• Limited advanced animations compared to other libraries.
• Heavy reliance on Tailwind CSS, which may not suit every developer.

Types of Components:

• Buttons, modals, cards, dropdowns, and toggles.
• Pre-styled forms, navigation bars, and alerts.

How You Might Use It:

Let’s say you’re building a simple blog site. With Daisy UI, you can quickly set up a responsive layout, integrate dark mode for a modern touch, and customize pre-styled components like buttons and cards to match your brand’s aesthetic—all without having to start from scratch.

2. UIverse: Pinterest for UI Components

If you’ve ever wished for a Pinterest-style library of UI components, UIverse is here to answer your prayers. From glowing buttons to slick progress bars, this library offers a beautifully curated selection of ready-to-use elements.

Key Features:

• Copy-paste-ready code for quick implementation.
• A wide variety of components, including buttons, cards, and progress bars.
• Ideal for both creative exploration and polished development.

Pros:

• Extensive library of unique and creative components.
• Great for prototyping and idea generation.
• Suitable for Figma imports as well as production.

Cons:

• Not as customizable as Tailwind-based libraries.
• May require extra CSS tweaks for responsiveness.

Types of Components:

• Glowing buttons, floating cards, progress bars, and hover effects.

How You Might Use It:

Imagine you’re designing a dashboard for a project management tool. UI Verse can provide you with visually engaging progress bars and glowing buttons to highlight key actions. Its curated selection helps you maintain a polished and cohesive look across your platform.

3. Float UI: No Muss, No Fuss

When it comes to simplicity and functionality, Float UI is a standout. This free UI library includes everything from hero sections to pricing tables, all pre-designed to save time and effort.

Key Features:

• Works out of the box with React, Vue, Svelte, and plain HTML.
• Fully customizable with Tailwind utility classes.
• Suitable for dashboards, landing pages, and more.

Pros:

• Straightforward and practical for developers.
• Pre-styled templates for common use cases like landing pages.
• Supports various frameworks beyond React.

Cons:

• Limited options for advanced animations.
• Less flexible than libraries built entirely around Tailwind.

Types of Components:

• Hero sections, pricing tables, testimonials, and feature grids.

How You Might Use It:

Suppose you’re launching a SaaS product and need a sleek landing page. With Float UI, you can use pre-designed hero sections and pricing tables to present your offerings in a professional and appealing manner. Customizing them with Tailwind classes ensures the design aligns with your brand.

4. Shadcn UI: The Foundation for Custom Libraries

Shadcn UI has quickly gained popularity as the “GOAT” of copy-and-paste UI libraries. Built with Radix and Tailwind CSS, it’s designed for scalability and customization.

Key Features:

• Simple, accessible, and fully customizable components.
• Works as a foundation to build your custom library.
• Scales effortlessly from small projects to large builds.

Pros:

• Highly customizable, offering complete control over components.
• Strong focus on accessibility and performance.
• Ideal for projects with evolving requirements.

Cons:

• Requires more setup and configuration compared to plug-and-play libraries.
• Best suited for experienced developers.

Types of Components:

• Accessible modals, buttons, forms, and navigation bars.

How You Might Use It:

If you’re creating an e-commerce platform, ShadCN lets you build a custom component library tailored to your needs. Use its accessible modals, buttons, and forms to enhance the shopping experience while maintaining scalability as your store grows.

5. Aceternity - Animation and Flair

If you’re looking to add a touch of animation and flair to your project, Aceternity is the answer. Inspired by ShadCN, it integrates seamlessly with Framer Motion to create stunning animated components.

Key Features:

• Free and open-source.
• Built with React, TypeScript, Tailwind CSS, and Framer Motion.
• Components include dropdowns, navigation bars, and testimonial cards.

Pros:

• Stunning animations for a polished, modern look.
• Perfect for marketing sites and portfolios.
• Easy to implement with detailed documentation.

Cons:

• More focused on aesthetics than functionality.
• Limited non-animated components.

Types of Components:

• Animated dropdowns, hover effects, and testimonial cards.

How You Might Use It:

Working on a startup’s product marketing page? Aceternity’s animated dropdowns and hover effects can elevate your site’s interactivity and visual appeal. The smooth animations will make your product look polished and professional, leaving a lasting impression on potential customers.

6. Magic UI: The Chili Oil for Your Website

Imagine your website is a plain bowl of noodles. Magic UI is the chili oil that makes it unforgettable. Built on top of ShadCN, this library offers over 50 animated components.

Key Features:

• Interactive 3D animations.
• Components for SaaS apps, startups, and product marketing sites.
• Built with React, TypeScript, Tailwind CSS, and Framer Motion.

Pros:

• Offers advanced animations for immersive user experiences.
• Ideal for highly interactive landing pages.
• Comprehensive set of animated components.

Cons:

• May be overkill for simpler projects.
• Requires familiarity with animation frameworks.

Types of Components:

• 3D progress bars, scratch-to-reveal cards, and spinning loaders.

How You Might Use It:

Suppose you’re building a creative portfolio or a SaaS landing page. Magic UI’s 3D animations, like a spinning progress wheel or scratch-to-reveal card, can bring your project to life. These interactive elements can make your site memorable and engaging for visitors. Magic UI Pro also includes templates pre-assembled for you that are stunning and highly worth checking to help you build pages even faster!

7. Next UI: A Robust Design System

For larger projects, Next UI is more than just a component library—it’s a full-fledged design system. Designed to work seamlessly with Next.js, it offers over 210 plug-and-play components.

Key Features:

• Optimized for performance with minimal CSS and JavaScript overhead.
• Supports server-side rendering and responsiveness.
• Includes dark mode and Figma UI kits for designers.

Pros:

• Comprehensive design system for enterprise-grade applications.
• Optimized for high performance and scalability.
• Great support for designers with Figma kits.

Cons:

• Best suited for Next.js applications, limiting broader usage.
• Heavier setup process compared to smaller libraries.

Types of Components:

• Forms, data tables, modals, navigation bars, and dashboards.

How You Might Use It:

If you’re developing a large-scale application, such as an enterprise dashboard, Next UI provides a complete toolkit. Its responsive components and server-side rendering capabilities ensure optimal performance, while the Figma kit allows designers to prototype and iterate efficiently.

How to Choose the Right Free UI Component Library

With so many options available, it can be challenging to decide which UI component library is best for your project. Here are a few tips:

1. Project Size: For small projects, libraries like Float UI and Aceternity are ideal. For larger projects, consider robust systems like Next UI.
2. Design Requirements: If you need animations, go with Aceternity or Magic UI. For simplicity, Daisy UI or UI Verse are great choices.
3. Framework Compatibility: Ensure the library supports your preferred framework, whether it’s React, Vue, Svelte, or plain HTML.

Unlock the Full Potential of UI Libraries

Using a free UI library is just the beginning. To truly excel, you need to integrate these tools into a workflow that prioritizes user experience, research, and business strategy. If you want to learn how to build great, usable products with these libraries, consider enrolling in my course. Hundreds of students have already upskilled, built portfolios, and gained real-world experience.

Ready to take your design skills to the next level. Come learn end-to-end product (UX/UI) design in our course and community!

Figma's New, Old AI Feature

Figma's new AI isn't exactly what you might think. Figma recently released (or re-released) their AI feature, calling it "First Draft." You click on the AI icon, and suddenly a design takes shape in front of your very eyes. For most people, it feels like magic. However, Figma's AI isn't creating something from nothing.

The first time they released it, it was pulled for copying other designs. Shortly after launching, Figma stated:

"In limited beta, we learned that an issue with the feature's underlying design system resulted in mocks that resembled existing apps. We have temporarily rolled back Make Designs while we fix the issue."

Figma claims that this re-release has gone through extensive analysis, iteration, and testing. I can confirm that Figma's First Draft feature can produce some pretty impressive-looking designs, but you might be surprised to find out how it really works.

Exploring the First Draft Options

If you click on First Draft and select "Basic Site," you'll see four main options for generating designs:

1. A basic mobile app
2. A basic mobile app wireframe
3. A basic desktop site
4. A basic site wireframe for desktop

Let's test this out using "Basic Site." After clicking that option, you can enter a prompt or choose an existing one. I told it to create a financial dashboard in light design with the color purple.

It generated this pretty quickly, and the level of detail is impressive. Compared to many other UI screen generation tools I’ve tried, this one feels a lot cleaner and closer to what a professional designer might produce.

The Secret Behind the Magic

As hinted at in the press release, there’s something underpinning all of this and it's hiding in plain sight. If we go back to First Draft and click on "Basic Site," you'll see the option to "Pick a library to get started. Every First Draft is grounded in a library, the options shown are just the beginning, with more coming soon."

So, where is this library? When you generate a design using any of the First Draft features, check the Assets panel. You'll see "Simple Design System" with 372 components. Clicking into it reveals all the components used to assemble the design. You can drag any of these components into your canvas and explore further.

For example, if you drag in a card component, the properties panel shows it belongs to the Simple Design System.

The Simple Design System is available and accessible for free in the Figma community.

So, on a foundational level, the tool pulls from an underlying design system and assembles designs from a library of components.

Digging Deeper into The System

Opening the design system in Figma, you can see basic atomic elements like typography scales, color scales, icon sets, and various component sets such as buttons and cards. Each component comes with elaborate descriptions explaining how they are put together and used.

Here, we can see all the basic atomic elements like typography scales, color scales, guides, icon sets, and various component sets such as buttons and cards.

If we click into the component sets, we find elaborate descriptions about these components, how they're put together, and how they should be used. For example, the cards have a fixed width of 440 in the component set but are auto-layout when placed in designs.

Not only is this really cool to see what's happening under the hood, but it's also a great learning tool to dig into, understand the foundation of these design systems, and even help you to create your own.

Customizing and Expanding

However, how far can this really take you? What happens when you need something custom or have a unique or complex problem to solve? Figma suggests that eventually, users will be able to use their organization’s unique design systems, component assets, and patterns to generate UIs tailored to their brand.

I noticed in the Assets panel, you can click on "Add More Libraries," see your existing libraries, and even search for something like the Material 3 Design Kit to add to your libraries. This flexibility shows promise for future customization.

Testing Another Design Prompt

I tested another design prompt for a video app for Marvel movies. This involved generating original images. Figma uses Amazon's Titan diffusion model, similar to tools like MidJourney. The convenience of having this capability inside Figma is undeniable. Moreover, it handles auto layout perfectly, creating nested and componentized designs seamlessly.

One of my favorite features is the ability to generate tables. For example, I asked it to create a CRM table.

It generated a table with filled columns and rows. If I need to add more content, I simply select the column, drag the handlebar down, and it automatically repeats the content and components.

Additionally, for all you designers who never name their layers (I'm looking at me) Figma's rename layers feature automatically does this for us in real time.

Limitations and Workarounds

While Figma can produce a decent single screen, what about the other crucial screens in the flow?

After trying multiple prompts to generate more that one screen, it failed on all accounts. This to me is one of the biggest limitation and drawbacks right now - it's inability to generate full flows or add additional screens.

Even attempting to generate another screen with a matching style and similar elements resulted in inconsistencies. The only way to create another matching screen would be to start with a new prompt and then adjust styles manually which I found full of quirks and time time-consuming.

This make the results overall feel extremely limited for professional designers and even for those looking for more comprehensive generation there are other tools like Uizard that do a much better job of generating entire contextual flows far better than this.

Despite these blockers, Figma’s AI offers the ability to prototype and connect multiple screens quickly. Selecting screens and using the “Make Prototype” feature creates connections and interactions between screens and elements and interprets my intent fairly well.

The Reality of Figma’s AI

Figma has been transparent that its libraries generate designs based on common patterns. As a result, the tool may struggle with original, custom, or complex designs. Without a solid understanding of design systems, patterns, and core visual principles, users are left with only half the picture.

Raising the Bar for Designers

Tools like Figma’s First Draft make design more accessible, but also lack a lot of the abilities that professional designs rely on day to day. At the same time, they also raise the bar for designers to have a deeper skill set because coming up with a simple design pattern and a good-looking UI screen isn't enough. The magic of design lies in understanding user flows, interactions, and aligning choices with business outcomes.

This is why I emphasize learning user research, UI design, business strategy, and product strategy in my course. Designing great products isn’t just about assembling UI components—it’s about crafting experiences that achieve goals.

Conclusion

While AI features like Figma’s First Draft may seem like sorcery, they are really just a carefully orchestrated assembly of pre-existing components. The “why” behind the design is up to you.

But the biggest problem I noticed here is...Superman. That's DC, not Marvel. Tsk, tsk, Figma.

If you’re ready to dive deeper into design systems and hone your skills, consider enrolling in our beloved product design course.