Creating new typography styles

Instructions

Styles in Figma represent Typography and Effect classes from Tailwind CSS. These Figma styles utilize variables from our Theme collection, mirroring how Tailwind CSS classes reference variables from the theme configuration file.

You can easily create new Typography or Effect styles using either variables or custom values. The example demonstrates how to create a new typography style and how developers can translate it to code.

1. Select the Text tool and create a text element with your desired properties
2. Apply the appropriate variables from the Theme collection:
   • Font: ⁠font-sans
   • Size: ⁠text/4xl
   • Weight: ⁠font-weight/extrabold
   • Line height: ⁠line-height/text/4xl
3. Open the Styles panel and click the "+" button in the Text styles section
4. Name your style "heading" and organize it in the appropriate folder
5. Click "Create style"

Developers can then implement this style in code using Tailwind CSS classes:

<h1 class= "font-sans text-4xl font-extrabold line-height-text-4xl">Heading Example</h1>