function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rujuta HonraoRujuta Honrao 

What are the advantages of using Design Tokens ? Should I prefer Design Tokens or Static Resources ?

I was reading https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_intro.htm (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_intro.htm" target="_blank) . But, I found this similar to using static resources, like the same type of styling can also be done using staic resources and the CSS also looks the same like in Salesforce Classic, so what is the difference ? Why should I use Design Tokens ? What are the advantages of Design Tokens ? Can someone please help me over this ? 
 
Raj VakatiRaj Vakati
The Design token is the central place to manage your custom CSS in Lightning architecture 
  1. With the design token you can create a baseDesign token and you can define the common css at one place and it will be inherited to all the component by default ..  So all CSS will be centralized 
  2. You will be getting an option to override 
Refer this link 

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


With the Static Resource, you can able to  upload css and import them into the lib .. with this approach all css will be in resource and eevry time you need to refer them 
No override 
Rujuta HonraoRujuta Honrao
@Raj , I have read the complete documentation, and implementated the same on the org too; but understood that the same can be done using static resources also, so why should I use Design Tokens instead of static resources ? Why should I prefer Design Tokens ? What are the plus points in using Design Tokens or how is it better than static resources ? 
Raj VakatiRaj Vakati
Read these points and let me know if you dnt understand 


static resources Advantages 
  • Good for external css imports and use them 
  • Good for one place for all CSS and import them and use it 
  • If you want to add an external class you need to use the custom CSS properties you need to use 
  • Not able to do it as CSS token .. you need to use CSS Selectors 
 
Design Tokens
  • Every design is like an CSS property or thinks like variable 
  • Instead of using the CSS Selectors  , here you will go by the tooken and you will call this token in later point in  CSS Selectors 
  • One central place for all the  Token 
  • The advantage if you have company is having set of style guides like font size and font width etc for all the application , we will keep them in design tokens and use it in css selector instead of keeping them in static resource 
Rujuta HonraoRujuta Honrao
Thank you. I understood more better. 
Raj VakatiRaj Vakati
Great .. Close this thread