As of the 2024.09-LTS release, the Backbase product has been migrated to semantic color tokens, marking a significant advancement in theming and development efficiency. For customers, this migration is mostly optional, though Figma files must be updated. The Android, iOS, and Web platforms will continue to operate with deprecated tokens for now, requiring no additional work. The deprecated tokens will be removed with the 2025.04 release. Including LTS support, that gives customers 2 years to migrate.
Benefits of migrating
Additional flexibility for theming
- Reduced custom theming overrides: The new token system offers enhanced flexibility, potentially eliminating the need for custom screens or journeys due to design limitations. This allows more customers to leverage the Backbase out-of-the-box journeys.
- Dark mode support: While Backbase doesn't yet support dark mode out-of-the-box, the new tokens facilitate project-level dark mode implementation, with an OOTB solution expected in the future.
- Multiple theme support: Switching themes at runtime is reliable and straightforward, enabling tailored experiences for different user segments, such as regular and premium users.
- Accessibility compliance: By defining tokens with sufficient contrast, the Backbase product is ensured adherence to WCAG 2.2 AA contrast requirements. Using the token guidelines, it is also much easier to achieve compliance for custom screens and journeys.
Faster development of new features
The new tokens are consistent in name and behavior across platforms, making their usage more intuitive and reducing the need for extensive communication between design, development, and QA teams.
Enabling Jetpack Compose and SwiftUI
Although Jetpack Compose and SwiftUI libraries are not yet available with the 2024.09-LTS release, the new token system is designed to support these technologies. This alignment will ensure seamless theming across all technologies used in an app.
Phases and costs
With a lenient transition period, the migration can be planned in phases, each unlocking more benefits and having distinct costs. Each phase builds on the previous one.
Phase 1: Migrating Figma
Estimated cost: 5 days to learn the concepts + 4 hours per custom journey
Deprecated tokens are no longer available in Figma. Designers must migrate to the new token system to continue development. This involves creating a new theme and updating each custom journey.
Phase 2: Using semantic tokens for new custom development
Estimated cost: None
On Android, iOS, and Web, semantic tokens can be used to develop new custom screens without additional work, as they are automatically populated by the deprecated tokens.
Learn more about semantic tokens
Phase 3: Achieving more flexible theming in Backbase journeys
Estimated cost: 1 day per app
Configure the semantic tokens for more consistent and flexible theming of Backbase journeys. Designers can easily export logo, color, and font tokens from Figma by using the Visualizer, ensuring a quick handover to development.
Learn how to apply a theme on Android
Learn how to apply a theme on iOS
Learn how to apply a theme on Web
Phase 4: Achieving more flexible theming in custom journeys
Estimated cost: 0.5 - 2 days per custom journey
Complete the migration by updating all custom screens and journeys to use semantic tokens. This involves a simple find-and-replace task for developers, although large journeys can take some time due to the number of tokens involved. If any custom tokens were added to the project, this is also the time to decide whether to keep them or migrate them to semantic tokens as well.
Learn how to migrate on Android
Resources
Below, you can find additional documentation and resources to help you navigate the world of design tokens. The documentation includes guides for engineers and designers, as well as high-level information about our design tokens at Backbase.
Semantic tokens
Discover all foundational concepts to get you started with our new semantic tokens architecture.
Background colors
Semantically setting the background of your UI
Foreground colors
Meant for generic content
On-background colors
Pairing colors to ensure accessible contrast ratios
Border colors
Consistently coloring borders of UI elements
Focus colors
A specific highlight for interactive elements
Link colors
Special colors for interactive text elements
Migration
Learn more about how to migrate to the latest version of our design tokens (semantic tokens).
Introduction
The first step when migrating your project setup to the new token architecture
Migration in Android
Migrate your Android setup to the new token architecture introduced in the 2024.09-LTS release
Migration in iOS
Migrate your iOS setup to the new token architecture introduced in the 2024.09-LTS release
Migration in Web
Migrate your web setup to the new token architecture introduced in the 2024.09-LTS release