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
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 to hide from publishing. However, text styles prepended with . are hidden from publishing by default.
Therefore, the Specs plugin is setup to detect existing EightShapes Specs styles that begin with EightShapes Specs/… or .EightShapes Specs /…, and apply either to specs output.