Using our libraries

Find out how to use our Figma folders.

The system

Understanding how Skyscanner’s Products are built takes a little time. Travellers only experience the final website or app, which are different codebases behind the scenes. The codebases aren’t listed here, instead we’ve chosen to structure our design libraries to match the Product Design GOST.

The core libraries are switched on by default in Figma, all the other local libraries are off by default. You simply need to switch these on to access the components.

Core Libraries

Backpack Foundations

These are styles native to Figma. Typography, colours, grids and spacing.

Backpack Core Components

Home to our core components that you can use to build more complex patterns.

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 core components once available in at least one codebase.

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 you might require for a design.

Annotation

The annotation file has 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.

Team libraries

Global Components

Large re-usable patterns that can be used on any page in Skyscanner. They’re composed on Backpack core components and foundations. e.g: our Navigation and Search Controls are global components.

LCM, Rail, Flights, Care Hire & Hotels pattern libraries

To make things easier, Libraries are set up by vertical, not codebase. There are dedicated libraries that best reflect the verticals and teams working on them. These libraries are built on top of Backpack Core Components and Foundations.

SAM Components

For those who don’t know, SAM stands for Skyscanner Ads Manager. This dedicated library is for designing with SAM Components. These libraries are built on top of Backpack Core Components and Foundations.

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.