tokens-bruecke / figma-plugin

TokensBrücke is a Figma plugin that converts Figma variables into design-tokens JSON.
MIT License
49 stars 9 forks source link

Support new Figma typography variables in styles #24

Open pws-pm opened 6 months ago

pws-pm commented 6 months ago

Screenshot 2024-04-18 at 11 00 38

Figma recently introduced typography variables during their framework event. These variables are exported accurately in the JSON, which is great. However, it's still necessary to use styles as they support additional type settings such as textCase and textDecoration, and act as a helpful container for multiple variables associated with a particular text style.

It's important to use the new typography variables in styles without resolving the aliases, so that variable modes can have an impact on styles. For instance, if font size variables are created with Desktop and Mobile modes, styles should reference those variables. This way, if a specific mode is selected, the style will adjust accordingly.

Current available typography variables are: Font family Font weight and style Font size Line height Letter spacing Paragraph spacing Paragraph Indent

Styles tokens should then be expanded to support paragraphSpacing and paragraphIndent as part of this enhancement. Something to note: It appears to me that fontWeight parameter in the typography styles tokens is always a number, figma however supports both string or number variables, and I guess that string variables are needed to apply "Italic" style (pls correct me if I am wrong). Therefore I believe that our typography style "fontWeight" should correctly support alias variables both as numbers or strings.

EDITED: added Paragraph Indent and Font Style after checking the proper Figma release notes

PavelLaptev commented 6 months ago

@pws-pm thanks, I'll check it out next week 🙂

PavelLaptev commented 2 months ago

@pws-pm just published a new release. Added alias support for typography and effects