<aside> 🔪 We’re on the bleeding edge – On April 16th, Figma announced that their “Variables” feature would now support typography tokens and, as of April 18th, they have been successfully implemented into the Douglas Design System.
</aside>
Since the beginning of my time at UP42, I have helped foster a consensus about the need for a robust design system to better manage design and development within our rapidly expanding company. Finally, in August 2023, we were able to negotiate the time needed to get the project off the ground.
The Douglas Design System (DDS) is comprised of two Figma libraries, DDS Components and DDS Tokens, and a React UI library called Up Components, which is based on MUI and presented in Storybook. Additional documentation is currently internal-only and lives in Confluence.
From a strategy and design perspective, all work on the DDS falls to me, but for all things Up Components, I am supported by a brilliant frontend engineer named Axel.
While there are many stories to tell about the Douglas Design System, I would like to deep-dive into an extremely recent example (literally this week) that showcases some of my most practically applicable work as a design systems designer – component construction in Figma.
The tag component page, pre-optimization with documentation and token annotations
Tags are a fairly new component of ours at UP42 and, in short time, have become extremely common within our product and several upcoming features heavily rely upon them. As usage patterns are being discovered and defined, so too were the limitations of our original Figma component.
The original 240 Variants + 78 construction Variants
Detail view of the “Primary” tags and their Variants