DEV Community

Cover image for Beautiful UIs with Figma and Tailwind
Johannes Hötter for Kern AI

Posted on

Beautiful UIs with Figma and Tailwind

In this post, we’re going to share how we used Figma and Tailwind to redesign our open-source tool refinery. The article will entirely focus on how to build beautiful UIs quickly. You don’t need any prior knowledge to understand this post.

After this post, you’ll know:

  • Why Figma and Tailwind are such a great combination to build a beautiful UI
  • How you can quickly build a consistent design
  • Those mockups are worth the time! :-)

Our change in UI

To jump into this article, we first want to show you what our manual labeling screen used to look like. The sidebar was too dominant because the color coding and the label colors were a bit gloomy. We knew our UI needed some improvements.

Old UI

Because of that, we built up some mockups using Figma and Tailwind, arguably one of the best design toolkit combinations. Figma is excellent for building high-quality mockups fast and collaboratively. In contrast, Tailwind offers a great set of predefined classes and components for your web app - and it comes with an amazingly well-designed Figma template kit. Within hours, we set up the following mockup:

Mockup UI

Showing this page to users, we saw that it not only offered a better-looking design but also provided a better workflow. From here, we decided to implement the mockup in Tailwind. The result is almost looking the same as the mockup, as you can see here:

New UI

So with that in mind, we want to show you how we did that.


Don’t start from scratch!

First, it is relevant to know that there are template kits available in Figma. You can browse them in their library or at third-party libraries. So you don’t need to rebuild everything on your own!

Our tip is that you should use templates of which you have the HTML codes, too. This enabled us to easily switch between Figma mockups and implemented UI elements without losing the design. But you can still also build the HTML files from scratch.

In our case, we imported the Tailwind template into Figma and had access to the mockup elements: 

Tailwind Template

Those same elements are available in the Tailwind UI components library: 

Tailwind UI

And this is not only true for high-level elements like the layout of your screen but also for detailed elements like badges:

Tailwind Badges

Implement your screens in Figma first

From here, it becomes easy to drag and drop your elements into the respective layout you want. After 15 minutes of playing around with it, you should already feel comfortable building custom mockups in Tailwind, and it should take you little effort to turn these mockups into UI shells.

Figma editing

We developed this not only for one but for multiple screens; roughly 95% of the things you can see in our application have been first designed via mockups.

Figma screens

The reason we did so was that it helped us to ensure consistency throughout the entire application. It made it easier for our team members to gain early feedback on the whole workflow of the application and how the UI would differ from our previous version. Ultimately, it also allowed us to implement the UI much faster. As soon as the mockup was finished (for that version, of course, we’re already improving on that with our following upcoming versions), we “just” had to implement the shell.‍

We believe that Figma and Tailwind are the best combinations to build beautiful UIs, but there are many great alternatives. Most important is that this approach helps you build what’s been discussed and agreed upon in a short time. We’ll continue building our application based on mockups, and we’ll discuss them with our community :)‍

If you’re interested in seeing an application built this same way, check out our open-source tool refinery. Also, feel free to join our community on Discord if you have any questions.

Top comments (5)

Collapse
 
jonathimer profile image
Jonathan Reimer

Really cool insights. Thanks for sharing!

Collapse
 
jhoetter profile image
Johannes Hötter

Thanks Jonathan! :)

Collapse
 
lubangi profile image
Lionnel Lubangi Mohamed

Did you use the Free tailwind Ui Kit for figma or you bought the tailwind Ui from tailwindui.com that gave you the figma file?

Collapse
 
jhoetter profile image
Johannes Hötter

I bought the Tailwind UI kit (not associated with the company in any way), and I think it's definitely worth the investment. Together with the Kit, I received a Figma file containing the designs.
Tbh, nowadays I'm so familiar with the Tailwind system that I don't even need to use Figma anymore, and can directly mock apps in a little React app with Tailwind, so I think that using Figma + Tailwind is especially helpful to get started :)

Collapse
 
rafa_albaladejo profile image
Rafa Albaladejo Casal

Hi there Johannes, thanks for sharing your experience. We are doing pretting much the same, but we have found some issues from Figma's side in order to share Tailwind classes to the Front End team. For example with buttons, as Tailwind doesn't give a name in Tailwind UI to this elements and Front End is not able to know from Figma which button size it's been used in the design. Any thoughts on how did you manage this issue? Is there any procedure in Figma to easily notify to Front End devs the Tailwind CSS classes?