Welcome to the Figma page of the Primer design system! Figma is used at GitHub as a single source of design, collaboration, and exploration.
GitHub has a Figma team that contains all of our design assets. In Figma, styles and components can be reused across multiple files and projects with the team library feature. With team libraries, you can enable and disable components styles within certain files. This makes it easy for designers to easily access Primer components from anywhere.
Primer uses Figma styles to maintain a consistent look and feel across all of our UI. We have provided styles for color variables as well as our typography. Styles within Figma also map to our styles in Primer CSS, so we can make sure that our designs are consistent with that we code.
Primer uses components for all of our common UI patterns. For components with different states, we use layers or groups within each component to quickly switch between states. For a full list of Primer Components, please see the resources below.
We’ve developed a prototyping toolkit that includes a set of page templates and components to help you get started with exploration and prototyping in Figma. These pages have flexible elements that can be hidden or shown to work for different fidelities. While Figma contains lots of prototyping features, most designers at GitHub use code to prototype in higher fidelities.
Duplicate this Figma file to your own project to use these templates for prototyping or exploration.
All Hubbers 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.
List of current Primer Components:
Check out these places to learn more about Figma and GitHub: