Wise • Design System Application

Design Playback

image

Design Tokens

Have you ever hear about Design Tokens in Systems?

/* Design token */
$color-background-light: #ffffff;

/* CSS appliance */
body {
background-color: $color-background-light;
}

/* USING SASS we normally declare it as $white but it's too generic compared to the token */
📌

Design tokens essentially store design decisions — like colour, size, and space — which can be systematically applied throughout a product.

Using Code as a Design tool Checklist
Update the library, style guide(s), or whatever design file(s) the team uses to share design assets.
Make sure the update is effectively tracked and queued for a developer to update the code, (for example, by creating a Github Issue).
Update any documentation.
Inform the team about the change. Ideally, they should be aware of the change before it’s been made. If I include them in the process of figuring out why the change is needed and what the change should be, you will avoid any conflicts or repetition of work.

On the side

Designer Freelance • UX & Design System Notion Ambassador

Renaming

File name / Page name / Frame Name / Component Name (variation, style, type & state)