Variables, New docs, Figma components, and more! 

In February, we released an exciting update for our mobile libraries that will supercharge your Figma workflow. Now our mobile components have Figma variables enabled. Variables are essentially design tokens that can be used in Figma. In our first phase of implementing variables into our design system, we have converted most of our color styles to using variables. This helps us create standardization and consistency in designs and allows us to easily toggle between different modes, such as light, dark, and private themes.

We’ve created a video walkthrough that covers the previous method of applying a color style and what’s different now with using variables. Check it out on AirMo.

In response to Firefox Desktop adjusting line-heights to accommodate non-Latin character sets, line-heights have been updated in Figma as well.

 

Additionally, sub-components previously embedded within more complex components, such as radio buttons without labels, are now published for standalone use, hopefully giving y’all increased flexibility in crafting interfaces.

The Desktop Components Library added the feature callout component, originally designed by Tati, which has seen increased usage in onboarding experiments.

Thanks to Tati, Tina and Victoria for working on this component and partnering with us.

Furthermore, the message bar component, designed by Jules, has also been added to the Desktop Components Library.

If you encounter any bugs while using our libraries, please report it to our team in our slack channel #acorn-design-system.

Checkboxes let users make a binary choice like turning a feature on or off, or selecting multiple options from a list. Check out the documentation for message bars  

Use radio buttons when you want someone to select only one option from a few mutually exclusive choices. We’re excited to include the radio documentation for desktop, and Android within our Acorn documentation. 

Last newsletter we talked about how our team partnered with the accessibility engineering team to build an updated version of the high contrast mode library. If you’re designing for desktop, this library will help you mockup high contrast mode with sample themes. This quarter we’re back with some exciting documentation updates and an amazing video by Julian teaching you how to annotate for accessibility. 

 

Thank you to Anna Yeddi and Morgan Rae Reschenburg on partnering with our team on this work.

Looking for developer design systems resources? Look no further. We have a new guide out for developers. Feel free to share this with your dev teammates.

Looking for designer design systems resources? Look no further. We have a new guide out for designers (we moved the Figma accessibility annotations guide under the designer resources).

Source of Truth

The Reusable Components desktop team has worked with us during all of Q1 on the launch of an official home for our design tokens source of truth in mozilla-central (where desktop and android code live today).

 

Since our various platforms consume our reusable style variables in different formats (i.e. Figma uses Figma variables, desktop uses CSS, iOS uses Swift, and Android uses Kotlin ), we needed a language-agnostic way of storing our tokens that we could easily transform into all these formats, therefore we chose JSON.

 

We've created a build process so that JSON transforms into CSS. This build process isn't unique to desktop, so we will be using it to transform the JSON truth into Swift, Kotlin, and Figma variables.

 

Thank you ReComp team!

 

Up next, we're working on transforming the JSON into Figma so that our variables in design can correspond to those in code. Keep an eye out for future updates

We're actively working on an upcoming improved color palette and standardizing shadows, which will be all accompanied by design tokens. Keep an eye out for h2.

The Reusable Components team has recently released moz-card (card component), moz-button (button component), and moz-page-nav (side navigation component you see in about: pages like preferences and Firefox View).

 

A reminder that Reusable Components is a desktop engineering team working alongside Acorn on engineering design system resources so that our work goes beyond just Figma and documentation.

 

We've also recently released space design tokens on desktop; and you can now also preview our desktop design tokens collection in Storybook (our desktop design system developer resource)

.The iOS team has recently made some component updates to the code base as well

Thank you to Cyndi Chin for sharing these with us.

• Adding close button component to the library
• Adding underline to our link button component
  

Contributions

Thank you Eric Pang and Kelly Cochrane for working with us on the new Moz-Page-Nav component for desktop, and thank you Kelly for adding it to our desktop component library.

Thank you Eric Pang and Amy Lee for working with us on standardizing heading designs.

Thank you Yulia Popova for working with us on standardizing card layouts.
On the new developer and designer resources, we linked to several resources built and maintained by people outside of Acorn at Mozilla that we collaborate closely with from Firefox UX, iOS engineering, Android engineering, and desktop engineering thank you all!

Thank you Reusable Components team for our continuous collaboration on the setup, documentation, and maintenance of design system resources on the desktop engineering side. We're happy to have launched JSON design tokens, moz-page-nav, moz-card, and moz-button.