As a web designer, you know firsthand how much time and effort it takes to create a world-class website.
From planning the layout to designing each individual component, the process can be both tedious and time-consuming.
It's even worse when you just KNOW you shouldn't be spending all this time creating a testimonial section from scratch.
Either you've made it before, or you've seen it somewhere else.
It'd be so much easier if you could just press copy + paste on an existing layout and spend the rest of your time adding your own creative flair.
Thankfully, there are a number of Figma UI kits available that can help drastically speed up your workflow.
Whether you're looking for pre-made components (like an icon list) or entire page templates, Figma UI kits can provide a major boost to your productivity.
But with so many UI kits available, it can be hard to know which ones are worth your time.
After all, you want to find that rock-solid resource that fits your style and you can use over and over again on every project.
That's why I've compiled a list of my top 5 Figma UI kits for web designers.
I've personally tested each one, and will be updating this post often.
I'm focusing on quality and not quantity.
So whether you're just getting started in web design or you've won an Awwward, you'll definitely find some of these resources helpful!
*Important Note: We've personally tested every product mentioned in this article. Some of the links below are affiliate links, are we may receive a small cut should you want to buy the product. There’s no extra cost for you - it’s just a little way you can help support us. You can read about our affiliate promise here.
1. Untitled UI
Untitled UI is one of my favorites on this list, and might be the most comprehensive UI kit for Figma available on the internet right now.
It has almost every component and section you can think of, including:
- 10,000+ components and variants
- 420+ page sections and examples layouts
- 500+ global styles
- 2000+ icons and logos
More importantly, I can't speak highly enough of the quality.
I don't want to know how long it took Jordan Hughes to put this kit together.
Every single component is thoughtfully put together, and there weren't any corners that were cut.
Each section of the UI kit also comes with helpful documentation to help you utilize best practices.
I've actually learned a lot about Figma and scalable UI design just by going through it all.
In terms of the design aesthetic, it's best suited for startups, SaaS, and tech companies.
It hits the sweet spot for being beautifully designed while being unopinionated enough that you can still create a completely custom look for your website.
Jordan shares different designs he's made with the UI kit on his Dribbble account.
I like this UI kit so much that I wrote a full review of Untitled UI here (there might also be a special discount in that review 👀).
If you think the UI kit might save you a couple of hours, it's definitely worth the upgrade to the Pro version.
2. Relume Library
The Relume Library Figma Kit is amazing for when you want to quickly put together page layouts.
It has hundreds of common section layouts that you can stack together like Lego.
You can mix and match different sections to create a completely unique layout for any web page.
They've also recently introduced "uncommon" section designs, which are meant to be more interactive and engaging (I love this).
It's a mid-fidelity UI kit, meaning it's completely unopinionated and can be transformed into any design style.
You use their base structure, and then add your typography, colors, images, and accents on top.
If you use Webflow, you can actually copy + paste each section you see in the UI kit straight into Webflow to speed up the development process.
This part does require a monthly subscription, but the Figma UI kit file is completely free!
I've been a fan of Rafal Tomal for a couple years now, and he's built a super clean starting point for all your websites called DesignKit.
It's essentially three resources packed into one: a wireframe kit, a web style guide, and a design starter template.
It's well-documented, and even the kit itself is laid out really nicely.
With the design system, you can set your brand assets, colors, logo, typography grid etc.
The wireframe kit is where you can pull sections from and start piecing your page together.
It's low/mid-fidelity UI kit, so it takes care of the component structure while you apply your styling.
DesignKit is available for $99 as a one-time payment.
This is a slightly different entry on this list.
Rather than being one large UI kit, Flowbase has a number of different UI kits available based on what you're looking for.
Honestly, the designs are amazing and have been a huge inspiration to us here at NewPulse Labs.
Flowbase has full site templates that provide a ready-to-go design for all your core pages (homepage, about, services, contact, pricing etc).
They also have individual components if you're not looking for full site designs.
This can be particularly handy if you already have an existing website and just want to add new elements.
Ex: Let's say you want to add a beautiful mega menu to your navigation.
You can just use one of their mega menu components and plug it right in to your design.
Flowbase is also currently working on a wireframe kit called FlowUI - which should be available soon.
Much like Relume, Flowbase is even better if you use Webflow. You can copy any template or component and paste it directly into your Webflow site.
Even if you don't use Webflow, the design assets are still incredibly useful.
Flowbase's pricing varies. You can purchase templates for a set price, access certain components for free, or get access to all components with their monthly membership.
Figit is an expansive library of UI components.
It's unique in that you actually access the designs through a Figma plugin instead of downloading a UI kit or copy + pasting sections from a website library.
The plugin is broken down into two parts: Blueprints and UI kits.
Blueprints are your low/mid-fidelity sections that you can use for wireframing and building out your page structure.
UI Kits is where you can choose from a ton of pre-designed sections.
Some sections are more designed than others, but in general they follow a simple style that can easily be customized.
Where should I start?
If you have a minute, we would actually recommend checking out ALL of these UI kits first.
You might find that there's a style, structure, or particular library of components that suits you best.
In terms of general recommendations:
- Want the biggest library with ready-to-use designs? Untitled UI.
- Want to create page layouts insanely fast? Relume.
- Want a versatile starting point you can use to wireframe any project? DesignKit.
- Want to access a variety of designs from world-class designers? Flowbase.
- Use WordPress? Any of these work. You'll need to manually build your designs using your page builder or Gutenberg though.
- Use Webflow? Flowbase and Relume for one-click copy + paste.
Or use them all.
This is the beauty of having access to multiple great design assets.
You can pull what you need from one and pair it with another.
You might need to adjust some colors, typography, or grids, but it's still a lot easier than creating the section from scratch.
Hopefully you found this article on the top Figma UI kits for web designers useful!
They're a serious game-changer that not only help you be more productive but can help take your design skills to the next level.
Better design = higher rates = better clients = a more enjoyable and profitable web design career.
Feel free to leave a comment below if you found one of these particularly useful, or if you think there's a UI kit I should add to the list.
Thanks for reading!