Has anyone used design tokens with Bootstrap Studio?

I’m just learning about design tokens and the concept is super intriguing to me. Essentially, design tokens allow you to set specific styles for fonts, colors, spacing, etc. and then have them populate across platforms (web, iOS, Android, etc.). The value is that each of these platforms have different ways of executing styles and design tokens convert your set styling into each of these required platform structures. Essentially acts as a cross-platform compiler. So, if I were to say update a brand color that appears in 4 of our apps on different platforms, instead of individually going into each and manually updating, you update the design token source and viola, that referenced color is changed in all of your platforms.

Obviously I know that Bootstrap Studio is just for web projects, but I’m curious if within the CSS if I could reference design tokens.

Has anyone experimented with this or have any knowledge as to whether design tokens could be used within Bootstrap Studio after the infrastructure has been set up?

Right now I’m looking at this tool to implement:

https://diez.org/

Correct me if I’m wrong but same principle can be applied using scss variables.

1 Like

Perhaps! I’m not too familiar with SCSS nor am knowledgeable on the dev side of things. Does SCSS convert style elements to whatever format is needed on the platform? (ios, android, etc.)?

not for android or IOS natively as this is not a builder for designing apps.

here is some more info about SCSS variables: Sass: Variables

1 Like

Seems like these “design tokens” are something to be used in situations where multiple people are working on multiple, inter-related, cross-platform projects that may include things like phone apps, websites, etc. I would suspect they’d need to be adopted by the Bootstrap framework before they’d get any kind of attention from the developers of Bootstrap Studio.

The BSS devs are pretty consistent when it comes to NOT adopting any third-party (even open-source) frameworks, systems, utilities or similar assets unless/until they’ve been fully embraced by the official Bootstrap developers (the animation features in the program are a notable exception.)

1 Like