search

onyx-gen / onyx

A Figma plugin that helps to transform Figma Design Systems to Vue components with UnoCSS utility classes.
MIT License
4 stars 0 forks source link

Implement custom variable name transformations via plugin UI #8

Closed MiguelFranken closed 7 months ago

MiguelFranken commented 7 months ago

Reproduce

We can use generation in Variables mode via the UI:

Image

We use the applied design tokens from (Tokens Studio for Figma) when the generation mode is set to Variables. We may generate a utility class like font-$Interactive.CTA. The identifier Interactive.CTA is the exact typography composite token applied to the selected Figma layer for which we want to generate a utility class.

Problem

We not always want to use the exact raw variable/token name as provided by Tokens Studio. We may want to lowercase the token identifier name.

Solution

Let's come up with a simple solution to alter token names via configuration in the UI. TODO: Technical Concept