Skip to content
Firefox DevTools UX Community
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Contributing to Firefox DevTools UX

Welcome, and thanks for your interest in contributing to DevTools UX! Our team only recently started working with design contributors, so things may be a bit disorganized initially. I’m happy to hear any feedback or ideas on improving the onboarding process. —Victoria

First Steps

  1. Join the friendly Firefox DevTools Slack community!
    • The new #ux channel is a place for us designers to hang out, ask questions, post mockups for feedback, and offer feedback for other designers’ mockups. We’ll be communicating with everyone through this channel.
    • Feel free to introduce yourself or talk about general DevTools topics in #general
  2. Check out the Firefox DevTools design system (You can check for issues there too).
    • This design system is a fork from the main Firefox design system
    • We've started work on a Sketch library! Let us know if you want to help with this.
  3. Sign up for a GitHub account if you don’t already have one and message @victoria on Slack to be added to our team.


  1. Claim a UX issue by commenting in it. Anything tagged good-first-issue is a great place to start, especially if you're new to design. Feel free to ask on Slack for help in choosing a first task.

  2. Once you have a task, it’s great to do a little research.

    • Get ideas from similar UI in DevTools and Firefox. Download Firefox Nightly to view the latest version of the UI. When possible, try to reuse already existing colors and other visuals in DevTools/Firefox.
    • Ask questions in Slack. Developers in panel-specific channels can help with questions about user needs and behaviors. You can also ask your own developer friends for ideas!
    • See what Chrome, Safari, and Edge are doing for similar features. Also check out other development tools, like Atom and Xcode.
  3. Start working on the design. There are several ways to approach this, depending on the task.

    • Make a mockup. This could involve working in an existing Sketch file, modifying a screenshot, or recreating a mockup if you're interested in helping with our Sketch libraries. This is great for more involved visual changes that would be too much to code via the other methods. For small changes that really need to be tested on real content, this might not be practical. For more complex UX tasks, a low-fidelity wireframe is a great way to start.
    • Inspect the toolbox via the toolbox-inspector to try out small CSS changes. This can be fraught with trouble due to the usual Inspector problem of no export/persistence features (it's in the plans!), but we use this all the time to quickly visualize a change.
    • Building and running Firefox (instructions below), and trying CSS changes right in the codebase. It can be tricky to get started, but is especially useful because then you can seamlessly move on to submitting a patch :).
  4. Post high-res screenshots in the relevant github issue and on #ux to get feedback. Make iterations as needed.

  5. Get a final sign-off from @victoria to send your design into development mode!


  • Take screenshots of every stage for your portfolio :)
  • As a final step, icons should be saved/re-saved using Illustrator and follow the SVG guidelines for better performance. (A Mozilla person can help if you don't have a copy of Illustrator.) Other SVG tools can be great for this too.

Implementing Your Own Design

Do you know HTML and CSS? If so, you can make your own design a reality! The friendly engineers of Firefox DevTools can help mentor you through the process of submitting a good patch. The biggest first step is building Firefox. Here are some guides:


Mozilla People


  • @victoria - Senior DevTools UX
  • @Matt Croud - DevTools UX
  • @yzen - Accessibility mentor
  • @erica - Developer mentor
  • @gl - Developer mentor

Project people:

  • @bwinton - DevTools UX Manager
  • @Martin Balfanz - DesignTools PM (Inspector, Style Editor, Accessibility, Canvas, Shader…)
  • @digitarald - DevTools PM (Console, Debugger, Network…)
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.