Subscribe
Sign in
FlowBite Figma — Figma UI kit built for integration with Tailwind CSS
Build UI interfaces and simplify the process of integrating into live websites with Tailwind CSS
17
Replies
@axelut thank you, Alex! We’ll make sure to make it even more awesome by following the roadmap.
Hello Product Hunt 😸
I am one of the makers of this product and I know there is a lot of text below, but please bear with me on this one.
The problem that we're trying to solve
A problem that I have encountered ever since I'm a web developer is how much time I've wasted when I had to integrate a style guide, UI components, and pages into a web project.
The spacing, the colors, the typography... it was always different from project to project and it felt like I was wasting a lot of time programming the same thing but in a different way. Endless CSS and classes.
So Robert (who is the designer) and I decided to take action and create something that works for us, not against us. This is where Flowbite comes into play.
The solution
Flowbite is basically a Figma design kit that mimics all of the utility classes from the Tailwind CSS framework. Basically, every bit of spacing, typography, shadow, anything you can imagine can be perfectly recreated using ONLY the default utility classes from Tailwind.
Do you want a real-life example of this? Check out flowbite.com. I know, it's the product page, but we used the Figma kit for the design and Tailwind to code it. I only had to write 3 extra classes apart from Tailwind. THREE! And that's for the YouTube video section.
So what really happens is that if you use this Figma kit and want to code it in Tailwind CSS, the bridge between these two worlds becomes much shorter and easier to pass. And you can really focus on the other parts of the coding, rather than having to set up the whole CSS structure.
Who is this for?
1. If you're a designer
As a designer who uses or wants to use Figma, you can use this kit for any number of your personal projects, apps, or for your clients. It is quite versatile.
Advantages:
- style guide for colors, typography, spacings, shadows, etc
- UI components and hundreds of variants of colors, actions, positionings (check the video for live examples)
- 27 hand-crafted application UI pages (marketing & e-commerce coming based on the roadmap)
- mobile & tablet version included for the components & pages
- Figma auto-layout feature
By the way, you don't have to use the Figma kit only to integrate with Tailwind. A developer should be able to code the whole thing with another framework as well, however, that would be a bit counterproductive.
Here's a preview on Figma so you can take a better look.
You can buy the Figma files for $129.
2. If you're a developer
What can I say? I myself coded the landing page for Flowbite and it is based on the Figma kit. I only had to open the CSS file three times. Development was SUPER fast, and I could concentrate on other things much better, such as the HTML markup, SEO, coding, optimization, etc.
The code version is coming on the 10th of August, 2021. Everything you see now in the Figma file will be available in Tailwind CSS code as well.
You can pre-order the code part for only $119 for a 20% price reduction.
If you're both a developer and designer or a company
We thought that there may be some of you who want both the design files and the code as well, so we decided to create an option where you can buy the whole thing for $189. Please bear in mind that the code will arrive on the 10th of August, 2021.
Roadmap
I didn't completely realize how awesome this thing is until I actually had to integrate the design into code. So just before launching the product, I wanted to think and layout a roadmap for future updates.
What you see now is only about 30% of the first phase of the product, and there are three total phases.
Please check the roadmap to learn more: https://flowbite.com/#roadmap
Conclusion & Credits
This product would not exist if the awesome Figma software and the amazing Tailwind CSS framework wouldn't be out there. Big thanks to the open-source community as well ❤️
PS: there's a free community edition that you can try out on Figma Community.
Looking great! 🥳 Just out of curiosity is there any reason why someone should go for FlowBite instead of https://tailwindui.com apart from the price difference? Thanks!
@huenatic thanks, Praveen! Obviously, Tailwind UI has the advantage of being the official product of the Tailwind CSS creators, on the other hand, FlowBite does come with a couple of extra elements and components and with a different style. For example, FlowBite includes charts, a kanban board, a calendar, whereas Tailwind UI doesn’t have this. I think it’s a bit like with cars: both BMW and Mercedes make great cars - it’s personal preference which you want to buy (and also based on your specific project needs. That being said, FlowBite is being actively developed and it will bring new features over time 😅
I first see this project on Dev blog after I use it and now I am addicted to it
Creative Tim