In the following guide, you'll learn how to create a fully compatible theme for OOTB (out-of-the-box) Backbase products that can be easily exported and shared with your developers. It's the fastest and simplest way to customize Backbase's products with your brand.
You’ll be updating a fixed set of global brand parameters and replacing visual assets by those provided by a customer. A supported list of primitive design tokens are made available to customers via the Backbase Visualizer. The complete updated set of tokens is then exported from Figma to a native mobile and web theme and automatically cascades to all UI components and journeys.
What you'll need to get started
Before diving further into this guide, you’ll need to collect your brand’s assets like logos, fonts and colors (what we refer to as “global brand parameters”). You can find all the required assets to get you started in the list below:
Brand assets
|
Asset |
Format |
|---|---|
|
Square logo suitable for light surfaces (1:1 aspect ratio) |
.svg |
|
Square logo suitable for dark surfaces (1:1 aspect ratio) |
.svg |
|
Wide logo suitable for light surfaces (e.g. 4:3 aspect ratio) |
.svg |
|
Wide logo suitable for dark surfaces (e.g. 4:3 aspect ratio) |
.svg |
|
A Google Font name or your brand’s font files |
.ttf or .otf |
Global brand parameters
|
Asset |
Required |
Format |
|---|---|---|
|
Your brand’s primary color code |
Required |
HEX |
|
Your brand’s neutral color code |
Optional |
HEX |
|
Your brand’s info color code |
Optional |
HEX |
|
Your brand’s success color code |
Optional |
HEX |
|
Your brand’s warning color code |
Optional |
HEX |
|
Your brand’s danger color code |
Optional |
HEX |
1. Getting started
The steps below demonstrate how you can get access to a fully working Visualizer environment so you can easily start creating your own bespoke themes for your Backbase products.
2. Changing logos
The steps below demonstrate how you can quickly and easily change all the logos.
Replace the default logos
Once your logos are imported, you can replace the default Backbase logos with your brand's logos.
Start by selecting the first variation of your logo and cut it using ⌘ + X.
Then, locate the matching logo component (On Light or On Dark; Wide or Square) and replace the immediate frame child layer —named "Logo"— by pressing ⌘ + Shift + R.
3. Changing colors
The steps below demonstrate how you can quickly and easily change all the colors.
Get your branding parameters ready
Gather your brand's primary color, along with any specific neutral, info, success, warning, or danger colors if available. These are usually found in your brand's logo or design manual.
You'll need to look for the HEX value of your colors to accurately import them to Figma.
Changing brand colors
In the widget UI, you can start by selecting the Brand color field and enter your brand’s primary color in HEX format. This will update key UI elements like buttons, links, and headers.
To adjust neutral tones, select the Neutral color field and input your custom value, which will modify the background surfaces in your UI.
Changing intent colors
To modify the info, success, warning, or danger tones, follow the same steps as before. Select the relevant field in the Intent colors section of the widget UI and input your custom HEX value. This will adjust the colors for contextual elements like error messages or alerts.
4. Changing fonts
The steps below demonstrate how you can quickly and easily change fonts.
Before you proceed in the next steps, make sure you're using a licensed font that is properly installed and validated on your machine. You can refer to the articles below for help:
Installing fonts on MacOS
Installing fonts on Windows
5. Export your theme for development
Once you are satisfied with your brand's theme setup in Figma and have previewed how the final application of the theme will appear in the actual product, you can export the design values directly from Figma and share them with your developers using the Visualizer widget.
Share the theme files with development
You’ve completed the Global Branding process, and successfully created and exported a fully eligible theme for Backbase products!
Share the theme.zip file so that the theme can be applied to the end product. You can share the links with instructions below with development as well.
Frequently asked questions
These errors usually stem from issues in your Figma configuration. The Figma library is the source of truth. Review your tokens and Visualizer setup to ensure everything is properly configured and exported.
Start by verifying:
- The version of the Visualizer widget you’re using.
- The token structure in your Figma variables table.
- Proper naming conventions and mappings.
This happens when the JSON schema is outdated due to an old Visualizer widget version in your Figma file. Figma doesn’t auto-update widgets, so you may still be using a v.1.0.0 Visualizer. Refer to our compatibility table here.
- Insert a new instance of the latest Visualizer widget.
- Rename Primitives-default to Primitives.
- Add a new variables collection named Metadata with two string values:
- tokenVersion (version of the Visualizer)
- figmaVersion (your Figma release version)
You can read a full guide here.
Next step: Component styling
Now that you've created your basic theme set up, it's time for you to refine the appearance of certain key components.
Further documentation for developers
For all further documentation, guidelines and instructions on how to apply the exported theme to each platform you can follow the links below.
Apply a theme on Android
Theme your Android app according to your branding
Apply a theme on iOS
Theme your iOS app according to your branding
Apply a theme on Web
Theme your Web app according to your branding