A roundup of what’s changed in design and code.
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!
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.
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
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, Backpack owns the underlying components and general construction.
If you’re trying to make a change to Inventory • Cars, for example, speak to Choon. Similarly, Choon can make any changes to this card and you’ll all get the updates.
Wrappers are complicated, many people are assigned to them because of vested interests.
New Bpk Components 🎒
The long-awaited flight leg component is here. We must'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 💥
Our web and app sliders have looked quite different for a while. A little investigation into Figma usage showed we weren’t really using the Web ones in our designs. We’ve now got one visual style for all platforms.
Upcoming style changes 👩🎨
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 CTA. Scheduled to be contributed in the next month.
👏 Thanks to Alex for suggesting these changes.
New Patterns ⚡️
Partner Quality Score
We’ve added ⚡️ Rating • Partner Quality Score a pattern. After a few conversations, we’d 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 👻
👻 Bpk Accordion had to be deprecated as it was built long ago. It’s been visually updated so 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 FlightLeg 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.