Figma Color Manager

<p><strong>A plugin to sync the colors from the codebase and the design files, the easy way!</strong></p><p><br></p><p>In Figma, colors are handled as <em>styles </em>and there is no way to ensure these variable are consistent between the code and the design files.</p><p>Figma Color Manager solves this by <em>acting as an interface between your Figma styles and your codebase</em>.</p><p><strong>You'll always have the same colors with the same name, on both sides. </strong></p><p><br></p><h2>Recommended Workflow</h2><ul><li>Use a single CSS file that holds the colors, it'll be easier to update it regularly</li><li>Whenever changes are made in figma, <em>export </em>your colors and copy them in your code.</li><li>Use the<em> import feature</em> if your colors come from your codebase</li><li>If your color styles have a description, store your colors as JSON or JS and build it using <code><a href="https://www.npmjs.com/package/json-to-css-variables" rel="noreferrer noopener nofollow ugc" target="_blank">json-to-css-variables</a></code></li><li>If you don't care about color descriptions, you can just export to <code>CSS</code></li></ul><p><br></p><h2>Other usages</h2><ul><li>As 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.</li><li>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.</li><li>You want to use <em>only </em>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.</li></ul><h2>Next Features</h2><ul><li><code>SCSS</code> support for import and export</li><li>Figma colors can have spaces in them, in the code they can't. For now we <code>camelCase</code> it in <code>JS</code>/<code>JSON</code> and <code>kebab-case</code> it for <code>CSS</code>. I plan on making this configurable.</li></ul><h2>About Me</h2><p>I 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, <a href="mailto:[email protected]" rel="noreferrer noopener nofollow ugc" target="_blank">send me an email</a>!</p>