Tokenify - Replace Colors with Tokens

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 Works

Fetch Token Collections 📦:

The plugin fetches all local variable collections (tokens) available in the Figma file and presents them in a dropdown for selection.

Recursive 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.

Processing Nodes 🌐:

The plugin traverses all selected nodes, including those nested within frames and groups, ensuring comprehensive coverage.

For each node, it determines the type (frame, shape, text) and checks if the fill, stroke, or effect colors match any tokens in the selected collection.

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.

Features

Ease of Use 🛠️:

Simple UI to select token collections and specify scoping preferences.

Automatically fetches and displays all local variable collections in the Figma file.

Comprehensive Coverage 🖌️:

Supports fills, strokes, and effects.

Processes all nodes within selected frames and groups.

Precision 🎨:

Respects token scopes to apply them only to relevant properties.

Recursively resolves token values to ensure accuracy.

How to Use

Select Nodes:

Select the frames, shapes, or text nodes you want to update in your Figma file.

Run the Plugin:

Open the plugin from the Figma Plugins menu.

Select the desired token collection from the dropdown.

Set Preferences:

Choose which properties to update (fills, strokes) using the checkboxes.

Replace Colors:

Click the "Replace Colors" button. The plugin will traverse the selected nodes, resolve token values, and update the colors based on the selected preferences

Example Use Cases

Consistent Theming 🌈:

Ensure all elements in your design adhere to a consistent color theme by replacing arbitrary HEX values with predefined tokens.

Design System Integration 🖼️:

Seamlessly integrate your designs with a design system that uses tokens for color management.

Quick Updates ⚡:

Easily update the color scheme across multiple elements without manually changing each one.

Get Started

Install the Plugin:

Load the plugin into Figma by following the standard plugin installation steps.

Run and Enjoy:

Simplify your color management process and maintain design consistency with ease!

Happy designing! 🎨✨