Figma Color Manager

A plugin to sync the colors from the codebase and the design files, the easy way!In Figma, colors are handled as styles and there is no way to ensure these variable are consistent between the code and the design files.Figma Color Manager solves this by acting as an interface between your Figma styles and your codebase.You'll always have the same colors with the same name, on both sides. Recommended WorkflowUse a single CSS file that holds the colors, it'll be easier to update it regularlyWhenever changes are made in figma, export your colors and copy them in your code.Use the import feature if your colors come from your codebaseIf your color styles have a description, store your colors as JSON or JS and build it using json-to-css-variablesIf you don't care about color descriptions, you can just export to CSSOther usagesAs a developer, you started a project using HTML and CSS and now want to design it in Figma. You can copy your colors CSS variables and import them in your new Figma project.As a designer, you delivering a design to development. You can export the colors, and give it to them. It'll ensure they use the right colors and they'll have the same names, avoiding confusion.You want to use only colors from another Figma project. Using it as a library would overload your components and text styles. Just export the colors and import them in your other project.Next FeaturesSCSS support for import and exportFigma colors can have spaces in them, in the code they can't. For now we camelCase it in JS/JSON and kebab-case it for CSS. I plan on making this configurable.About MeI am Tom Quinonero, a developer that always works close to the design team. I bring back together coders and UI teams by making tools and process that improve collaboration. If you need my help on a project, send me an email!