Back to Plugins
Text Styles to Variables

Text Styles to Variables

By Fede Luna

Plugin Preview

Text Styles to Variables preview

About this plugin

PLUGIN CRAFTED FOR REFOKUSPlugin DocumentationThis 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 familyAdditionally, the plugin documents—but does not apply—the following properties:•Line height•Letter spacingThis 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 paragraphsYou can also use suffixes to describe combo classes. For instance:•text-2-buttonLabelThis will still be recognized as a text-2 style with additional contextual information.

Plugin Details

Version2
CreatedApril 7, 2025
Last UpdatedApril 8, 2025
CategoryFile organization plugins
CreatorFederico Luna
Stats0 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • none