✨ Announcing office hours

As we wrap up the first half of the year, we’re excited to share that we will be launching a new community support initiative: Design System Office Hours!

Office hours are pre-arranged weekly sessions for the Firefox community to come by and get help and support from the Firefox design systems team. This won’t replace our existing support channels, such as our Slack (#firefox-design-systems), but will simply serve as an additional support space for you to come to us with questions, feedback, and general design systems help.

Examples of design systems support:

• I need help using component and styles
• I want to propose a new component
• I want to make a contribution to a design guideline or library
• I need help with a design pattern, behaviour or guideline
• I want to involve design systems on a project I am working on
• I want to talk about an issue or challenge I am experiencing with the design system
• I have questions or concerns about the design system

Bring a topic to office hours! They happen once a week on Mondays - alternating between 11 PM EST and 2PM EST.

🎁 What’s new

We're happy to announce a collection of Figma and design documentation updates.

Figma

We cleaned up the Firefox Design Systems Figma team to include only ready-to-use libraries and files. Work-in-progress materials have moved to a private team for systems designers to continue working on. This clean up will make it easier for people to navigate resources in our Figma team. Please let us know if any files that you were actively using have disappeared.

Font documentation

We released new documentation on fonts. The documentation contains guidelines around how font families work in Firefox, what font families we host and support for designing Firefox UI in Figma, how to access our fonts, how to address Figma font errors, and a list of deprecated fonts for reference.

We'd love to hear your feedback and suggestions on this guide and any questions or concerns regarding fonts.

Deprecation of Figma components

As we continue iterating and improving our libraries, you may begin to notice some changes to existing components. Changes can involve improvements to component properties, and sometimes big changes will require deprecating existing components and replacing them with a new and improved version. There are a few telling signs if a component has been deprecated:

We will communicate deprecating changes to the team via our Newsletter, Slack, and in team syncs.

Deprecated components will eventually be deleted from libraries after 3 months (the duration of a quarter) has passed. Any instances of deleted components will simply lose their link to their respective component library, but won't disappear from your files. We recommend replacing deprecated components for their new versions whenever possible, so designs can refer to the latest and most accurate representation of that component.

🎉 Library updates

We had minor updates and patches to our libraries, and also a few new additions on the mobile end.

Android Components

➕ Added

Added Form and Toolbar.

🛠 Major improvements

iOS Components

➕ Added

Added Text Field and Toolbar.

🛠 Major improvements

👀 What's next

We are actively collaborating with UX designers, engineers, content designers, and product managers to improve our collection of UI styles, patterns, and components, and their respective documentation.

Managing your own library

In order to help designers house and share unique component compositions and patterns tied to features and products they work on, we will be introducing a new system alongside some documentation to help teams maintain and release their own dedicated libraries.

We'll also be introducing an experimental library for designers to house any work-in-progress components that happen during feature work, but aren't live in the product yet. The goal is to provide designers a platform for housing component explorations, but also to have a pipeline from design work into the design system once components are live in Firefox.

Design systems documentation site

We’ve been working on a new design systems documentation site. The new site will be our organization's living source of truth for documenting our design language. We will be maintaining this site and continually releasing updates as we evolve and grow.

We look forward to partnering with UX, product, and engineering on documenting our design system!

New documentation on keyboard shortcuts

We launched new documentation on creating and displaying keyboard shortcuts in Firefox. This was a partnership with the Picture-in-Picture Product Manager, Ania Safko. This documentation is a result of the hard work that the PiP team recently did on displaying keyboard shortcuts throughout their user experience. You can see their work in the latest Nightly. Read the keyboard shortcuts docs.