Text Styles to Variables

About this plugin

PLUGIN CRAFTED FOR REFOKUS

Plugin Documentation

This plugin extracts font-related properties from your local text styles and converts them into reusable variables. It automatically applies the following variables:

•Font size

•Font weight

•Font family

Additionally, the plugin documents—but does not apply—the following properties:

•Line height

•Letter spacing

This is due to a current Figma limitation: dynamic variables for these properties are not yet supported. As a workaround, these values are stored as string variables for documentation purposes only.

For example:

If the original line-height is 100%, the plugin will store it as a variable with:

variableName: 100%, variableValue: 1em (calculated as 100 ÷ 100 × 1em)

Naming Convention for text styles:

To ensure accurate detection and conversion, your text styles should follow this naming structure:

•Use the prefix title- followed by a number (e.g., title-1) for headings

•Use the prefix text- followed by a number (e.g., text-2) for paragraphs

You can also use suffixes to describe combo classes. For instance:

•text-2-buttonLabel

This will still be recognized as a text-2 style with additional contextual information.