File structure

The Pajamas UI Kit is comprised of multiple Figma files that organize separate, but related concepts. Each publishes a library that can be enabled in your design files (some are enabled by default). Dependencies are only the libraries used directly in creating assets and don't include those used for organization or documentation.

• Design tokens: Design token implementation as variables in Figma along with chromatic and brand color styles. Published as the "Design tokens" library and enabled for all team design files. How can I use design tokens in Figma?
• 📙 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.
• 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.
• Patterns and Page Templates: Shared global resources that includes components and design assets owned by feature teams, maintained in a shared space due to their wide usage. The file also contains globally useful abstractions and combinations that promote a more consistent UI. Published as the "Patterns and Page Templates" library, although many assets are only available as "sticker sheets" to copy/paste.
• Data Visualization: Components, styles, and charts used within GitLab. Published as the "Data Visualization" library.
• Annotations and utilities: Shared resources to annotate and present Figma artifacts. Published as the "Annotations and utilities" library.

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

Dependencies

• 📙 Component library uses Design tokens, GitLab Product Icons, and GitLab Product Illustrations.
• GitLab Product Illustrations uses Design tokens.
• Patterns and Page Templates uses Design tokens, 📙 Component library, GitLab Product Icons, and GitLab Product Illustrations.
• Data Visualization uses Design tokens, 📙 Component Library, and GitLab Product Icons.

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

We use the Pajamas Figma Plugin (internal) to keep design tokens in sync with variables, list variables used in a selection, and list deprecated items. Otherwise, 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.