In the following guide, you'll learn how to adapt Backbase's out-of-the-box illustrations to your brand's CVI. This will allow you to easily create a visually consistent experience throughout your products, without needing to provide a completely new set of visual assets yourself.
What is Illustration Theming?
Illustration Theming is the process of adapting Backbase's default illustrations to match your brand's visual identity using the tools provided by the Backbase Design System, as part of the Adopt Theming phase. It offers the simplest way to customize illustrations across your applications—without the need to fully replace them with your own photography or other custom visuals.
The current scope of the Illustration Theming process is limited to updating the default illustration colors globally. More advanced customizations—such as modifying the illustration content, adjusting their overall style, or customizing individual assets—would require additional effort during the Build delivery phase.
Illustration Theming is the third step of the Adopt Theming phase, following Global Branding and Component Styling. It completes the process of aligning Backbase’s out-of-the-box products with your brand’s look and feel using the available features of the Backbase Design System.
Design tokens and Illustration Theming
Illustration Theming is achieved through the token setup in Backbase's Design System. All illustrations in Backbase's default visual asset collection are colored via color tokens. This allows customizing all illustrations globally from a single source of color truth. For this reason, it's helpful to familiarize yourself with Backbase's Design System token architecture before getting started.
If you're not familiar with Backbase's Design System token architecture (introduced in the 2024.09-LTS release), the following article will help you get a basic understanding of the core terms and concepts we'll use in the following sections: 🔗 Design tokens.
Illustration tokens in Backbase's Design System are a specialized set of tokens. They differ from those used during Global Branding or Component Styling in the following ways:
- Illustration tokens are not mapped to primitive tokens from the Primitives or Primitives-Premium collections. The _illustration token group is self-contained, meaning all tokens within it are either assigned raw HEX values or reference other, more general tokens within the same group. You don’t need to add specific primitive color tokens to the Primitives collections to use them in your illustrations—you can define a custom color palette for illustrations directly within this group.
The _illustration/color token group defines the base colors used in illustrations by creating aliases for a palette of raw HEX values.
The _illustration/background token group defines background colors for illustrations by creating semantic aliases that are mapped to more basic tokens from the _illustration/color, _illustration/shade, and _illustration/tint groups.
- Illustration tokens are isolated by default, meaning they aren’t directly linked to any color tokens used in Global Branding or Component Styling. Changes made to your default theme—whether through the Design System Visualizer or directly in the Variables panel during Advanced Theming— won’t affect illustrations. However, you’re free to override this isolation by mapping your illustration tokens to values from the Primitives or the Theme collections if needed.
- Illustration tokens are semantic, even though they aren’t part of the main three-tier token architecture used for Global Branding or Component Styling. They are organized and named according to conventions that help clarify the purpose of each group:
- color: contains the core colors that form the base illustration color palette. All other illustration tokens are derived from these.
- shade: includes darker variations of the base colors, primarily used for creating shadow effects.
- tint: contains lighter variations of the base colors, mainly used for lighting effects.
- skin: offers a range of skin tones for human characters and portraits.
- hair: includes various hair colors for use in human characters and portraits.
- background: defines tokens used as background colors in more complex illustrations.
- tones: provides a set of dark tones for use when deeper or more intense colors are needed.
What you'll need to get started
|
Item |
|---|
|
Figma Design Tokens 2.0 (2025.03-LTS or later) |
|
Your brand's color guide |
Design Tokens (2.0) file
This is the file where the Backbase Design System token architecture is set up. If you have already covered the previous steps of Adopt Theming, you will already have the appropriate Figma set up and know where to find the file. If you haven’t and need help with setting up your Figma environment to get your copy of the Backbase Design System up and running, read our Get Started guide first.
Your brand’s color guide
You'll probably want your illustration colors to align, at least to some degree, with the brand colors defined in your brand's Corporate Visual Identity. Be sure to have the guidelines and materials provided by the bank or credit union's brand department handy before you begin.
The illustration color palette supports up to five base colors, plus shadow and light shades for each. However, Backbase's default illustrations only use three of those five color. Before theming your illustrations, it's important to have a clear idea of which base colors from your brand you want to include in the illustration palette. You'll have the opportunity to fine-tune these choices later in the theming process.
1. Getting started
Duplicate the Design Tokens (2.0) file
If the project environment and files were not provided to you, you'll need to make your own copy of the Design System files for the release. You've likely already completed this step during Global Branding and Component Styling, so you can refer to the documentation for those earlier steps if you need guidance on duplicating the files.
Open the file and create a branch (optional)
After duplicating the file into your workspace, open it. If you're not familiar with how branching works in Figma, we recommend checking out Figma's documentation on branching.
Working in a branch lets you safely experiment with different token settings without impacting your main library or other users. Once you're happy with the results, you can request a review from your peers before merging your changes back into the main file and publishing.
Locate the illustrations
While theming your illustrations, you can see how your changes affect the actual visual assets directly within the same 01. 🔶 Design Tokens (2.0) file you're editing. Just make sure you're on the 🖼️ Illustrations page in that file as you work through the next steps. This page contains Backbase's default illustration library, allowing you to navigate through the entire set and review your changes in real time.
The library consists of over 85 assets (with new additions added quarterly) organized into seven categories:
- Graphs
- Attributes
- Scenarios
- Assets
- Portraits
- Characters
- Backgrounds
Launch the Variables modal
From any page look for the 🎚️ Open variables icon on the default Properties panel on the right side of Figma's UI. Clicking this will open Figma's native Variables modal (if you need help accessing it, refer to Figma's documentation). This is where most of the following Illustration Theming process will take place.
2. Edit your illustrations theme
Backbase's token architecture supports up to four themes for every color in the setup. Currently, these are used to define two illustration modes in Backbase's default illustration library: dark and light (with identical values for Default Light and Premium Light, and for Default Dark and Premium Dark). You can use this system to create up to four differently colored illustration modes..
Translate your brand's colors into an illustration color palette
Start by selecting the base colors you want to apply to your illustrations (up to five core colors, as explained above), and set their values using variables 1 through 5 within the _illustration/color group. Also, choose your base light and dark colors. Watch how these changes affects your illustrations in real time.
Customize characters and backgrounds
You might not want the skin and hair colors of character illustrations to be closely tied to your brand's colors. However, you can customize them as needed to achieve the overall tone you're aiming for. Up to four different sets of skin and hair colors can be configured to give your illustrations a certain level of diversity.
Finish by customizing the background and tones variable groups, which by default use a mix of brand-neutral and branded color values in the out-of-the-box illustrations.
3. Preview your illustrations theme
As mentioned earlier, illustrations will update automatically as you adjust the variables. Once you've finished editing, take a close look at all of them to ensure no further fine-tuning is needed. If you decided to work in a branch in step 1.2, you can now proceed to merge your changes back into the main file.
4. Export your themed illustrations
You can export your illustrations either from the branch you worked in or directly from the main file. Just go to the Safe Area section on the 🖼️ Illustrations page of the 01. 🔶 Design Tokens (2.0) file. The components there are already set up with the correct asset names and default export settings in Figma.
Keep in mind that not all illustrations available in the Backbase Design System are necessarily used in your project. To save time, you may want to apply the following final steps only to the subset of illustrations used in your product. These steps vary slightly depending on the platform:
For Android
- Make a copy of the illustrations you need.
- Remove all Layer blur effects from the Effects section of Figma's properties panel (blur is applied only on floating shadows). Android currently doesn't support blurring in SVG assets.
- Replace all masked gradients with regular gradients. Instead of using a linear gradient mask on a flat-colored layer, apply the colored linear gradient directly to the shape layer. Android does not currently support masking in SVG assets.
- Export the selected illustrations as SVG files and share them with your development team.
- Convert the SVG files to the “vector drawable” format using the Asset Studio tool in Android Studio.
- Configure your theme to use the new illustrations if needed. MDS uses its own naming convention for StateView illustrations, so one of the following approaches can be applied:
- Rename your newly exported assets to match the ic_state_view_[…] naming convention used in Android code. Check the default assets in the theme and use the same names for the corresponding new assets (if you’re exporting only StateView illustrations, a preconfigured preset is available next to the State View Presets component in the 04. 🔶 Android Components & Patterns file of the release). You can also follow the naming convention listed in the table below if renaming manually.
- Map StateView items to the new illustration file names in the app’s theme.xml file. The entries will look like this, where ic_new_asset_name is the file name of the corresponding asset, without any file extension:
<item name="stateViewNoResultsFoundIcon">@drawable/[ic_new_asset_name]</item>
For iOS
- Export the selected illustrations as PDF files and share them with your development team—no renaming needed.
- Rename your newly exported assets to match the ic_state_view_[…] naming convention used in iOS code. Review the default assets in the theme and apply the same names to your new assets (if you’re exporting only StateView illustrations, a preconfigured preset is available next to the State View Presets component in the 05. 🔶 iOS Components & Patterns file of the release). You can also follow the naming convention listed in the table below if you’re renaming your illustrations manually.
- Add the new images to your app’s main bundle asset catalog. MDS will then automatically use them instead of the default assets.
StateView illustration naming convention
The table below shows the naming conventions for StateView illustrations on each platform (🤖: Android, 🍏: iOS), along with the corresponding illustration asset from Figma (🖍) that each one uses.
|
|
|
🖍️ ic_scenario_satellite 🤖 ic_state_view_no_wifi 🍏 ic_state_view_no_wifi |
🖍️ ic_graph_donut 🤖 ic_state_view_loading_failed 🍏 ic_state_view_loading_failed |
|
|
|
🖍️ ic_scenario_search 🤖 ic_state_view_no_results 🍏 ic_state_view_no_results |
🖍️ ic_scenario_mobile_banking 🤖 ic_state_view_no_accounts 🍏 ic_state_view_no_accounts |
|
|
|
🖍️ ic_scenario_coin_empty 🤖 ic_state_view_no_transactions 🍏 ic_state_view_no_transactions |
🖍️ ic_asset_calendar 🤖 ic_state_view_no_scheduled_transfers 🍏 ic_state_view_no_scheduled_transfers |
|
|
|
🖍️ ic_asset_money 🤖 ic_state_view_no_history 🍏 ic_state_view_no_history |
🖍️ ic_scenario_lock_error 🤖 ic_state_view_accounts_hidden 🍏 ic_state_view_accounts_hidden |
|
|
|
🖍️ ic_asset_credit_card 🤖 ic_state_view_no_cards 🍏 ic_state_view_no_cards |
🖍️ ic_asset_email 🤖 ic_state_view_no_messages 🍏 ic_state_view_no_messages |
|
|
|
🖍️ ic_asset_messages 🤖 ic_state_view_no_conversation 🍏 ic_state_view_no_conversation |
🖍️ ic_asset_bell 🤖 ic_state_view_no_notification 🍏 ic_state_view_no_notification |
|
|
|
🖍️ ic_scenario_mobile_banking 🤖 ic_state_view_no_contacts 🍏 ic_state_view_no_contacts |
🖍️ ic_scenario_mobile_success 🤖 ic_state_view_success 🍏 ic_state_view_success |
|
|
|
🖍️ ic_scenario_mobile_error 🤖 ic_state_view_failure 🍏 ic_state_view_failure |
🖍️ ic_scenario_approval 🤖 ic_state_view_nothing_to_approve 🍏 ic_state_view_nothing_to_approve |
|
|
|
🖍️ ic_asset_coffee 🤖 ic_state_view_no_workspaces 🍏 ic_state_view_no_workspaces |
🖍️ ic_asset_light_bulb 🤖 ic_state_view_no_favorites 🍏 ic_state_view_no_favorites |
|
|
|
🖍️ ic_scenario_lock_error 🤖 ic_state_view_no_access 🍏 ic_state_view_no_access |
🖍️ ic_asset_alarm 🤖 ic_state_view_update_madatory 🍏 ic_state_view_update_madatory |
|
|
|
🖍️ ic_asset_bell 🤖 ic_state_view_update_recommended 🍏 ic_state_view_update_recommended |
|
For Web
- Export the selected illustrations as SVG files and share them with your development team, no renaming needed.
- Replace the files in the project web assets folder(s).
Read additional development documentation on configuring the Illustration component.