CODEWITHSUNDEEP
reactjsthemestailwind-cssfigmaflowbite
aPajo
aPajo

Reputation: 56

How to export Flowbite React theme (JSON) from Figma

I've put up a Flowbite React application (Flowbite a set of components styled with TailwindCSS classes). Our UI/UX designer has created some examples/libraries in the Figma design system (based on the Flowbite components).

Flowbite's Docs say that it is easely customizable/designable in Figma etc. But I haven't found anything sepcific saying anything about Flowbite React's integration with the Figma system.

AFAIK I need a component theme configuration (in JSON format) to apply our customizations made in Figma. Something like this:


const flowbiteTheme: ThemeInterface = {
  sidebar: {
    root: {
      base: "flex fixed top-0 left-0 z-20 flex-col flex-shrink-0 pt-16 h-full duration-75 border-gray-200 lg:flex transition-width dark:border-gray-700 w-64 dark",
    }
  }
};

What is good way way to get the style customizations from Figma into Flowbite React.

I've tryed Figma's Clapy plugin, but it's export doesn't even have any files about Tailwind or Flowbite (although the components do look like they have Flowbite style's on them).

Am I missing something from the process or just using a wrong plugin in Figma or what?

Upvotes: 1

Views: 354

Answers (1)

AndriiD
AndriiD

Reputation: 161

try to use Figma Dev mode. Here is the doc - https://www.figma.com/dev-mode/

Upvotes: 1

Related Questions