Custom color formats
You can generate, customize and apply custom variables to format specification colors.
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:
Subscribe to the Pro version.
In the
Settingstab's Format section, selectColor.
When the plugin runs, it will generate relevant variables and/or text styles and apply each to your specification output. You can then customize those styles and variables to format current and future specifications.
The plugin looks for relevant variables in a variable collection named EightShapes Specs. If a color variable does not exist, the plugin adds the variable to the local variable collection. As specifications are subsequently produced, each color is applied to relevant frames and text throughout the output.
EightShapes Specs variable applied to spec output.
Similarly, imagine you would like spec dark mode backgrounds to apply #1F2328 as the dark mode background color and #4787DF as the dark mode spec style and variable pill label color.
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.