Custom typography

You can generate, customize and apply custom text styles to format specification typography.

This feature is only available via the Pro subscription to the EightShapes Specs plugin.

Example using Salesforce Lightning's community file with custom typography and color.

How it works

To customize specification formats:


  1. Subscribe to the Pro version.

  2. In the Settings tab's Format section, select Typography.


When the plugin runs, it will generate relevant text styles and apply each to your specification output. You can then customize those styles to format current and future specifications.

The plugin looks for local text styles in the file that begin with EightShapes Spec. If a text style does not exist, the plugin adds the text style to the local file. As specifications are subsequently produced, each text style is applied to relevant frames throughout the output.

EightShapes Spec text styles in local file:

Text style applied to spec output:

For example, if your design system's primary Font name is IBM Plex Sans, you can update the Font name each text style to that font name. Subsequent runs of the plugin that configure the Spec styling to Use local styles or Add local styles will continue to apply these updated text styles to spec outputs.

FAQs

Can I associate spec output styling with other text styles and color styles or color variables in the local file or a library?


At this time, the plugin does not support mapping styling formats to other preexisting styles in your local file or in a separate library. To support adding this feature, upvote Issue #39:Map user-generated text and color styles to plugin output.


Color variables and text styles added by the plugin show up as publishable when I publish my library. Can the plugin hide those by default?


The Figma plugin API does not yet support setting text styles, variables and variable collections to hide from publishing. When the API supports that, the Specs plugin will hide styles and / or variables from publishing by default.

The plugin was created by Nathan Curtis with help from Kevin Powell. The plugin's origin is described in the Medium articles The EightShapes Specs Figma Plugin and Component Specifications.


The plugin code is maintained in a separate, private repository. Please contact @nathanacurtis for details.

The plugin was created by Nathan Curtis with help from Kevin Powell. The plugin's origin is described in the Medium articles The EightShapes Specs Figma Plugin and Component Specifications.


The plugin code is maintained in a separate, private repository. Please contact @nathanacurtis for details.