New documentation ✍️

Tokens, components and patterns

We’ve published an article that walks you through our standard naming definitions for tokens, components, patterns and libraries. Take a look!

Chips

Backpack’s hotly-anticipated guidelines for chips are finally here. Our chip component may be simple in form but its versatile nature calls for clear guidelines on how to use them for both design and content. If there’s something that doesn’t meet your needs, let’s have a chat.

👏 Thanks James from Content Design for all the rewrites, and everyone in Product Design for aligning around Chips.

Overlay

Our dedicated 16 non-destructive overlays have been shipped for Compose, iOS and Swift UI to match what we had for Web.

What seems like a simple way to grade images in Figma, was fully re-imagined in every codebase. Lots of work went into aligning all these platforms. Please use 🎒Bpk Image or 🎒Bpk Overlay to get these for free, choose a preset, and it’ll be replicated in code when specced what’s being used.

There are long term plans to add this to SAM so we can apply the styles in our CMS. Watch this space.

👏 Thank you to Ollie, Janna, Vitality and Gert-Jan from Koala for crafting these.

Improvements to ownership at a glance

Inventory Cards

After a reorganisation of inventory cards within Agreed Patterns, we’ve added a quick visual cue that lets everyone know who owns what. In theory, one person owns a single card and Backpack owns the underlying components and general construction.

If you’re trying to make a change to inventory cards for cars, for example, speak to Choon from the Cars team. Similarly, Choon can make any changes to this card and you’ll all get the updates.

Wrappers are complicated as many people are assigned to them because of vested interests.

New Bpk Components 🎒

Flight leg

The long-awaited flight leg component is here. We've had it since Skyscanner started but it was never centralised as one component. It shows details of a flight journey from an origin to the final destination. Available for Compose and iOS.

👏 Thanks to Michal, Mahdi, Pontus and Athila from Sonic for contributing.

Published style changes 💥

Slider

Our web and app sliders have looked quite different for a while. A little investigation into Figma usage showed we weren’t using the web ones in our designs. We’ve now got one visual style for all platforms.

Upcoming style changes 👩‍🎨

The popover has had an overhaul; the main visual difference is the divider is being removed and we’re deprecating unnecessary options with text-based close call to action. Scheduled to be contributed in the next month.

👏 Thanks to Alex for suggesting these changes.

New Patterns ⚡️

Partner Quality Score

We’ve added ⚡️ Rating – PQS as a pattern. After a few conversations, we decided this couldn’t be a 🎒 Bpk Component as it’s too specific to use anywhere else. But seeing as the construction is fairly simple (an Icon + Rating Component) it makes sense to live in Patterns Agreed.

It’s also been included on the rating page in Backpack as an instance so it's easy to find.

👏 Thanks Kami from Product Design for pushing this one.

Deprecated & Replaced 👻

Accordion

Deprecated

👻 BPK Accordion had to be deprecated as it was built long ago. It’s been visually updated in Figma and Code.

🥳 New component

🎒 BPK Accordion has been rebuilt entirely in Figma.

The line appears in the correct place

You can toggle the line on/off

You can toggle the icon on/off

There’s an ‘on dark’ style available

This supports any Bpk text style in code, update that directly in Figma and everything will resize on its own

We’ve created a few pre-fab ⚡️ Accordion layout options to drop into your designs

👋 A special mention to Mungo in Enablement for working so efficiently on this contribution.

Quick-fire code updates you may have missed 🔫

Adopted accordion style changes for the Web

Adopted new slider design on the Web

Added flight leg component for Compose and Swift UI

Added rating component for SwiftUI

Added BpkPanel component for SwiftUI

👋 Thanks for Dennis and Jeff from Sonic, and Roy from Blue Dolphin for contributing to some of these to Backpack.

Thanks,
Adam

March 2023