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 the variable referencing also makes it easier for developers to see the relationship between tokens across the system without having to store hexadecimal codes in their heads. To make the update easier, we included a migration script that will find outdated variable references in your code. Overall we're working towards tokens that are better organized and more consistent and understandable, and we thank you for walking with us on this journey.
Running the migration script
We've included a migration script in v11 to help you find and update outdated references to deprecated CSS variables and utility classes. Using your local package manager's task runner, run our cmsds-migrate command like so:
npm run cmsds-migrate
From the menu, choose the "deprecated css v11" script and run it. If you are unsure of anything, refer back to the release notes or reach out to us!
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.