I’m working with a Flowbite React project and our designer made some custom components in Figma. I need to figure out how to get those design changes into my React app.
From what I understand, I need to create a theme config object that looks something like this:
I tried using some Figma plugins but they don’t seem to export the right format for Flowbite themes. Has anyone found a good workflow for this? Do I need to manually copy the styles from Figma or is there a better way to sync the designs with my Flowbite React components?
I’ve found that using Figma’s Dev Mode alongside the Token Studio plugin gives decent results for extracting design tokens, though you’ll still need to do some conversion work. The approach I take is generating a design token JSON from Figma first, then writing a simple script that transforms those tokens into Flowbite’s theme format. Most of the spacing, colors, and typography can be automated this way. The tricky part is handling component-specific overrides since Figma doesn’t always map cleanly to Flowbite’s component structure. I keep a reference document that shows which Figma layer properties correspond to which Flowbite theme keys - saves a lot of trial and error when you’re deep in the theme customization. The manual work is mainly around layout properties and component states that don’t translate directly.
Unfortunately there isn’t a magic solution for this yet. I’ve been dealing with the same issue for months now and ended up building a semi-manual workflow that works pretty well. What I do is extract the CSS values from Figma using the inspect panel, then manually map them to the Flowbite theme structure. It’s tedious but gives you full control over the output. I created a small utility function that helps convert standard CSS properties to Tailwind classes since Flowbite themes expect Tailwind syntax. The key is understanding how Flowbite’s theme system works - each component has specific override points and you need to target the right nested properties. I usually start by console logging the default theme object to see the structure, then gradually override sections. Takes some time upfront but once you have the mapping down it becomes routine.