The Figma migration is complete!
By now most of you have heard about the migration from Sketch to Figma. This move benefits both product teams and our own design system team. For us, we get to leverage Figma's multi-mode variable system to build and maintain only a single, shared design library and provide themes for each CMS brand. That saves us a tremendous amount of time and heartache. For product teams, they'll get our updates faster and with less pain. This isn't a commercial for Figma, but designers just seem to like it better.
Our migration to Figma also prompted us to evolve our own tokens system in order to achieve greater parity and integration between code and design. We developed some internal tools to facilitate bi-directional syncing, enabling our design team to update tokens within Figma and sync them back to our code repository effortlessly. Any synchronization with code happens through version control, which is easy to audit and means engineers can discuss changes on GitHub. It creates a conversation between design and engineering with a better paper trail that is easier to document. Ultimately that's a benefit to product teams.
In the process of syncing with Figma, we took the opportunity to refine many of our design tokens. These changes are a natural part of the evolution of the design system, but it does result in some breaking changes for the CSS variables that are generated from our design tokens. Details of the CSS-variable changes can be found in our release notes. We hope that you'll accept a new feature, though, in exchange for making you update a few variables: Most component-level tokens are now defined by referencing theme-level tokens like --color-primary, which means you can make high-level customizations and see them trickle down to multiple components. We hope it also makes it easier for developers to see the relationship between tokens across the system without having to store hexadecimal codes in their heads.
Our transition to Figma marks a significant milestone in our journey to create a more efficient, collaborative, and innovative design process. By embracing this powerful tool and our new design system library, we are well-equipped to build cohesive and accessible products with greater efficiency and efficacy. We look forward to seeing the creativity and productivity this change will unleash across our teams.
Further bundle-size reductions
In the past several releases, we've been talking about the progress we're making towards reducing the amount of JavaScript needed for our components. We've further reduced this amount by about 3.5% in this release, due to a change that you can read more about here.
Removed the privacy settings dialog from the design system
The analytics team at CMS is taking over the UI for users' privacy settings, so we've removed our own privacy settings dialog from this version. The healthcare.gov footer and our own doc-site footer that used to use our version now invoke the privacy settings dialog from the analytics script. For most product teams, this will require no changes on your end. It would only require a change if you were rendering our privacy settings dialog component directly.