Palette Importer

<p>Palette Importer creates Figma Color Styles from various color file formats.</p><p><br></p><ul><li>Compatible with .ase, .sketchpalette, .css, and .json files</li><li>Figma Color Styles are automatically created from files loaded into Palette Importer</li><li>An additional ‘Paste Swatches’ feature pastes color swatch shapes onto the Figma page</li><li>Any existing color names and groups contained in the file are retained</li><li>Individual colors and/or color groups can be toggled on or off to give control over which are included in the import</li></ul><p><br></p><h2>Instructions</h2><ol><li>Load a compatible color file format</li><li>Preview the colors and groups</li><li>Click ‘Paste Swatches’ to paste color swatch shapes to the Figma page</li><li>Click ‘Create Color Styles’ to import the colors into the Color Styles panel</li></ol><p><br></p><h2><strong>Non-Standard Format Instructions</strong></h2><p><br></p><p><strong>JSON</strong></p><p>JSON files can follow the non-standard schema that is commonly used by CSS frameworks like Tailwind and Material Design.</p><p><br></p><p>For example:</p><pre class="ql-syntax" spellcheck="false">{ "red": { "50": "#ffebee", "100": "#ffcdd2", "200": "#ef9a9a", }, "indigo": { "50": "#e8eaf6", "100": "#c5cae9", "200": "#9fa8da" } } </pre><p><br></p><p>This will create <em>red</em> and <em>indigo</em> groups with their own <em>50</em>, <em>100</em>, and <em>200</em> swatches.</p><p><br></p><p><strong>CSS</strong></p><p>Palette Importer uses a custom CSS parser that only looks for color values in variables to keep things fast and simple.</p><p><br></p><p>For example:</p><pre class="ql-syntax" spellcheck="false">:root { --primary: #ff0000; --warning: rgb(255,200,0); --info: rgb(0,0,255); } </pre><p><br></p><p>When imported this will create a group called <em>:root</em> with <em>primary, warning, </em>and<em> info </em>colors<em>.</em></p><p><br></p><p>More at <a href="https://fusepilot.com/products/palette-importer?utm_source=figma&amp;utm_medium=figma-plugin-description&amp;utm_campaign=palette-importer" rel="noreferrer noopener nofollow ugc" target="_blank">fusepilot.com</a></p>