Skip to main content

Design Strategy

Leveraging design tokens (variables) and Figma libraries to rebrand the Abyss Design System

Overview​

Utilizing our white labeling strategy, teams can work with Figma files to create new themes for their customers independently of the Abyss team. This allows you to preview themes in Figma using Abyss components, provide design decisions to developers, implement those design decisions into software, and migrate to new Abyss versions without losing your design decisions.

Note: the Figma links below require having a Figma account and being granted access to the necessary project. If you don't have access, please click the "request access" button and reach out to Jess Wolff (jessica_wolff@uhc.com) for approval.

Figma Files and Assets​

Global Files (Abyss owned)​

The master library files contain tokenized components used across the design system. They are separated into two categories: design-ready and dev-ready. The design-ready components, if not in the backlog, will have the sprint they’re slotted for in the component description.

Foundations and Token Files (Abyss owned)​

Contains all the tokens in the form of Figma variables, as well as documentation components for color semantic tier taxonomy. These files are fed by the Tokens Studio plugin and connected with the global versioned and design-ready files as a library.

Figma File Duplicates (not owned by Abyss)​

Abyss will provide duplicates of all six files - three per platform:

  • a versioned file with dev-ready components
  • a file with design-ready components
  • a file with tokens (variables)

White label teams are responsible for setting up the files following provided documentation by Abyss. The Abyss version, at the time of duplicating the file, will be noted in the file name. White label teams are responsible for maintaining these files in a way that preserves component structure and functionality and token taxonomy.

Design Guides​

The Abyss Design Team has provided detailed documentation on how to utilize tokens to rebrand our design system.

  • Check out the Getting Started documentation on Figma to learn more about applying your own theme to the Abyss Figma Library.
  • Understanding token taxonomy is crucial for making informed decisions when modifying color tokens. The Token Taxonomy Guide describes ways to utilize the Abyss token taxonomy documentation and learning how color is applied throughout.
  • The most efficient way to rebrand the Abyss library is by leveraging the provided Figma-branded library file and the Token Studio plugin. Learn how to edit core tokens here.
  • For cases when the branding requires a color that is non-existent in the Abyss core tokens or belongs in a different bucket, Abyss Design has outlined a guide to remapping semantic tokens.
  • It is important to stay aligned with the design system. Abyss has two ways of doing so:
Table of Contents