Back to Plugins
Tokenify -  Replace Colors with Tokens

Tokenify - Replace Colors with Tokens

Replace color styles, tokens and any color values for fill(s) and border(s) with tokens

hextokenscollectionfilltokens studiodesign systemcolorborderreplacecolor stylesfind

Plugin Preview

Tokenify -  Replace Colors with Tokens preview

About this plugin

It automates the process of replacing colors in your designs with pre-defined color tokens. Whether you're working with frames, shapes, or text, this plugin ensures consistency across your design by utilizing color tokens from your selected collections.How It WorksFetch Token Collections - The plugin fetches all local variable collections (tokens) available in the Figma file and presents them in a dropdown for selectionRecursive Token Resolution - The plugin resolves token values recursively, ensuring that even nested or aliased tokens are accurately identified and utilized.Scoping and Application - Tokens can be scoped to specific properties such as FRAME_FILL, SHAPE_FILL, TEXT_FILL, STROKE_COLOR. The plugin respects these scopes, applying tokens only to appropriate elements. Users can specify which properties (fills, strokes) should be considered for replacement via checkboxes.Replacement with Tokens - If a match is found, the corresponding color in the node is replaced with the token, ensuring that the design stays consistent with the defined color system.How to use:Load the plugin into Figma by following the standard plugin installation steps.Simplify your color management process and maintain design consistency with ease!

Plugin Details

Version12
CreatedJuly 21, 2024
Last UpdatedJuly 24, 2024
CategoryFile organization plugins
CreatorKrystian Blaszczyk
Stats175 installs, 20 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • none