Documents and templates

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

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.
    • Master: 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, master, 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.
  • Figma Basics for Sourcegraphers and Intro to designing with Wildcard DS, which introduce Figma and how we use it in design to anyone who may not be familiar with it.

Docs

Airtable