Skip to content

UI Color Palette is a Figma and FigJam plugin that creates, manages, deploys, and publishes consistent and accessible color palettes.

License

Notifications You must be signed in to change notification settings

a-ng-d/figma-ui-color-palette

Repository files navigation

GitHub package.json version GitHub last commit GitHub

UI Color Palette

UI Color Palette is a Figma and FigJam plugin that creates consistent and accessible color palettes specifically for UI. The plugin uses alternative color spaces, like LCH, OKLCH, CIELAB, OKLAB, and HSLuv, to create color shades based on the configured lightness scale. These spaces ensure WCAG standards compliance and sufficient contrast between information and background color.

The idea to make this Figma plugin comes from the article: Accessible Palette: stop using HSL for color systems.

This plugin will allow you to:

  • Create a complete palette from any existing color to help you build a color system.
  • Adjust the color palette in real-time to control the contrast.
  • Deploy the color palette by publishing it as local styles and variables or exporting it as code for several platforms.

Documentation

The full documentation can be consulted on docs.ui-color-palette.com.

Contribution

Community

Ask questions, submit your ideas or requests, discuss your usage, debate the evolution, etc. Submit your ideas on Canny.

Issues

Have you encountered a bug? Could a feature be improved? Go to the Issues section and browse the existing tickets or create a new one.

Development

  • Clone this repository (or fork it).
  • Install dependencies with npm install.
  • Run npm run start to watch in development mode.
  • Go to Figma, then Plugins > Development > Import plugin from manifest… and choose manifest.json in the repository.
  • Create a Branch and open a Pull Request.
  • Let's do this.

Beta test

  • Go to the Actions sections and access the Build and Download UI Color Palette tab.
  • Click Run workflow, then select a branch and confirm.
  • Wait a minute, and once finished, download the artifact (which is a ZIP file containing the plugin).
  • Go to Figma, then Plugins > Development > Import plugin from manifest… and choose manifest.json in the unzipped folder.
  • Enjoy!

Attribution

Support

About

UI Color Palette is a Figma and FigJam plugin that creates, manages, deploys, and publishes consistent and accessible color palettes.

Topics

Resources

License

Stars

Watchers

Forks

Languages