Using Figma

  • Figma is the main design tool used by the design team.
  • We use Figma for designing, prototyping, and for handoff.
  • We also use another tool called FigJam for whiteboarding and brainstorming.
  • Even if you’re not a designer, you may need to interact with Figma or FigJam files for various reasons.
  • Figma has great documentation for anything you might need.
  • There’s an example file that you can peruse: Figma for Sourcegraphers

Finding Figma and FigJam files:

  • You’ll probably get to Figma files from links in GitHub or Slack.
  • If you want to revisit a file that you’ve looked at recently, the Figma homepage (figma.com) shows your recently viewed files in chronological order.
  • Within the Sourcegraph organization, there are also projects. We use projects to identify different product areas like Code Insights and Extensibility.
  • There’s also a search bar on the Figma home page.

Figma terminology:

  • Figma files are organized into pages
  • Each page has “frames,” which can be any size

Commands to know:

  • Figma documentation on keyboard shortcuts
  • + and - to zoom
  • Move around the canvas with your mouse wheel, space + click + drag, two-finger trackpad scrolling
  • C to show comments