Asset Manager

If you want to have your app to look professional, you must have a consistent look and feel throughout your user interface. The easiest way to achieve that is to learn how to use the Asset Manager.

You can open the Asset Manager by either clicking the bookmark button at the bottom of the left-side pane in the playground or by pressing CMD+SHIFT+Y on a Mac or CTRL+SHIFT+Y on Windows.

The Asset Manager allows you to keep track and reuse font configurations, colors, and even appli groups.

Asset Manager

Creating a style guide

Before we’re able to add items to the Asset Manager, we need to have them on the screen. A good practice is to create a small style guide with all the colors and typography you’re going to use on your first screen. By placing it outside the screen boundaries, you can make sure it is visible to you but not your app users.

Remember to enable Show Offscreen Elements (keyboard shortcut: o) in the app settings to be able to view the style guide.

Style Guide

Adding colors

With the style guide in place, click on each colored square and click on the plus button on the color section of the Asset Manager. This will add that color to the Asset Manager and you’ll be able to reapply it to any element by selecting the element and clicking the color on the left pane.

Adding fonts

Just like what we did with the colors, we can click each of the text samples and click the plus sign in the fonts section to record that font configuration. Selecting an element in the playground and clicking the font on the Asset Manager will apply those settings.

Fonts and colors added to the asset manager

Adding groups

If you see yourself reusing the same collection of elements over and over again, you might want to consider making them into a group and adding them to the Asset Manager as well. This way, you can easily add them to future screens instead of recreating them from scratch or copying and pasting.

Group added to the Asset Manager

And one of the coolest features is that the group you add to the components section stays in sync with across all your screens. You can update the original group and they’ll all reflect the changes.

This chapter was last updated on Fri 14 Apr 2023 14:15:16 BST