New pages
Money and currency 💸
Do you know how to design for your dollars to your dirhams? We’ve added how we handle Money and currency when writing to the Content area of Backpack. We’re also working on detailed guidelines for the Bpk Price Component. Watch this space.
New methods
Branched components 🌿
This won't affect anyone using Figma components, but we’ve changed how we edit existing Bpk Figma Components.
Rather than working directly in Backpack Figma, we now temporarily move a single BPK component to its own file. We then publish that as its own library (so you can access it) and make a branch. All the edits happen in the branch to provide a safety buffer to stop unwanted breaking changes.
Anyone can make edits to a component this way and it's completely safe. We just need to make the branch for you. Changes will be reviewed and approved in 1-2-1 sessions.
If you'd like to know more, reach out to Choon who recently rebuilt the entire Inventory Car Card 🚗 this way. Or ask Adam for a demo – it's not scary, trust us, it’s the way forward 😉
Latest updates page
We recently added a latest updates page that outlines all of our communication channels, all in one place. Take a look to learn more about the meetings you could join or how to self-serve.
Figma Essentials
Have you looked at our Figma essential training yet? This will take you from the basic interface to complex auto-layouts and constraints. It's best if you join a session but it can also be used as self-serve training.
👏 Massive high five to Giles for taking the time to set up and run the first session. The second session is on Wednesday 12th July. Please ask for an invite.
New Bpk Components 🎒
Carousel
If you need to swipe through images on a Card horizontally we have a solution for that. Built for iOS and Compose, to sit inside Inventory Cards.
Style changes 👩🎨
Navigation Bar transparency
iOS and Android navigation have new styles. This allows you to place the navigation over an image or map. This was originally for the React Native migration in Car Hire and Hotels where this pattern is used over maps, but could be used for any screen where a background fill isn’t wanted.
👏 Thanks to Daniel for patiently waiting for this to appear.
Switch for Android
Anyone following Material 3 styling updates will have noticed this changed last year. We’ve held off making technical and visual updates until recently. We’re upgrading to M3 on a component-to-component basis, Bpk Switch was a recent change where this has been completely rebuilt. As such, it gets the M3 styling with our intended colour choices.
iOS and Web are the same, Android is very similar but still aligned to Material so it feels at home on any Android device.
Info banner
The design work is complete for the info banner. You can see the updated branch compared to the old design. This is with the squad this week to design the API, but we’re still looking for a squad to contribute to all the changes. Can you help? Let us know!
👏 Thanks Kami, Luca, and Alex for aligning on all of this, and especially Luca for running user tests on this.
Select Open
What happens when you hit a fieldset input on Web, Android, and iOS? Select appears, but this is different on every platform due to native restrictions. We’ve added everyone one of those options to Bpk Figma now. Android and iOS will follow in code very shortly as part of our React Native Migration.
👏 Thanks Mathilda for bringing this to our attention.
Nearly ready 🙏
Bpk bottom sheet for web is nearly ready in code.
👏 Thanks Kami and Luca for helping with all of this.
Quick-fire code updates you may have missed 🏃♂️
- Android switchrebuild and restyle
- Deprecated snackbar and toast components
- Added Android bottom sheet to Backpack
- Made some accessibility improvements to calendar
- Created hotelstar rating component for UIKit
Figma’s Config 🤯
It would be impossible to have missed all the major updates Figma dropped last week at Config. Here are our recommended reading/watching.
- Config opening session
- Guide to Variables
- Create and manage variables
- Overview of variables, collections, and modes
What’s next for us? 🎒
We’re planning on adding Variables (the new way to manage colour) as Primitive and Semantic tokens, and applying this to all of our components. Then Modes for Day and 🌛 Night Mode. You'll never have to create a Night Mode page manually again.
Once Colour is complete, we’ll start adding variables for Spacing and Radius.
Watch this space.
Cool stuff 😎
- Framer launched their AI web design tool. It can generate a full website built in React in minutes. Just be careful to not fade away.
- Meanwhile, Nikon has bashed AI in their Don't give up on the real world campaign.
- A digital bookshelf of graphic design manuals, available for free. See the 1987 Apple Logo Standards.
- Are you old enough to remember your first Sony Walkman? Check out the archive of the pre-cursor to the iPod. Enjoy the retro website.
- Runaway.com, a crazy front-end build for financial tool. How did they secure that URL?
Thanks,
Adam