Oombla DocsMenuoombla.com

Typography

Typography design tokens

The typography tokens are extracted from Figma’s Text styles. The following tokens are extracted for each text style:

font family
font size
font style
font weight
line height
letter spacing
text transform
text decoration

The names for the tokens are converted for each platform directly from the text style name and hierarchy is always preserved relevant to the platform structure.

Example

The text style shown in the screenshot below:

Plugin screenshot showing details of a Figma text style

When exported for the CSS platform would have the following values:

:root {
  --font-family-header-1: "SplineSans-Web";
  --font-size-header-1: 2.5rem;
  --font-style-header-1: normal;
  --font-weight-header-1: 500;
  --letter-spacing-header-1: 0;
  --line-height-header-1: 3rem;
  --text-decoration-header-1: none;
  --text-transform-header-1: none;
}

And since it’s the CSS platform a typography-styles.css file would also be exported with this classname and styles:

.header-1 {
  font-family: var(--font-family-header-1);
  font-size: var(--font-size-header-1);
  font-style: var(--font-style-header-1);
  font-weight: var(--font-weight-header-1);
  line-height: var(--line-height-header-1);
  letter-spacing: var(--letter-spacing-header-1);
  text-transform: var(--text-transform-header-1);
  text-decoration: var(--text-decoration-header-1);
}

‼ Webfont font-family names

The font family token values are obtained from the Figma text style’s font family name. This will usually provide a font family name that is better suited for a local machine reference rather than a web-friendly font-family reference. For that reason, and as a way to provide an explicity webfont family name reference, the plugin has an optional setting to use the text style’s description field as the source for the font-family name.

This setting is off by default, but when enabled the plugin will check the text style’s description field first and if a value is present it will use that string for the style’s font-family reference. If no value is there, it will fallback to the standard construction for font-family name.

/* Text style description for webfont font-family reference DISABLED */
font-family: "Spline Sans";

/* Text style description for webfont font-family reference ENABLED */
font-family: "SplineSans-Web";