SoundCloud - Product Design System Application



Maintaining a design system using communication, process, teamwork, and discipline

How would you document updates to our Design System?
  • Write guidelines that act as a source of truth, or reference material.
  • Explain what ‘it’ is.
  • When, where, why, and how do you use it?”
  • Document and/or demonstrate any functionality, animation, or conditional logic.
  • Lead by example and show example use cases.
  • Include as much detail as is appropriate, code included.

Best Design System you have ever seen?
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 more generic compared
to the token */

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

A Design Token is

is the visual atom of the design Systems, in order to maintain a scalable and consistent visual system for UI development.

Compared to a Sass variable (generic and reusable), a design token it's a more specific value but reusable at the same time.

👈🏻 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.

What are you able and can do for our design systems?
  • Advocate for the system.
  • Establish design system processes.
  • Ensure that any processes for updates and maintenance are upheld.
  • Educate designers on system design best practices.
  • Research and discover new and improved ways to manage and maintain the system — whether it’s technology, processes, or design tools that could help the team.
  • Promote and seek opportunities for designers and developers to work together.
  • Keep everyone up-to-date and engaged with the system.
  • Deal with any resistance to the system.
  • Listen and hear more and always learning.

Code Components Example

On the side

Product Designer + Manager Notion Ambassador