Getting Flowbite React styling configuration from Figma designs

Other Questions Figma
1

I’m working on a Flowbite React project and our designer made some custom components in Figma. The components are based on the standard Flowbite library but with our own styling tweaks.

I know that Flowbite React uses theme objects to customize component styles. These theme configs look something like this:

const customTheme: ThemeConfig = {
  navbar: {
    container: {
      base: "bg-white px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600",
    }
  }
};

The problem is I can’t figure out how to extract the styling information from our Figma designs and convert it into the JSON theme format that Flowbite React expects.

I tried using some Figma plugins but they don’t seem to generate the right kind of output. Has anyone found a good workflow for this? Maybe there’s a specific plugin or manual process that works well for getting Figma styles into Flowbite theme configs?

2

I’ve been fighting this same issue for months. Here’s what actually works - a hybrid approach that beats doing everything manually. I use Figma Dev Mode to grab the exact CSS properties for each component (spacing, colors, typography). Then I manually map those to Tailwind classes since Flowbite runs on Tailwind anyway. For colors, I pull the hex values from Figma and either use them straight up or find the closest Tailwind match. Don’t try converting everything at once - that’s a nightmare. Start with the obvious stuff like buttons and nav, then chip away at the rest. I keep a spreadsheet that maps our Figma color tokens to Tailwind classes. Takes forever to set up but speeds things up massively once you’ve got it going. Yeah, it’s tedious at first, but you’ll get into a rhythm after a few components.