Product(ion) Design System

Product(ion) Design System

Team Size
1
Date
Feb 2, 2021
Roles
Design System
Cover
Description
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.
image

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

Improvements

πŸ“Œ

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
    • Create buttons and improve the UI
    • Follow the Guidelines in place
  2. Structured Why
    • Document and create a culture on that
    • Contribution and advocating
  3. Usability Testing across designers
    • How can we improve the Wise experience across web and mobile?
  4. New documentation for adding component

Design System Workflow

image
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.

Arguments

πŸ₯…
Context - Shared Variables Dilemma

πŸ™‚
User-friendly documentation for your component library with Storybook

❔
Questions in the Process

πŸ“
Why Design System