Sarah Stroschein

Palette Importer

Role
Product Design / UX Design / UI Design / Visual Identity Design / Naming
Partner
Fusepilot
Year
2022

Palette Importer is the first and only Figma plugin that creates Figma Color Styles from .ase, .sketchpalette, .css, and .json files. The ux and ui were designed to align with what Figma users expect from its interactions and design system.

Palette Importer

View and install the Palette Importer plugin on Figma Community

Figma Community

The idea for Palette Importer came about after discovering that there wasn’t a way to load an .ase—or Adobe Swatch Exchange file—into Figma. Instead, Color Styles needed to be created manually. In researching time-saving solutions, I noticed this was a shared frustration among Figma users. Further research revealed that they were looking for ways to import additional color file formats, including .sketchpalette, .css, and .json files.

Plugin Step 1

After a compatible color file is loaded into the plugin, a preview is shown in order to visualize the colors and groups contained in the file. Individual colors and/or color groups can be toggled on or off to give control over which are included in the import.

Plugin Step 2

The ‘Paste Swatches’ feature provides the option to paste color swatch shapes to the Figma page. Each shape appears in the layers panel on the left-hand side; any existing color names and groups contained in the source file are retained.

Plugin Step 3

The ‘Create Color Styles’ feature imports the colors into the Color Styles panel on the right-hand side. Any existing color names and groups contained in the source file are retained.

Plugin Step 4
UI Designers
Sarah Stroschein / Michael Delaney
Developer
Michael Delaney
© 2024 Sarah Stroschein