web: Using Figma with existing Tailwind.js sites

When you have a site that you’ve been working on and want it to be nice looking, it’s sort of the last thing you have time for. So here are some tips. Figma is a great online design tool that lets you do full wireframes and handle multiple pages.

The good news is that if you have a site that you like, there’s a nice tool that lets you import the CSS and layout of an existing site so that you can refine it and push it back. If you are using Tailwind.js this is even easier, you can generate Tailwind CSS files out from Figma as well.

And of course, it is great that Figma is free if you have 3 or fewer files so perfect for small projects like this. html.to.design works well and they give you quite a few free loads where you download a browser extension. the process is pretty simple, you download the Chrome extension, then browse to the site that you like. Then hit the button and it writes a h2d file.

Then go to Figma and choose Resources > Plugins find the html.to.design one and then upload the file. And you have it all in Figma and then you can use another plugin called Anima to export the design with Tailwind.css updated