Design Tokens
What are they?
- Design tokens are design decisions, translated into data.
- They act as a “source of truth” to help ensure that product experiences feel unified and cohesive.
- a shared language between design and engineering for communicating detailed information about how to build user interfaces.
Why?
- Different Platforms
- Evolution of the design
- Consistency
- Speed at scale
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882612/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882612/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882612/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882612/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882612/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882668/pasted-from-clipboard.png)
Design token types and terminology
- Token
- A design decision
has been made
- A design decision
Design token types and terminology
- Token
- A design decision
has been made
- A design decision
- Value
- data associated
with the token name
- data associated
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882622/pasted-from-clipboard.png)
Design token types and terminology
- Token
- A design decision
has been made
- A design decision
- Value
- data associated
with the token name
- data associated
- Global token
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882622/pasted-from-clipboard.png)
Design token types and terminology
- Token
- A design decision
has been made
- A design decision
- Value
- data associated
with the token name
- data associated
- Global token
- Alias token
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882622/pasted-from-clipboard.png)
Design token types and terminology
- Token
- A design decision
has been made
- A design decision
- Value
- data associated
with the token name
- data associated
- Global token
- Alias token
- Component-specific token
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882622/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882693/Screenshot_2023-10-31_at_22.54.46.png)
Only use global tokens when there are no available aliases for your use case.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882700/Screenshot_2023-10-31_at_22.55.38.png)
Alias tokens are the recommended type to use when building your product with design tokens.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10882704/Screenshot_2023-10-31_at_22.56.26.png)
Use component-specific tokens for their respective component
It’s not recommended to use component-specific tokens interchangeably with other components, unless one is derivative of the other.
Integrating with Invenio
- A Design
-
Global tokens
- SCSS Variables
- CSS Variables
- JS / TS / JSON files with exported items
- Style Dictionary library
-
Component-specific tokens
- Tailwind theme
- PrimeReact Unstyled mode
Next.JS
What is React?
The library for web and native user interfaces
Advantages:
- Component-based
- Declarative
- Uniform
A Web application needs more than just React
-
Component Bundling
- Webpack, parcel, rollup, browserify ...
-
Transpilers
- Babel, TS, Rome ...
-
Client-Side Routing
- React Router, Reach Router, Wouter ...
-
Data Fetching
- React Query, Apollo
-
Deployment
- Code Splitting
- SSR
- Static Exports
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10324682/pasted-from-clipboard.png)
Making a React App in 2023
-
Full React compatibility
-
SSG / SSR / ISR + API
-
Optimizations (Image, Font, Script, Code split)
-
Hot reload with state preservation
-
Routing + Built in CSS support
NextJS = React ++
- Faster webpages for the user
- Less infrastructure cost
- Better scalability
- Quicker development time
- Unified codebase
Server Side Rendering (SSR)
- Can be slow
- More expensive
CSR vs SSG vs SSR
Client Side Rendering (CSR)
- slow on initial render due to bundle loading
- has issues with crawling (social media)
Static Site Generation (SSG)
- The fastest option
- Very cheap
- Data can get stale + long build times
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10332726/Screenshot_2023-03-23_at_20.00.12.png)
- Choose SSG or SSR on a per path basis
- Next also allows Incremental static regeneration (ISR)
- ISR can reduce build times.
- ISR can update SSG'ed sites every X sec (on demand)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10334490/Screenshot_2023-03-24_at_13.04.48.png)
API Routes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10334493/Screenshot_2023-03-24_at_13.07.49.png)
Other advantages
- NextJS Analytics
- Vercel Deployments
- Image optimisations
- Massive Community
Next.JS Alternatives
Next.js | |||
---|---|---|---|
SSR | + | +/- | + |
SSG | + | + | - |
ISR / DSG | + | + | - |
RSC | + | + | - |
Edge Support | + | + | + |
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10334517/1200x627_-_Glowing.png)
Others:
- Walmart's Electrode
- Razzle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10333059/pasted-from-clipboard.png)
Showcase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10334531/Screenshot_2023-03-24_at_13.21.43.png)
Salvo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/861737/images/10334585/pasted-from-clipboard.png)
Questions?
Next.JS
By Arfat Salman
Next.JS
- 155