Figma Plugin Hub
Back to Plugins
Color Tokens

Color Tokens

Document all your color variables in one place, exactly how you want them

documentationcolor variablesdocumentationcolor tokenvariablescontrast checkerdocument

Plugin Preview

Color Tokens preview

About this plugin

Instructions:Copy the ColorToken componentApply your a color variable to the mainColor layerRun the plugin on a page with ColorToken instancesThe variable name, HEX, RGBA, and aliases will be automatically populate for all ColorToken variants on the page. Additionally, you can turn on the contrast variable and apply any color, rerun the plugin and it will populate the contrast-ratio rating.*Note: You can change component name but please do not rename layers.

Plugin Details

Version3
CreatedSeptember 12, 2023
Last UpdatedAugust 28, 2024
CategoryFile organization plugins
CreatorChandler Simon
Stats137 installs, 17 likes
PricingFree
Install Plugin

Technical Details

  • API:1.0.0
  • main:code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • none

More Like This

Discover other plugins in the File organization plugins category.

Table Creator

Table Creator

Easily create tables that can be edited, resized and maintained using your design system

Table Generator

Table Generator

Design System Organizer

Design System Organizer

Copy variables and styles between files, swap libraries for variables, styles & comps and more...

View All File organization plugins Plugins