Last updated
Was this helpful?
Last updated
Was this helpful?
Add elevation and depth to design elements by composing several shadow-related design decisions into a single Box Shadow Token.
Each design decision (color, spread, blur, offeset) that is a part of a Composite Token is referred to as a property of the Box Shadow Token in our guides.
While the Token Type label is specific to Box Shadow, this Token supports Inner Shadow and Drop Shadow design decisions.
Each property composed to create the shadow can be defined as it's own Token and referenced within the Box Shadow Composite Token:
X
Y
Blur
Spread
Shadow color
Like all Composite Tokens, you define the value of each property individually.
When you create the Box Shadow Token in the plugin, you can reference each Token you've already created as a property or enter a hard-coded value.
In the plugin, use the UI button to select between drop shadow or inner shadow.
The dedicated Token Type of each property within the Box Shadow Token has unique specifications, described in detail in their own technical docs.
You can add another shadow layer to the current token by selecting the plus icon button in the Box Shadow Token form.
When you apply the Box Shadow Token to your design element in the Figma UI, you will see multiple shadow effects applied, one for each shadow layer you created within your token.
When you export a multiple-layer Box Shadow Token to Figma as a Style, you will see a single Effect Style applied, with multiple shadow effects within its value.
If you'd prefer to reference an existing Box Shadow 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 Box Shadow Token, you will see Tokens in the dropdown list that are:
Lving 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:
boxShadow
Box Shadow Tokens defines the inner or outer shadow styling of text, polygonal shape, and frame layers in Figma when the Token is applied.
With one or more elements selected in Figma, click on the name of your chosen Box Shadow Token in the Plugin to instantly apply its value.
Box Shadow Tokens can be attached to Effect Styles in Figma. Tokens Studio also supports Styles with Variable References.
Here are some tips for creating Effect Styles with Variable References using the Plugin.
When you Export to Figma, select these Options from the menu to create Effect Styles with Variable References:
Effect Styles is selected.
Number and Color Variables are selected.
Create styles with variable references is selected.
Ensure your Export to Figma as Themes or Sets configuration includes all necessary Tokens.
Themes and token sets where the referenced Tokens are located are active.
Themes and token sets where the variables are attached may need to be configured as reference only.
You'll notice the Effect Style will be created on Export, with all possible values mapped to the appropriate Variables, based on the Token Type for each property:
color (will create as color variable)
dimension (number variable)
number (number variable)
The plugin had Box Shadow support long before the spec defined the shadow token, and as a result, we have some legacy decisions which do not completely align with the DTCG spec.
We write the type as BoxShadow where the spec writes it as shadow.
When you run the SD-Transforms npm package we will adjust this automatically to match the specification, details below.
The Plugin currently supports number Tokens in numeric value properties.
The spec requires dimension values only.
When transforming Box Shadow Tokens, which are a Composite Token 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.
The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of boxShadow to align with the DTCG Format Token Type of shadow.
The innerShadow properties need to be transformed to inset to be CSS compatible.
Mentioned in this doc:
None yet!
UI issue where the dropdown menu needs repositioning.
Removing one shadow from a Token with many shadows combined does not remove the deleted shadow from the array in the JSON file.
Alignment with the W3C DTCG format for shadow token type
Similar to how shadows are defined in , you can combine multiple shadows in a single Box Shadow Token. Box shadow Tokens applied to text layers would translate to text-shadow in .
Looking for the Blur Effect in Figma? That's currently a property within our .
Like all Composite Tokens, you may reference an existing Token as the value for each individual property, .
Shadow 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 -
MDN Web Docs -
Tokens Studio Plugin GitHub -
Importing shadow styles causes the order of shadows to be reversed
TokenDropdown collides in Color input of box shadows
Multiple shadows in Box Shadow tokens -
Change boxShadow values from x and y to offsetX and offsetY
Once a Token has been applied, it will remain attached until you manually remove it.
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.
Jump to the guide on Exporting Tokens to Figma by selecting the card below to learn more.
💡 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
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.
💌 Visit to contribute or subscribe to updates.
