What’s the best way to turn a Figma design into HTML and CSS?

I've used Shadcn in conjunction with Figma for a smoother workflow. You build your design mocks with Shadcn components, and then style them in your code accordingly. If you're working with custom designs, though, expect quite a bit of manual adjustment.

I find that Figma's developer mode can help a bit for translating designs, but ultimately, it's not meant to generate perfect HTML and CSS. You usually end up writing a lot of code manually. It's a bit of a grind: look at the design, write some code, check it, and repeat the process.

There are some automated tools out there that can help with Figma to code conversion, but don't expect perfection. I used Lovable a few months back, which had a feature for this, but the results weren't always great. It's still mostly manual work, especially if your design is unique.

You could try using AI tools that can take Figma screens and generate some markup from them. I haven't done this myself yet, but I've heard it's a decent way to kickstart your coding process. Just know that the output will likely need some tweaking.

Honestly, I prefer doing it manually because that gives me full control over the output. Once you get the hang of it, it becomes pretty enjoyable. Just keep practicing, and you'll speed up over time.