Tailwind Figma – Figma UI kit built for integration with Tailwind CSS | Product Hunt



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 Tailwind Figma comes into play.

The solution

Tailwind Figma 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 tailwind-figma.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 Tailwind Figma 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 lay out 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://tailwind-figma.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.


– Szőgyényi Zoltán

Discussion
|
Link



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 Tailwind Figma comes into play.

The solution

Tailwind Figma 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 tailwind-figma.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 Tailwind Figma 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 lay out 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://tailwind-figma.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.


– Szőgyényi Zoltán

Discussion
|
Link

Leave a Comment

Your email address will not be published. Required fields are marked *