On this page
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.
To use a library in Figma enable (install) it from the assets tab (
You can also directly open the team library view via the command palette or with the shortcut
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.
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.Learn more about Figma components