Component styling

Refine your base Global Branding further

Once you’ve set up your Global Branding, you will have established a solid foundation for your brand. You may now want to take a step further and refine the styling by customizing the appearance of a few key components. This guide will showcase how you can achieve that thanks to the new features of the latest version of the Visualizer.

The current version of the Visualizer widget includes settings for customizing the Button and mobile Tab Header components, two of the most impactful elements for branding your apps. This will accelerate your theming process during the Adopt phase.
For further customization, you can use Advanced Theming in the Build phase with our new setup of Figma variables.

What you’ll need to get started

1. Button parameters

Parameter	Required	Format
Your buttons base color code	Optional	HEX
Your buttons border width	Optional (defaults to 1)	Number (in density-independent pixels)
Your buttons border radius	Optional (defaults to 99)	Number (in density-independent pixels)

A full color palette for all types and states of buttons will stem from the single base color defined. This will ensure all your buttons appear consistently as part of your new theme. Your base color will be more prominently represented in primary buttons as their background fill, whereas lower hierarchy variants will default to appropriate shades of that color for their border, foreground and background colors.

2. Tab Header parameters (mobile only)

Parameter	Required	Format
The Tab Header background gradient start	Optional	HEX
The Tab Header background gradient end	Optional	HEX
The active tab background color code	Optional	HEX
The active tab foreground color code	Optional	HEX

You can also make your Tab Header have a solid background. To accomplish that, just apply the same HEX color code both as the gradient start and end.

1. Customize components

Step 1

Get your parameters ready

Different components offer various customization options related to their structure.

For buttons, you can define a custom style using the following properties:

buttons base color (HEX value)

border width (number)

border radius (number).

Step 2

Switch to "Component styling"

The previous branding steps were completed in the Global branding section of the Visualizer. Now, you'll need to select Component styling to access the component customization features.

You can navigate between these editing areas using the tabs at the top of the widget.

Step 3

Changing components appearance

Edit the default values for each property you need to customize. Once you make changes to any of the available settings, the Visualizer widget will automatically apply them to the relevant variables in your theme.

Step 4

Repeat for each component

Continue editing the styles for each available component in the Component Styling section.

Step 5

Preview your changes

As demonstrated when changing colors or fonts, whenever you set a new value for your component properties, you can immediately preview the effect in the small preview on the right.

2. Export your theme for development

As soon as your component styles are ready, you can go ahead and export your theme again by following the exact same steps you did when applying your Global Branding.

Previous step: Global Branding

Review your basic theme set up in the Global Branding phase.

Global Branding

Start creating a theme for the Backbase products in Figma

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