Palette Importer

About this plugin

Palette Importer creates Figma Color Styles from various color file formats.Compatible with .ase, .sketchpalette, .css, and .json filesFigma Color Styles are automatically created from files loaded into Palette ImporterAn additional ‘Paste Swatches’ feature pastes color swatch shapes onto the Figma pageAny existing color names and groups contained in the file are retainedIndividual colors and/or color groups can be toggled on or off to give control over which are included in the importInstructionsLoad a compatible color file formatPreview the colors and groupsClick ‘Paste Swatches’ to paste color swatch shapes to the Figma pageClick ‘Create Color Styles’ to import the colors into the Color Styles panelNon-Standard Format InstructionsJSONJSON files can follow the non-standard schema that is commonly used by CSS frameworks like Tailwind and Material Design.For example:{ "red": { "50": "#ffebee", "100": "#ffcdd2", "200": "#ef9a9a", }, "indigo": { "50": "#e8eaf6", "100": "#c5cae9", "200": "#9fa8da" } } This will create red and indigo groups with their own 50, 100, and 200 swatches.CSSPalette Importer uses a custom CSS parser that only looks for color values in variables to keep things fast and simple.For example::root { --primary: #ff0000; --warning: rgb(255,200,0); --info: rgb(0,0,255); } When imported this will create a group called :root with primary, warning, and info colors.More at fusepilot.com