Firefox Design Systems
Happy spring โ˜€
Hello again from the design systems team. As a reminder, this is a monthly newsletter with team updates.
Here's the latest from Design Systems:
We are so stoked for how many new UXers have been joining Firefox ๐Ÿ˜Š. We are even more stoked about all the feedback the UX team has been giving us. We are focusing on keeping the communication flow open between the systems team and the Firefox UX org.
We are around to help with UI, visual styles, design patterns, and Figma. You can ask us questions in #firefox-design-systems, firefox-design-systems@mozilla.com, or you can dm @jules directly if you prefer.
With that being said, thanks to your feedback we are now super aware of how disorienting all of the Figma library options are.
We are working on improving the user experience of using Firefox libraries. Thank you for your patience and for putting up with so many libraries being available right now.
Why are there so many libraries, though?
The more Figma teams you join, the more libraries may be available to you. If you are in teams that have spinned their own libraries, you will unfortunately have an overwhelming list of libraries.
Figma loads all team libraries in one little window. The window has a search input that we recommend using, but the UX itself in that panel is pretty bad because it's rather hard to consume a long list of libraries that are only divided by very tiny and faint team titles.
To make things more complicated, team admins have access to a feature that let's them turn on libraries that should be the default for everybody. Therefore whenever you make a new file you may have noticed you have some libraries turned on by default.
Ahhh OK! But what is old and what are the new Firefox libraries?
The old libraries we are referring to come from a team called "Firefox Libraries & Components". The new libraries live in a team called "Firefox Design Systems".
Search for "Firefox Design Systems" in Figma and you should see our team (image below). If you haven't joined this team yet, please do, this is the official team for current and future libraries.
PS: Any other libraries you may find in your teams that are labeled after MR1 and MR2 from 2021 are also considered old.
What do I do with all these libraries???
While our new system's libraries get populated, we need to leave these old libraries/design systems Figma teams around so people can still consult these more mature and therefore more complete UI Kits.
We will keep releasing components in a monthly basis, so eventually by the end of this year you won't need to refer to old libraries anymore!
We will be visually deprecating old libraries so that you will be able to tell they are around for reference while the new system and its libraries continue to expand this year.
We will be turning off deprecated libraries as the default and turning on our libraries as the default.
What does a deprecated library and team look like?
Deprecated libraries and teams' names will start with a warning emoji โš ๏ธ and the word DEPRECATED.
๐ŸŽ Whatโ€™s New
  • Icon request
    • You can request an icon from our team through a new Slack workflow in #firefox-design-systems. Click on the "+" button left of the textarea in that channel in order to access the "Request an icon" workflow :) please feel free to give us feedback on whether this workflow works for you!
๐ŸŽ‰ Library Updates
  • Desktop
    • Desktop Components v2.0.17
      • Weโ€™ve gone up several patches as you can see from last newsletter. Patches are released to improve functionality or fix mistakes.
  • Mobile
    • Android Components v1.1.0
      • The first release of Android Components includes App Bar Top and Buttons.
    • Android UI v1.0.0
      • New! The first release of core Firefox Android UI includes: Firefox Menus, Firefox Bookmarks, Firefox History and Firefox Settings.
    • iOS Components v1.0.0
      • New! The first release of iOS components includes: Button, Divider, List, Menu, Navigation Bar, Search, Segmented Control, Status Bar, Switch, and Tab Bar.
    • iOS UI v1.0.0
      • New! The first release of core Firefox iOS UI includes: Firefox Menus, Firefox Bookmarks, Firefox Downloads, Firefox History, Firefox Reading List, and Firefox Settings.
๐Ÿ‘€ What's next?
  • Still coming in Q2...
    • Desktop
      • Chrome UI v1.0.0 (unique component combinations that are specific to the Firefoxโ€™s frame - what we internally call the "Chrome")
      • Desktop Native Components (components unique to MacOS and Windows that are part of the Firefox UX)
    • Mobile
      • iOS and Android components: Card, Text Field, Toolbar.
Figma Component Testing
Tips
A correction...
  • Team email
    • We have released newsletters in the past with the incorrect team email in the footer (oops!). From now on you will see the correct email which is firefox-design-systems@mozilla.com.
๐ŸŒญ Made with ketchup on top.
๐ŸŒ #firefox-design-systems on Slack, firefox-design-systems@mozilla.com everywhere else.