token2variablizer in Chrome with OffiDocs

DESCRIPTION

Convert design tokens into CSS variables and copy them to your clipboard.

In some use cases, nomenclature from a singular design token linked to a CSS variable can vary slightly. In this specific one, design tokens formatted as "i.am.a.token" are associated with CSS variables formatted as "--I-AM-A-TOKEN".

This discrepancy can slow down the workflow during the handoff from the design team, which uses one format, to the development team, which uses another. Whether there is one design token to translate or twenty, developers must manually change the format of each design token to locate it in the code.

This extension streamlines the process. Developers can paste the design token into the extension and click the "COPY-VARIABLE" button. This action copies the correctly formatted CSS variable to their clipboard, significantly speeding up the workflow.

token2variablizer web extension integrated with the OffiDocs Chromium online