Product(ion) Design System

Product(ion) Design System

Team Size
Design System
Built a boilerplate Design Systems with variants in Figma

How the systems are formed, how they are supported, and how they change?

The time spent curating this library, through community resources, helps me to be updated to improve the work in the most intentional way possible.

Converge a source of truth across design, development and organisation.

Design System

How would you document updates to our Design System?

  • Write guidelines that act as a source of truth, or reference material.
  • 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.

What to expect

You will get the role. What will you practically do next?

  • Study the current situation.
  • Advocate for the system.
  • Establish design system processes with an how-to add new components
  • Ensure that any processes for updates and maintenance are upheld.
  • Usability Testing to 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.

Real practical work for me would be



Tracking the status from backend to frontend to raise the interactions, UI and motion level across web and apps to help transferwise itself to move for customers who wants to easily move money with convenience

  1. Features lookings and lead operations
    1. Create buttons and improve the UI
    2. Follow the Guidelines in place
  2. Structured Why
    1. Document and create a culture on that
    2. Contribution and advocating
  3. Usability Testing across designers
    1. How can we improve the Wise experience across web and mobile?
  4. New documentation for adding component

Design System Workflow


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


Context - Shared Variables Dilemma

User-friendly documentation for your component library with Storybook

Questions in the Process

Why Design System