BLOG ARTICLE

Design Tokens for Experience Builder Sites

Share This Post

In this article, we will tell you everything you need to know about designing Tokens for Experience builder,  how to create your custom Tokens and make custom design tokens available for Experience builder sites. 

What is Standard Design Tokens for Experience Builder Sites?

Standard Design Tokens are used to make your LWC (Lightning Web Components) compatible with the Theme panel in Experience Builder. The Theme panel gives administrators the ability to quickly and easily style an entire site using these properties. Each property in the Theme panel maps one or more standard design tokens. To get the complete list of standard design tokens please visit:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_standard_communities.htm

This is how it looks a theme panel with Standard Design Tokens properties:

When an administrator updates the property in the Theme panel, the system automatically updates any LWC components that use the tokens associated with the branding property.

This is how it looks before the update:

This is how it looks after the update:

Code sample:

What is Custom Design Tokens for Experience Builder Sites?

Standard Design tokens have a limited number of properties and may not fully cover your styling requirements. In these cases, you can create your own design tokens and use them in Experience Builder Sites.

How to create Custom Design tokens:

Apply changes

To apply changes on design token properties you need to publish your Experience Builder site.

How to make design tokens available for Experience builder Sites?

To make design tokens available for use in Experience Builder they should be extended from forceCommunity:base:

Example of Custom Design Tokens

Need help?

In Nubessom we have more than 12 years helping companies around the world achieve their Salesforce, CRM and business automation needs. 

We are your trusted Salesforce consulting partner, please reach us by clicking here or in our contact form below. 

About the Author
Ruslan Zvezdilin, Salesforce Developer @ Nubessom

Ruslan Zvezdilin, Salesforce Developer @ Nubessom

Ruslan is one of our experts focus on Apex and LWC (Lightning Web Component). He is very passionate and always eager to learn something new.

Let´s talk about your challenge!

    In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.



    You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

    Need more Inspiration? keep reading Our related content