How do I remove the blur effect from my CSS?
I removed but the blur is still there. Any ideas?
filter: blur(5px);
Does work for removing blur from modals?
backdrop-filter: none;
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Hey there 👋
So far, we've covered the fundamentals of design thinking and the key that improve your UI.
You've learned that you don't need to be Picasso to create decent interfaces, and you understand concepts like spacing, hierarchy, alignment, and consistency.
But let's be real — some of you might be thinking:
"This is great and all, but I just want to code. I don't want to become a designer, even a basic one."
And you know what? That's completely fine.
Your superpower is , and it makes sense to focus on what you do best.
Alex is a brilliant backend developer who's building a SaaS tool for podcast creators.
He understands the we've discussed but doesn't enjoy the design process.
He'd rather spend those hours optimizing his code or adding new features.
One day, while browsing product launch sites, Alex notices something interesting: many successful products have similar UI patterns.
The navigation layouts, card designs, and button styles follow familiar patterns.
This sparks an idea:
"What if I don't need to design from scratch? What if I can borrow what works?"
That's exactly what we're going to talk about today.
Now that you understand the basic , let's add another tool to your arsenal: .
This isn't about copy-pasting someone else's entire website.
It's about finding inspiration, identifying effective patterns, and adapting them to your needs.
It's like using open-source libraries in your code — you're building on the work of others to create something valuable.
Remember when we talked about users judging your app in milliseconds?
Here's the good news: users respond positively to familiar patterns.
When your UI follows conventions they've seen before, they already know how to use it.
Think about it: there's a reason why
These patterns work because they've been and by countless designers and developers.
Your goal isn't to reinvent the wheel — it's to assemble a vehicle that takes your users where they need to go, and .
You might be wondering:
"If I'm borrowing designs, do I still need to learn Figma?"
Absolutely, and here's why: even borrowed designs need .
Your brand, your content, and your specific features are .
You'll need to adapt any design you find to fit your particular needs.
The good news? You don't need advanced Figma skills for this approach.
You just need to know how to:
These are exactly the basics we covered in our previous lessons.
With just these skills, you can transform any template or community file into something that feels for your project.
Now for the fun part — where to find designs you can borrow from.
The web is full of incredible resources, many of them or very affordable.
The Figma Community is like a treasure trove of UI designs, and it's directly integrated with the tool you're already using.
You'll find everything from complete app templates to specific components like dashboards, settings pages, or authentication flows.
💡 Pro Tip:
Don't just search for general terms like "SaaS template."
Be specific about what you need:
While the Figma Community should be your first stop, here are other places to find inspiration and resources:
Dribbble: Great for visual inspiration
(though many designs prioritize aesthetics over usability)
UI8: Premium UI kits with highly polished designs (paid, but high quality)
Behance: A creative platform and online portfolio used by professionals, primarily in design, and illustration.
UIHUT: A mix of free and premium UI resources
Awwwards: Celebrates the best in web design—great for advanced, real-world inspiration.
(ideal for seeing how top designers/developers blend aesthetics with and )
Don't overlook the obvious — look at products similar to yours. See how real users interact with real products, not just concepts or mockups.
When browsing these sites, don't just look for complete designs.
Pay attention to specific elements you like:
Now, let's walk through the process of "stealing like an artist" to create your UI.
Before you start browsing designs, clearly define what pages or components you need:
For each page, list the and required.
This will help you search more effectively and evaluate whether a design meets your needs.
Create an inspiration board in Figma:
Create a new Figma file called " Inspiration"
For each page you need, create a sections to collect inspiration
Take screenshots of designs you like and paste them into the relevant frames
Add notes about what you like about each design
Don't limit yourself to complete pages.
If you see a you like in one design and a you like in another, save both.
Now that you know what you're looking for, search the Figma Community for files that match your inspiration:
Use specific search terms based on your needs
Look for files with good organization and clear component structure
Check that the file includes the specific elements you need
When you find a promising file, duplicate it to your drafts so you can explore it fully.
This is where the magic happens.
Instead of using a single template for your entire project, combine the best elements from different sources:
Important: When combining elements, pay attention to spacing, alignment, and proportions. Make sure everything works together harmoniously.
Now that you have a composite design, customize it to make it yours:
Remember the we discussed in the previous lesson.
Even when borrowing designs, consistency, hierarchy, alignment, and spacing still matter.
To make the most of this approach, keep these tips in mind:
Don't get distracted by colors and fonts initially.
Look for designs with strong structural elements:
You can always change the visual style later.
Trying to combine too many different designs can lead to an inconsistent result.
Start with 2-3 solid files and remix them, rather than pulling from dozens of sources.
Not all parts of your UI are equally important.
Focus your efforts on the :
These are the areas users interact with most and that drive .
As you collect and customize UI elements, save the ones you like in a personal component library.
Over time, you'll build a collection of components that work well together and reflect your style.
Before we wrap up, let's address an important question:
Is this approach ethical?
The short answer is , with some important caveats:
Using a layout or structure? That’s fine.
But directly copying custom illustrations, hand-drawn icons, branded animations, stylized artwork, or unique visual styles crosses the line.
These are someone else’s —respect it.
Most Figma Community files are free to duplicate, but some come with .
Check for any licensing info (commercial use, attribution, etc.) and play fair.
It takes 30 seconds and builds good karma.
The approach works best when you're borrowing rather than distinctive creative work.
Steal grids, layouts, button styles, modals, hero sections—these are standard across the web and meant to be .
It’s like reusing design .
What you’re doing is remixing common UI components, not copying art.
Always customize and adapt the designs to create something that serves your users.
Change the content, tweak the visuals, restructure components.
Use the original as a starting point, not a finished product.
Your job is to mold it to fit your users and your .
Remember, this approach is about standing on the shoulders of giants, not passing off others' work as your own creation.
This strategic borrowing approach doesn't replace the we've discussed in previous lessons—it builds on them.
Your knowledge of spacing, alignment, hierarchy, and consistency will help you:
Without these foundational principles, you might end up with a that feels disjointed and unprofessional.
Just like Dr. Frankenstein crafted a creature from different parts, designers sometimes merge elements from existing designs, intending to create an original masterpiece.
There’s one really important thing I want to highlight, especially for this use case.
It’s something called the Frankenstein Design Monster.
It's what happens when you take a bit of inspiration from this Dribbble post, a button style from that UI kit, a font from another website, and then you just… stitch it all together without a clear direction.
A UI that looks like five different people designed it. Nothing feels consistent.
The spacing, the fonts, the shadows, even the corner radiuses—they’re all slightly different.
And users can feel that.
It’s like wearing mismatched socks, sunglasses at night, and a suite in the gym.
This is super common when you're just starting out, and honestly—it’s tempting.
You want to use all the cool stuff you’ve found.
But here’s the fix:
Pick one style and stick to it.
Use one and build around it.
Or pick one UI kit and stay consistent with it throughout your design.
Don’t worry about being perfect or super creative right now.
Focus on and .
The more unified your design feels, the more professional it looks—even if it’s simple.
So as you start wireframing, keep this in mind.
Avoid stitching together random pieces.
Build something that feels clean, intentional, and easy to use.
Cool? Let’s go.
Now that you have this powerful approach in your toolkit, here's what to do next:
Create an inspiration board:
Start collecting screenshots of UIs you admire
Explore the Figma Community:
Spend 30 minutes browsing templates related to your project
Practice mixing and matching:
Try combining elements from different templates in a practice file
Apply to your project:
Use this approach to create one key screen for your application
Remember, the goal isn't to become a designer—it's to create that serve your users and showcase your development skills.
This approach lets you focus on what you do best while still delivering a .
Ready to start "stealing" like a pro?
The best designs in the world are waiting to inspire your next project.
