Skip to content

Figma

Screenshot of the Primer profile within the Figma community

Primer is a part of the Figma community and can be found using its Figma handle of @primer

Design teams at GitHub use Figma as the single source of truth, collaboration, and exploration. Access to the GitHub Figma organization is currently only available to members of the GitHub team. Public access to any shared libraries and files is available from the Primer Figma Community page.

Team libraries

GitHub uses Figma to distribute Primer through team libraries. Each library covers a different part of the system, allowing a designer to only use what's needed. Any team within GitHub's Figma organization can create and distribute their own team/project specific libraries, but all of the core asset libraries for Primer can be found in the Primer team's "Core libraries" project. They include the following:

  • Primer Primitives: All of the color, type, and spacing styles used within Primer.
  • Primer Web: UI components used to design for GitHub's web interfaces.
  • Primer Mobile: UI components used to design for GitHub's native mobile platforms.
  • Octicons: GitHub's custom icon library.

Interface templates

screenshot of repo home page and email template

Example templates from Primer Interfaces and Primer Email

In addition to asset libraries for components and styles, you can also use template libraries to jump-start the design process.

  • Primer Interfaces: Templates for common views and UI patterns found within GitHub's web product.
  • Primer Email: Templates used to design product emails for GitHub.

Collaboration

Screenshot demonstrating collaboration in Figma using Figma comments

Example communicating in Figma using comments

All GitHub members have read-only access to all GitHub design files and edit access to files within their team. You can leave Figma comments to provide feedback and use issues to document design exploration, track decisions and progress. The design team values incremental correctness, so share early and share often.

Support

GitHub's Figma organization is currently maintained by GitHub's Design Infrastructure team. For any questions or comments please reach out to us either in our Slack #primer channel or by submitting an issue in the github/design-systems repo. The Design Infrastructure team also offers weekly Figma office hours on Tuesdays, which are hosted by @ashygee. Please reach out to them for the calendar invite.

For additional support specific to Figma, please reference the Figma Help Center.

Edit this page on GitHub
3 contributorsmamusoyailiashygee
Last edited by mamuso on August 10, 2021