On this page
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
.
![Screenshot showing the assets tab in figma](https://user-images.githubusercontent.com/813754/221525999-d0278cec-d79c-40fc-8150-532f97549dc8.png)
![Screenshot showing the library overview in figma](https://user-images.githubusercontent.com/813754/221527802-76638b6b-be81-4c87-b3e8-63d543537a9c.png)
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.
![Screenshot showing the style selector in figma](https://user-images.githubusercontent.com/813754/221531315-605cba02-de29-4834-a01b-ef8dc391fe21.png)
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.
Learn more about Figma components