Design system

✨

Design system ✨

 

Challenge

Modica is a global CPaaS platform supporting communication with any mobile on the planet. One product it offers is a web-based SMS-sending platform called Omni. When making changes or building new features in Omni, developers have been getting front-end code for components from one of four sources. This includes the very common approach of copying code from existing pages. Developers have also been able to access two different UI guidelines.

Response

  1. We retired two of the code-sources, and one of the UI guidelines.

  2. Our lovely FED Kyle Berkland communicated “when to visit each of the two remaining code-sources” to the wider engineering team.

  3. I completed a full rebuild of all existing OMNI Design System components. CSS Stylesheets in Omni provided the building blocks of properties, values, styles, and naming conventions, to ensure the Figma components handed over in wireframes are now consistent with the real components used in production.

Stylesheets & Tokens

  • Using Chrome Dev Tools I exported existing CSS from across Omni.

  • Custom property syntax and their values were used to create, name, and correctly nest tokens for sizing, spacing, colour, border radius, etc.

  • Token Studio allowed Styles for colour, text and shadows to be automatically created in Figma, from tokens.

 

starting from scratch

It was more efficient to rebuild every Design System component in Figma using the CSS as the source of truth, than to spend time auditing them all, and then change half.

To ensure consistency with code, I linked any Figma-component properties that supported selecting tokens or assigning of Figma Styles. For example:

—button-padding: 4, 4, 2, 2
 

audit

The refresh resolved differences between Design System components used repeatedly in wireframes, and the Styleguide code developers referenced.

It also identified missing components - some were present only in Omni, only the DS, or only the Dev’s Styleguide.

 

A SHARED LANGUAGE

The Design System in Figma now matches the Omni and Dev Styleguide code. Now, if a change to a components is required, it can be communicated to a developer in the language of CSS properties and values.

Dreams for the future…

  • Replacing older HTML/CSS and React components with tech-agnostic Bit web-components, which are visually identical to the existing components.

  • A custom-built Figma plugin that visually maps token relationships, to allow the reduction of total colours used and streamlining of token nesting

    • Please can someone steal this idea and build it!

  • A custom-built Figma integration that runs a Pull request, submits changes to Styles or Tokens as a JSON file and merges through to Git/Bit/web-components in production.

 

tools

Chrome Dev Tools - Figma - Token Studio (Figma Plugin)