Introducing Acorn– Firefox's design system
|
|
|
|
We’re excited to share our new design systems website with you: acorn.firefox.com. Acorn is a living, breathing documentation site. It houses styles, patterns, content and component documentation for building Firefox on web and mobile. Today, Acorn launches with our content guidelines, colors information, icons, a deep dive on buttons, and a few other exciting tidbits. We plan to continue growing and curating our documentation regularly.
What you see today is the start of that process and just the beginning. Our system is a historical recollection—a curated library of design and development decisions. We’ll work with you to build upon these decisions as we build Firefox together.
Please have a look around, and feel free to send feedback, comments, and concerns to our team.
|
With this launch, we are introducing a new design system name—Acorn. Why a name? We want our name to give the Firefox design system a brand value, with the purposes of it being easily recognizable within our community, and consequently driving its adoption. We want this name to follow our brand values and fit within the Firefox brand. Acorn is one of red panda's favorite foods but it also means something greater, as oak trees grow from just one acorn.
With Acorn we're starting with the literal seed, the Acorn itself, with a vision of a full grown oak, robust, stable, and beautiful. We want to inspire our community to take Acorn and spread it so we can all build Firefox together. We’re planting a seed that we nurture and grow into healthy trees (our products).
|
From now on you'll see us using Acorn to refer to our design system team members and to our website, so treat Acorn as a synonym for "Firefox design systems."
|
|
|
Updates since September 12, 2022 (our last newsletter)
|
We've simplified the Slot component in Figma. Slot was released around 8 months ago when we released the Browser Desktop component. You should find Slot nested within components that support your own custom compositions. We've cut down the amount of information and guidelines we used to write on the component itself, and instead include a link to a guide that fully explains how to use a Slot.
You can read the guide in Confluence for now.
Note: we also recorded a video that explains how Slots work, and you can watch it in Air Mozilla.
|
We have many component and UI updates to our libraries.
|
 New: Banner, Bottom Sheet, Card, Dialog, Tab Tray.
 Changes & improvements: Updated Toolbar component with new UI changes, improved accessibility on Form component, simplified some components by cleaning up component properties, naming, etc., dark mode for various components, and moved deprecated components to a hidden page.
- UI
- New: Homepage & Browsing, Tab Tray, and Toolbar variants.
- Changes & improvements: Replaced deprecated components on Bookmarks, History and Settings variants.
*Note - Make sure to switch on the Android UI library to get access to these ready-made components
|
- New: Card, Share Sheet, Toast.
- Changes & improvements: Updated Toolbar component with new UI changes, simplified some components by cleaning up component properties, naming, etc., dark mode for various components, and moved deprecated components to a hidden page.
- UI
- New: Homepage and Tab Tray variants.
- Changes & improvements: Replaced deprecated components on Bookmarks, History, Downloads, Reading List, and Settings screens.
*Note - Make sure to switch on the iOS UI library to get access to these ready-made components
|
We've updated our desktop typography styles in Figma to more closely match what we have in Firefox today. Note that they are not 100% consistent yet, as there are many inconsistencies in Firefox that we are trying to fix with our separate design tokens effort.
What are the new line-heights? For In-content pages (e.g., Firefox View, NewTab Settings) the body has a line-height of 160% and headings of 140%. For chrome (e.g., search bar, panels) the line-height is always 140%.
We are also working on Acorn documentation on typography, so stay tuned for that too!
|
Reusable user interface components
|
The design systems team has expanded into desktop engineering by partnering with our front-end team on supporting the creation and maintenance of a reusable components library. You can look at our code reusable components library here. We use a tool called Storybook to compose and document our UI components, similarly to how Figma works for interface design, but in code.
As of today our new Learn More component is live in our codebase and our Toggle component is in Firefox under about:addons!
|
If you encounter any bugs  while using a component, please report it to our team in our slack channel #firefox-design-systems.
|
|
|
Our long term goal is to ship larger updates around once per quarter, and smaller updates as needed and/or ready. Up next? Documentation for our modal component and our typography styles.
|
We're actively working on a GitHub repository for Firefox desktop and mobile icons. The goal for this repository is to facilitate the transfer of icons between our design library and development environments.
|
|
|
|
Thank you for continuing to visit us during office hours. Since August of 2022 we have had 37 drop ins. That’s 37 more projects that we've collaborated on with the Firefox community.
|
Contributions and partnerships
|
Front-end engineering - Reusable components
As mentioned under desktop updates, we've been collaborating with the front-end engineering reusable components team on the efforts of supporting the Firefox front-end via stewarding our user interface reusable components, and advocating for component reuse and design system best practices. We're excited to continue this partnership with engineering and hope to continue bringing parity to design and code and collaborating on the documentation of our design components and patterns.
Accessibility engineering team
We've been partnering with the accessibility engineering team on high contrast mode (HCM) documentation, design accessibility documentation, and accessibility related questions. We're excited to continue this partnership and bring more HCM documentation to Acorn and our Figma libraries.
|
|
|
|
