File structure

The Pajamas UI Kit is comprised of multiple Figma files that organize separate, but related concepts. Each publishes a library of styles and components that can be enabled in your design files.

  • ๐Ÿ“™ Component library: The main file for design components that are used in Pajamas and in all other files. The library is published as "๐Ÿ“™ Component library" and enabled for all team design files.
  • Beta: Design tokens: Design token implementation in Figma, currently in open beta. How can I use design tokens in Figma? Published as the "Beta: Design tokens" library.
  • Data Visualization: Components, styles, and charts used within GitLab. Published as the "Data Visualization" library.
  • GitLab Product Icons: The main file for product iconography. The library is published as "GitLab Product Icons" and enabled for all team files.
  • GitLab Product Illustrations: The main file for product illustration.Published as the "GitLab Product Illustrations" library.
  • Annotations and utilities: Shared resources to annotate and present Figma artifacts. Published as the "Annotations and utilities" library.
  • Product pages: Components, layouts, regions, and page templates used within GitLab. Items herein are not globally used throughout the product and not included in the main component library. Published as the "Product Pages" library. โš ๏ธ This file was deprecated in 17.4.

In addition to the links above, files are available from the GitLab Product Design community page and the project repository.

Fonts

The UI kit files make use of GitLab Sans, and GitLab Mono. Refer to the type fundamentals for more information. The fonts are enabled in Figma automatically for GitLab team members, and are available to download in this package.

Plugins

It may change in the future, but at the moment we donโ€™t use plugins for critical actions or capabilities to avoid making any part of the design process reliant on plugin updates or functionality. Rather, we believe that each user should determine which plugins to use for their own workflow.

Last updated at:ย