Core libraries

Backpack Foundations

These are styles native to Figma. Typography, Colours, Effects (layer styles). As Figma improves these options, we will too.

Backpack Components

This file is home to anything built in Figma. These are alphabetically ordered.

Backpack Beta

These are components ready for designers to use which don't have a code counterpart. Your squad might have to contribute the component if you want to use it. Beta components will eventually move to the main Backpack components library.

Graveyard

When a component is deprecated, it goes to the Graveyard. We add a 👻 symbol to the component name and suggest an alternative component in its description. This is reviewed bi-annually until components are permanently deleted.

Icons

We have lots of icons, so these live in their own library. 16px and 24px versions are available.

System UI

These are a collection of Android and IOS keyboards, nav bars and status bars; basically anything that is native to these platforms.

Annotation

In the annotation file there are a handy collection of accessibility markup tools, dimensions indicators, labels, notes, pointers, and anything else you might need to put information on your work in a nicely organised way.

🌛 Night Mode Colours

This is a dedicated library for designing with Night Mode Colours.

Team libraries

SAM Components

For those that don’t know, SAM stands for Skyscanner Ads Manager. This dedicated library is for designing with SAM Components. These aren’t in Backpack.

Other folders

Workshop

This is a constantly evolving workspace. It gives our team greater visibility of the initiatives which are currently being worked on. If work exists elsewhere, it makes sense to move it here.

We expect workshop files to be large, and they may contain many sub-pages.

This also acts as a ‘work-in-progress’ space for preparing components before they go into Bpk Beta. We leave all pages and discussions in these files for future reference.

Using our libraries