In the following guide, you'll learn how to set up Backbase Design System and journey files within your Figma workspace. This will enable you to start designing with fully integrated, ready-to-use libraries that are aligned with your brand.
When downloaded, the Design System is preconfigured to align with Backbase default journeys. To begin building with Figma for your specific project, it is essential to establish the correct relationships between the Design System and your existing journey files.
The Design System includes a comprehensive set of global design tokens, enabling consistent branding across components and journeys. This guide outlines how to effectively set up and use the Design System within Figma both for internal teams and external partners.
Design System libraries
The Design System is structured using a cascading library model. This approach defines clear hierarchies and dependencies between libraries, allowing for scalable and maintainable design workflows.
Global tokens
Global tokens are shared design values used across multiple components. For example, if several components reference the same primary color (e.g., background/brand), updating that token's value will automatically propagate the change across all dependent components—ensuring consistency and simplifying maintenance.
1. Preparations in Figma
As your first step you will need to download your respective version of the Design System files. You can find them here.
Download Figma files
- Download the .fig files from the official release source.
- All release folders are labelled as [YEAR.MM]_Design Files Release.
Design System files
- 01 Design Tokens
- 02 Web Components & Patterns
- 03 iOS Components & Patterns
- 04 Android Components & Patterns
- 05 Data Visualization
- 06 Templates
- 07 Community Components & Patterns
Journeys
- Digital Assist | Add-ons
- Digital Assist | Essentials
- Digital Assist | Premium
- Digital Banking | Business Banking
- Digital Banking | Retail Banking
- Digital Banking | Shared Banking
- Digital Banking | Wealth Management
- Digital Lending & Onboarding
- Identity
Preparing Figma
As our first step we are going to create a new team and create a few project folders. Only create the folders that are relevant to you.
Create the following folders
- Design System
- Digital Assist
- Digital Banking
- Digital Lending
- Identity
2. Importing files
Open your Design System folder
- Navigate to your existing team in Figma.
- Open the Design System project folder (or your designated journey folder).
Import files
- Drag and drop each .fig file directly into the project folder.
- Alternatively, use the Import option from the Figma menu.
3. Publish library
Start with 01. Design Tokens, then move sequentially through the rest.
Publish files
- In each file, click the Assets panel and the book icon to the right of it.
- Select the This file tab in the modal.
- Click Publish… at the top.
- Click Publish to publish all available components, styles, and assets.
- Repeat for all other Design System files.
This process may need to be done multiple times due to Figma not showcasing all linked files or publishing all changes. You can do this by right clicking on the open Figma tab and clicking on Reload Tab.
4. Link Design System libraries together
The Design System is built with cascading dependencies—certain files depend on others. You need to ensure each file is correctly linked to the libraries it depends on.
Start with higher-level files
- Open 02. Web Components & Patterns.
- Go to Assets > Libraries.
- You’ll see other files listed as dependencies. Ensure that you swap all of these files with your newly published libraries. It can also happen that you see these as missing libraries. Swap these too.
Repeat for remaining files
Repeat above steps for all files. Depending on the amount of linked libraries present in the file you may need to swap out more than one library. Your asset card should now contain your newly published libraries. Similar to the image on the left. You might need to add them to the file.
5. Link libraries in journey files
Now that you have imported and linked the Design System, you can proceed on to the journey files. You can find these in the same location as the Design System ones.
Repeat linking process
To ensure you don't override any journey file changes, you must follow the order of the library linking as shown in the above diagram. Note that any changes that you make in files such as the iOS library will require you to republish the library and to the pull in the updates in all other files.
Start with the most downstream Design System file (e.g., 07. Community components) and work up to 01. Design Tokens. For example:
- 06. Templates
- 05. Data Visualisation
- …
- 01. Design Tokens
This ensures all dependencies resolve correctly due to the cascading structure.
Setup complete
Your environment is now fully configured. All Design System libraries have been successfully published and linked. The journey files are now connected to your local versions of the Design System, ensuring proper inheritance of styles and components. With everything in place, theming and token functionality will work as expected throughout your workspace.
Next steps
Now that your Figma environment is set up, you're ready to bring your brand to life. Start by exploring our Visualizer to define your global branding and fine-tune component styling across platforms. Once your theme is finalized, proceed to apply it to your Backbase development environment. Use the export tools provided to implement themes seamlessly across Android, iOS, and web, ensuring a consistent and on-brand user experience throughout your digital products.
Theming
Explore our Visualizer for Global Branding and Component Styling to bring your brand to life.
Global Branding
Start creating a theme for the Backbase products in Figma
Component Styling
Refine your base Global Branding further
Illustration Theming
Adapt Backbase's out-of-the-box illustrations to your brand
Applying themes
How to export and apply a theme to your Backbase development environment.