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.

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!

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.

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.

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!

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.

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.

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.

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

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.

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.

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.

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.

GitHub component repositories

Documentation & Web • Andriod • iOS