Updates

February, 2023

A lot of amazing work and new changes to the Thumbprint Design System have happened from both a design and engineering perspective since our last update.

Let’s take some to celebrate those wins, talk about what’s new, coming up, what’s leaving, and more in this version of the TT Thumbprint Newsletter.

🎉 What’s new

It’s always exciting to get a new pair of shoes. While we won’t don these changes on our feet, these improvements to the product are even more exciting than those new sneakers!

1. Content Design overview

This MVP version of the CD guidebook provides a high-level approach to how we operationalize Voice and tone, Inclusion and Accessibility, Grammar and mechanics, and Surfaces and elements at TT.

Within each section, you’ll find the underlying principles of each subsection, along with a plethora of rich examples of Do’s and Don’ts. This resource will also serve as the foundation and source of truth for our team to build on over time as our standards become more robust.

2. SwiftUI migration

Thumbprint on iOS is transitioning from UIKit to SwiftUI. As a result we’re rolling in SwiftUI implementation component documentation. To see the first examples, visit the Alert Banner or Button SwiftUI documentation pages. Look for the iOS (SwiftUI) tab on other components, as this documentation continues to roll out.

🛠 Updates and changes

We know Thumbprint is a great product, but there is always room for improvement, just like any home renovation project. Here are some updates and changes to the product that we’re excited to celebrate!

1. Component usage documentation

We’re adding usage documentation to all components to provide users of Thumbprint with a clearer understanding of how to use components.

Usage documentation includes examples of when to use, anatomy, specifications (spacing, sizing, color), best practices, accessibility considerations, and links to related components.

Check out the Pill and Horizontal Rule component for the up-to-date approach usage documentation.

2. Consistent icon sizing options

Previously, icons were offered inconsistently and unpredictably in terms of sizing availability. For example, there was a lack of certainty of whether or not a Tiny sized image was available for any given icon.

With the most recent release, all Thumbprint icons are now represented in the Tiny, Small, and Medium sizing options.

3. Color contrast ratio documentation on color usage page

Thumbprint now offers documentation on how to use each variation of our brand colors in variety with one another to produce an accessible experience based on the WCAG 2.1 AA standards, along with a few general best practices for accessible color usage.

📋 What’s coming up

Here are some projects that are currently in progress or are just over the horizon.

1. Updated usage documentation

Work will continue introducing usage documentation for Thumbprint components. The order of this work is determined on the most popular components first based on Figma insertion metrics. Next up will be the Button component.

2. Semantic tokens (color)

Our current color tokens do not provide context around usage and intention. This current format is introducing ambiguity and limiting factors around color choices. This change introduces a more semantic approach to our tokens that intends to provide an intentional methodology for describing colors and how they should be applied.

3. Next.js migration

The Thumbprint documentation site is moving to a more flexible and modern javascript framework Next.js. We’re currently migrating our documentation resources to support this new framework. Moving to Nexj.js provides an upgrade to the existing Thumbprint infrastructure, making it easier to maintain, faster to develop, and document our components.

Did you know?

Looking for a short snippet to help get you excited about design systems. Below you’ll find a brief knowledge drop that is noteworthy. It’s our “The more you know” (shooting star) moment.

You can expose nested component properties in Figma?

Figma has an open beta feature (all Figma users can join the beta) that will show nested component properties. This feature saves time by removing the need to double-click through nested layers and will enable the design to manipulate components with with ease.


Additional resources

GitHub component repositories

Documentation & Web • Andriod • iOS