Last updated
Was this helpful?
Last updated
Was this helpful?
Add visual separation to design elements by composing several stroke-related design decisions as a single Border Token.
Each design decision (color, border width, and stroke style) that is a part of the Composite Token is referred to as a property of the Border Token in our guides.
The Border Token defines the stroke styling properties for containers, text elements, and polygonal shapes.
Each property composed to create the Border can be defined as it's own Token and referenced within the Border Composite Token:
Color
Border Width
Stroke Style
Like all Composite Tokens, you define the value of each property individually.
When you create the Border Token in the plugin, you can reference each Token you've already created as a property or enter a hard-coded value.
The dedicated Token Type of each property within the Border Composite Token has unique specifications, described in detail in their own technical docs.
Stroke Style defines the line shape. It's value is written as a string depending on your desired style.
solid creates a continuous line.
dashed creates a line of many small sections.
You can adjust the fine-grained settings for the dash using the Figma UI as there currently isn't a Token Specification for it.
Tokens Studio does not have a dedicated Token Type for Stroke Style at this time.
If you'd prefer to reference an existing Border Composite Token as the value instead of defining each Property, select the Token's Reference mode button (2x2 circle icon).
When trying to reference another Token as the Value for a Border Token, you will see:
Tokens living in Token Sets that are currently active.
In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
border
A Border Token defines the stroke styling of text, polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.
You can apply a Border Token to all sides of the design element at once, or each side independently.
With one or more elements selected in Figma, right-click on the Border Token Name in the Plugin to its options.
Select your desired design property by clicking on it to apply the Tokens value instantly.
For independent border styling, you can repeat the steps above and apply different Border Tokens to each side of the same design element.
Tokens Studio has approached our Border Token differently than how it is defined in the current W3C spec:
We allow the borderWidth property to be a number or dimension Token Type where the spec defines only dimension.
We allow unitless numbers where the spec defines a dimension property which must include a unit.
The spec allows for a dedicated borderStyle Token Type, which we do not yet support.
As we move towards more closely aligning with the W3C DTCG specifications, we may adjust the Border Composite Token in the future.
When transforming Border Tokens, which are Composite Tokens, there are specific configurations to be aware of.
Composite Tokens require the SD-Transforms option to expand composite Tokens into multiple Tokens.
Make sure you look at the generic SD-Transforms package to include this option, which allows you to further customize this transformation further using Style Dictionary.
If the borderWidth property is entered as a number without a unit, the ts/size/pxx transform will convert the value to a number with pixels as a unit.
Mentioned in this doc:
None yet!
The string value Dashed or DASHED does not work as expected, only dashed is accepted.
Applying independent borders with different colors does not work as expected.
The properties within the Border Token closely align with the border property in .
Like all Composite Tokens, you may reference an existing Token as the value for each individual property, as .
border is an official token type in the in the W3C Design Token Community Group specifications.
→ →
→
SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Design in Figma -
MDN Web Docs -
Tokens Studio Plugin GitHub -
Caps For Dashed Value in Border Composite Token Does Not Work
Separated borders override colors
V2 release -
Once a Token has been applied, it will remain attached until you manually remove it.
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.
💡 Something to share?
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.
For example {token.name.here}
Jump to the guide on Token Values with References by selecting the card below to learn more.
💌 Visit to contribute or subscribe to updates.