Software and systems

Design systems

Documents and templates

We have several handy templates that we use to get going quick on new work.

Issues

Figma

Helpers & Tooling project includes:

  • Project Template, which you can duplicate to start new Figma files. This template is pre-structured with pages that support async work and maintain Figma files as a source of truth. Designers can use the pages within this template to their discretion on a file basis:
    • Cover: a project thumbnail used to identify files in Figma. Use the underlying cover symbol to change the stages (draft, in progress, done, deprecated) as the project progresses.
    • Main: used for final, usually high-fidelity, mockups. The template showcased on this page can be used for grouping designs in bigger projects.
    • Prototypes: used to separate interactive prototypes that may include stages and variants that designers don’t want to showcase on the main design pages. These prototypes can be actively used for usability testing, so be cautious in making changes.
    • Wireframes: used for the low-fidelity mockups.
    • Buddy review: used for reviewing the in-progress work by other team members or designers. Buddy reviews are often used when a designer would like feedback from an individual(s) before sharing with a larger group. Using the buddy review section of the project is helpful for simplifying review for others, because it focuses on just the elements for review.
    • Playground: a place for the designer to store exploratory or in-progress mockups that don’t need to be reviewed.
    • Redlines: used for optional detailed measurements. Note that Figma has built-in redlines that should be used during implementation—use manual redlines only when absolutely necessary. It is not a recommended handoff method for the whole project.
    • Responsive layouts: used for XS-L mockups based on our grids. Responsive layouts are used not only for mobile devices, but for when viewing Sourcegraph in 1/2– or 1/3-width browser windows on desktops devices.
    • QA: used to facilitate the communication between designer and developer during the design QA of the implementation. You can add screenshots and annotations to explain what corrections you’re requesting. Remember to add link to page to the PR.
    • Archives: used for past designs, not needed in the review process.
    • Research: used for research-related artifacts.
  • Basic Project Template, which you can duplicate and use for smaller issues. It includes only essential pages: cover, main, buddy review and playground.
  • Project card provides a high-level summary of the project: lead designer, issue, RFC, status and reviewers. Place the card on the page with the latest designs. Remember to update the project status in the card, as well as the Figma file title, as the project progresses.

Docs

Software

Product and design

  • Figma is our primary design tool for all levels of fidelity and interactive prototyping.
  • Excalidraw is our tool for collaborative low-fidelity sketching and ideation.
  • ProductBoard is where product teams aggregate all user feedback.

User research and data

  • Usertesting.com is our tool for unmoderated user research, which includes participant sourcing.
  • Calendly is our tool for scheduling user interviews and sessions where it’s easier for the other participant to choose a time that works for them.
  • Looker is our data warehouse so we can connect different data sources and analyze anything we need to.
  • Amplitude is where we track and visualize events on the product.
  • Dovetail is a database-like tool that can be handy for managing data in user research.