I developed

Tokenify

Figma plugin for tokens/variables

Client

Myself

Stack

JavaScript + HTML

Industries

Figma Tool

Date

2024

Challenge

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.


Goals

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.

Create a free website with Framer, the website builder loved by startups, designers and agencies.