Figma

Welcome to the Figma page of the Primer design system! Figma is used at GitHub as a single source of design, collaboration, and exploration.

Team Library

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.

Enable and disable libraries of components from across your team.

Styles

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.

Each color has 10 variations, creating a spectrum of light and dark shades.
The type system includes bold, uppercase, and small variations for body and header text.

Check out our color guidelines and typography guidelines for more details.

Components

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.

Search for components in the assets menu and drag them onto the canvas.
Some components have multiple states, which you can toggle in the layer list.

Prototyping and Wireframing

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.

Collaboration

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.

Resources

List of current Primer Components:

Check out these places to learn more about Figma and GitHub:

Edit this page on GitHub
1 contributorashygee
Last edited by ashygee on August 14, 2019