Customize Design Elements
In this section, we will discuss how to customize the design elements of the UIKit Design System. You can customize the following aspects:
Customize Color Tokens and Select Theme
Customize Typography and Fonts
Customize Foundation Colors
The foundation colors allow you to harmonize UIKit designs with your brand's distinctive colors. Adjusting primary and secondary hues will transform your application's appearance to match your chosen colors.
Steps to Change the Foundation Colors
Click on the Local Variables button, located in the right-hand panel of your Figma interface.
From the drop-down menu, select the Foundation option.
Modify the
HEXvalues of various colors, such as primary and secondary, to match your brand's color palette, as shown in the following example:
After adjusting the color values, preview your designs to ensure sufficient contrast between the background and foreground elements. Refine the colors as needed to ensure everything appears as intended. The following example shows the changes in your application when you change the colors:
Before the Color Change:
After the Color Change:
Customize Color Tokens and Select Theme
Color tokens apply the colors from the Foundation_color palette to your design elements. This keeps your design consistent and ensures that the same colors are used throughout the application UX screens.
If you wish to change your color scheme, such as updating brand colors or making accessibility improvements, you can do so in Foundation colors. This will automatically update the color tokens used in your design across all instances where those colors are used.
Color tokens also play a role in maintaining both light and dark themes. Each color token is assigned a value for both light mode and dark mode.
Steps to change the Color Tokens
Select the Local variables button located within the right-side panel of your Figma interface.
From the drop-down menu, select the Tokens option, as shown below:
Select colors from the foundational color palette and apply them to designated UI elements such as Primary Buttons, Surfaces, Icons, Text and so on. This ensures their compatibility with both light and dark modes. After this, verify that the contrast between the background and foreground is appropriate and that the overall appearance fits your expectations.
After configuring color tokens, choose any frame on the art-board and utilize the mode changer feature within Figma in the right-hand menu to switch between Light and Dark modes.
The following is an example of how changing color tokens changes the design elements:
Customize Typography and Fonts
The UIKit uses SF PRO as the default font family for both iOS and Android. You have the option to provide a different custom font, which will replace the default font family style.
Steps to Change the Font Type and Font Design
For altering the font family used in all the Figma designs, we suggest that you utilize the Easy Font Swap external plugin.
Once you have completed the plugin installation, follow these steps:
Click on the Figma icon at the top left corner.
From the drop-down menu, select the Plugins option.
Choose the Easy Font Swap option from the available options.
You can either select a specific frame or select all frames, on which to apply your font swap. The Easy Font Swap plugin will display the default font currently in use. Select the default font.
From the Replace font with drop-down list, pick the font you wish to use and click the Apply New Font button.
Preview the font changes before confirming them.
Customize Icons
In the Foundation_Icons section, you'll find the list of icons used across the application design. You can change any icon from this set to a different icon and use it across the application.
Steps to Change the Icons
Right-click on the icon that you wish to change. From the right-click menu, choose the Go to main component. This will redirect you to the icon component section.
Double-click the icon shape located inside the icon container. Remove the current icon and replace it with your new icon. Be careful that you do not alter the container or its name. Below is an example.
After replacing the icon shape, go to the upper-left menu on the Figma Designs, select the Assets option, and then click on the Publish button.
Once published, the new icon will replace the previous one in all instances. The following is an example of the design change when an icon is updated:
Customize String Variables
Under the Foundation menu in the UIKit, select the String_Variables option. You will find a list of the default strings used in the UIKit, which can be customized to your preferences. You can replace the default key values in the Default UI Kit section with strings that are consistent with your brand's tone and language.
Change only the values and do not alter the variable names.
Steps to Change the Strings
Choose the icon for Local variables located within the right-side panel of your Figma interface.
Select the String Variables option from the dropdown menu within the local variables menu.
The String Variables section contains default strings provided by UIKit, which can be customized by the customer. Override the strings in the Default UI Kit section with customer-specific strings.
Below is an example of string change on the OptinWidget:
Before String change
After String change
Customize Graphics
In the Foundation_Graphics section, you'll find the list of graphics used across the application design. You can replace any graphic from this set to a different graphic and use it across the application.
Steps to Change the Graphics
Right-click on the graphic that you want to change, and choose Go to the main component option from the options. You will be directed to the graphic component section.
Double-click the image shape located inside the graphics container. Remove the current graphic content and insert the new graphics into this container. Please be sure not to alter the container or its name.
After replacing the image, navigate to the upper-left menu in the UIKit design, and select the Assets option, and click on the Publish button.
Once published, the changes should reflect in all instances where this graphic was used previously. is an example of how UX changes based on the above graphics change.
