New documentation, icon repo, design tokens, Config, and more!
|
|
|
|
Our team continues to iterate on and add new pages to the Acorn website, this time around we're introducing:
|
We’ve added our Typography system to Acorn. Covering Desktop, iOS, and Android implementations, as well as general guidance and a token library for using type on Firefox.
|
A new section to house specific guidance for patterns like Animation, and branded component experiences like Spotlight modal.
Launching under patterns with this release is Loading indicators, a small page of usage guidance. Like with any page we launch this is a work in progress and will continue to be iterated as we have more guidance to share.
Spotlight modal is a branded modal experience with a very specific usage profile. We've put together some preliminary guidance, and are continuing to explore and add more as we discover the edges.
|
We're adding a glossary page to help define some of the more technical and/or industry standard terms used in our documentation to help with comprehension and to mitigate misunderstandings.
|
Answers to frequently asked questions, and a way to document some of the decisions we've made and shared in other channels that don't have a clear home in any specific document.
|
We've edited, corrected, and updated a lot of smaller things throughout Acorn to continue delivering the most up-to-date and correct guidance. Feel free to explore and reach out with any feedback, or questions!
|
|
|
In H2, we launched the open source, Acorn Icon Repository on Github. The repo contains icons used throughout Firefox on desktop and mobile. At the moment, only mobile icons have been added to the repo, desktop icons will be added in the near future.
The purpose of the repo is to have a centralized single source of truth for all our icons. Our goal is to improve collaboration between design and engineering and help make the engineering process more efficient by providing ready-to-use icon assets that are optimized and follow a standardized naming structure designed for each platform.
|
|
|
Figma updates since our last newsletter on March 29, 2023
|
Figma Library Onboarding
To help support new users of our Figma libraries, we’ve launched an onboarding overview file that provides an overview of all of our Acorn libraries in Figma. You can open this file and learn about our foundation libraries, desktop and mobile libraries, as well as some experimental libraries that our team maintains, as well as what you’ll find in each one.
|
Icon Redesign
We recently did a major redesign to all our existing mobile icons. The redesign is subtle and some of the changes include: increasing the line width from 1.5px to 1.75px, removing the “cut” off of corners and edges, and some icons have been simplified to include less detail. The changes are currently live in Figma and mobile engineering is in the process of implementing it into the product. Desktop icons will also undergo the same redesign in the near future.
|
If you encounter any bugs  while using a component, please report it to our team in our slack channel #firefox-design-systems.
|
|
|
Desktop design tokens in v115!
|
The first release of design tokens are coming out on desktop's v115!
For anyone not familiar with design tokens (documentation to come out in h2), this is a methodology that the Acorn team uses to capture our reusable style decisions as variables (e.g. colors, typography styles, border styles…). Note that these variables don't depend on a specific platform's language; on the desktop codebase they were introduced as CSS, while on Android and iOS these exist today in their respective codebase's languages.
For now, we have introduced only some of our color, border, size, and typography tokens into the desktop codebase. We are taking a careful approach of introducing them in batches as we collaborate with front-end engineers, so expect more updates and minor changes.
Since there is some more work and documentation to come for both desktop and mobile, we're going to treat Acorn design tokens as in beta at least for the remaining of this year–so keep an eye out for updates.
We are also currently working on aligning certain visual style relationships between desktop and mobile, such as our accent color. In the coming year, we will continue to take a deep dive into standardizing and documenting Acorn styles across platforms.
What does Acorn design tokens in beta mean for Figma styles and your design work? On top of design tokens being new to the desktop codebase, Figma introduced 'variables' during this year's Config. These new variables are essentially a way for us to capture our design tokens, so the Acorn team is currently evaluating this feature and won't be making any changes to style libraries until we plan this work. For now, you may keep using both of our mobile and desktop styles libraries as they are today. Expect to hear more from our team on design tokens and variables in Figma in h2.
|
|
|
On June 21st the Acorn team watched as Dylan Field took to the stage and announced some exciting Figma features. Figma is growing with variables, advanced prototyping, modes, dev mode, and more.
So what’s next for our Figma libraries? Well the truth is, we’re still figuring it out. The Acorn team is testing out the new design system features they launched, since they are in Beta. We'll be figuring out our roadmap and how we will implement it. Until then, if you are interested in learning more about these features yourself check out this documentation that Figma released.
If you’re interested in watching any of the Config 2023 talks you can also see them here.
|
|
|
We are making some improvements to our help and support page on Acorn. Currently, the page contains some brief information, but our goal is to expand on it further and provide more clarity on the different ways you can reach out to us for support so we can better help you.
|
Office hours improvements
|
We are working on some new and exciting office hours improvements! We audited the holistic office hours process and have come up with some new ideas in a few different areas where we can improve the experience for our teams. Stay tuned for details… 
|
Lo-fi wireframes improvements
|
Thanks to the hard work of Jeff Guerrero and Jihwan Kim we're close to launching a new update to our wireframe library. The library features a new low-fidelity style, more mobile components, sketch icons, and additional missing components for desktop.
|
Accessibility Annotations
|
We're working on improving tools for better annotations on our file presentation library to create accessibility annotations.
|
|
|
Thank you for providing us feedback or spotting bugs on the Acorn website!
@jhirsch - Jared Hirsch
@Chris Peterson - Chris Peterson
@tgiles - Tim Giles
@flod Francesco Lodolo
|
|
|
|
New: 
