Getting started

What are Primer Figma libraries?

The Primer Figma libraries contain UI components and design tokens (styles) that our teams at GitHub use to design GitHub. The components contained within Primer match what is available for developers in Primer React Components, Primer ViewComponents, and Primer CSS.

Installation

To use a library in Figma enable (install) it from the assets tab (option + 2). You can also directly open the team library view via the command palette or with the shortcut option + cmd + o.

Understanding styles

Figma libraries like Primer Primitives install styles for you to use. In contrast to local styles they don't show up in the sidebar. However once you open a selection to choose a color style, text style, etc. you will see the styles from team libraries as well.

To quickly find a style you can use the search box. E.g. use accent to bring up all accent colors.

Understanding components

At GitHub, we have created a set of guidelines that contributors and maintainers can reference when creating and updating components.

Components in our libraries have been built to be easy to understand for consumers. When possible try to keep components small and simple. Avoid advanced methods/tricks if possible.

Variants and component properties

To make components dynamic, we favor component properties over nesting, so users don't have to override parts of a component manually.

Whenever possible use components as they are without detaching.