Night mode, at the touch of a button
Most of July was spent implementing tokens for colour (known as ‘variables’, in Figma). Product Designers are now able to change to night mode in a couple of clicks.
First, there are a few steps to follow to make sure the file being worked on is set up correctly. This is aligned with how tokens are set up in design and code.
Check out the Colour Variables 2023 guide to see how we handle colour moving forward.
👏 Thanks to Laura in the Backpack team for doing some heavy lifting behind the scenes.
Refreshed colour documentation 🌈
The colour documentation has had an update. To find out more about how we manage tokens, primitive colours, or product colours, read our Colour guidelines.
This is just the beginning of working with variables – there are plans to do the same for spacing, radius, typography, and possibly even our new visual design language. Watch this space.
Price documents, released into the wild 💸
We have fresh guidance for the Bpk Price component, which shows the cost of flights, hotels and hire cars in a range of global currencies.
New components
Contributions from team Bellagio
We received a number of significant contributions from our virtual team Bellagio this month. 👏 Here’s what they’ve helped with:
Section header
This is a simple configuration of a section header with an optional subheading and optional button properties.
Chip group
We launched Bpk chip group for Android and iOS. It contains the appropriate spacing and a dedicated ‘Sort and filter’ chip (an optional element). There are also options for to chip group to form as a rail or wrap.
Section header with chips
In Figma we offer a section header with chips in code these can arranged together.
And any other contributions
‘Backpack first’ led to more things being contributed. There are currently tickets open in place for the following items. Go to Backpack Requests in Jira to see everything.
- Chip group (web)
- Flight leg (iOS)
- Nudger row (iOS)
- Card list (all platforms)
- Snippet (iOS and Android)
What’s in progress
Card list
The card list is our ‘Swiss Army Knife’ component. It’s finally in progress and has been in Bpk Beta for some time, as it’s quite a big task for any one squad to pick up.
Thankfully, through the contribution process, the smaller parts have either been built or are currently in construction, and it’s taken a lot of aligning to finally agree on the visual language.
If you’re thinking about laying out a headline with card, there's the card list component. There are optional properties for buttons and chip groups. Cards can also be displayed in a row, grid, rail or stack with optional trailing accessories. What's best, is the component can support any card design passed into it.
👏 Big thanks to Neutron Squad for picking this up for iOS/Android, and Young Ji Lee from Wombat for looking into Web.
New components in Beta 🚧
The nudger row is in Backpack Beta. It’s a small component for displaying nudgers along with labels. It started out as an accessibility improvement for iOS but became a component for all platforms. The nudger was also updated in Figma so there’s one component for desktop and apps.
Deprecated and replaced 👻
All the old night mode components have moved to the Graveyard file. As mentioned, to switch to night mode follow the Colour Variables 2023 guide.
Quick-fire code updates you may have missed 🏃♂️
- New Chip Group component on Android & iOS
- New Select component on Android & iOS
- New Section Header component on iOS & Web (Android coming soon)
- New Nudger Row component on Web
- Added Modal Bottom Sheet variant on Android
- Added Transparent variant for Nav Bar on Android & iOS
- Completed Material 3 migration on Android
- New AI icon ✨
Other Cool stuff 😎
- Figma to 3D in a plugin
- Microsoft changes their default font for the first time in 16 years.
- Japan Airlines wardrobe rental service
Thanks, Adam