Firefox Design Systems
Happy New Year
Hey team,
Cheers to a new year. Here's the latest from Design Systems:
In 2021, the Firefox Design Systems team goal was to focus on setting and documenting Firefox UI foundations within our team's design tool of choice, Figma.
The foundation of an application's user interface are all of the required elements used for building the complete user experience. Elements include color and typography styles, for example, and other "no-brainer" common components used to build typical interfaces, such as buttons and text inputs.
Last year, the Firefox foundation libraries released were:
New Year, New Release
Since our first release, we have been improving Firefox Desktop Components, and working on foundational styles for mobile apps. In this second release, we’re announcing a new Firefox Desktop Component library and a Firefox Mobile Styles library.
🎁 What’s New
  • Firefox Desktop Components
    • This library is starting out with 19 components you can use to build UI for the Firefox Desktop Browser.
    • Button, Button Group, Checkbox, Context Menu, Divider, Dropdown, Form Field, Header, Icon Button, Label, Menu, Modal, Panel, Radio Button, Select, Site Preview, Split Button, Text input, and Toggle Switch.
🎉 Library Updates
  • Firefox Desktop Icons
    • Now with OS file type icons & new MacOS cursor options.
  • Firefox Desktop Styles
    • Had a non-breaking update to type styles for MacOS & Windows.
  • We deprecated Firefox Desktop Simple Components, and are releasing all components under one package, the Firefox Desktop Components library.
👀 What's next?
  • Growing Firefox Desktop Components.
  • Releasing Core Firefox UI components such as the Chrome under a new library, Firefox Desktop UI.
  • Mobile Component libraries for Android and iOS.
Year in Review...
🏆 Most used Figma library award goes to...Firefox
The foundation library with the most use has been Firefox Icons. Launched June 25, 2021, Firefox Icons has been used in files worked on by 14 distinct Figma teams.
🏆 Most used Figma component award goes to...the Search icon
The most used icon is the Search icon with over 2,000 instances used.
💡 Brush up on your design systems skills
Brush up on your design tokens skills with a Design Tokens 101 Lightning Talk from November 2021.
Knowledge Sharing
📗 Firefox Design Systems 101
Learn the role of design systems within Firefox during our UX weekly sync on January 26th!
We look forward to describing the role of design systems within the UX org, going over the work we have released so far, our roadmap, and leaving time for questions.
By attending this session, you’ll be learning how design systems can best support your work, and how we can work together.
Tips
🔥 Crystal shares pro Figma techniques
Watch Crystal talk Figma Tips & Tricks in this 5min Lightning Talk.
🔥 Figma timesaver shortcut
Shift + i opens a components standalone window where you can drag-and-drop components from any library, including local components, into your files.
🌭 Made with ketchup on top.
🌍 #firefox-design-systems on Slack, firefox-design-systems@firefox.com