Design System Definition and Application
Previous steps
To define the Design System, the UX Designer must have previously prepared the UI kit and obtained the client's approval.
Who participates in the design system definition and application stage?
The UX designer and the Implementer are involved in the three steps in this stage. The third and fifth steps are mandatorily executed by the UX Designer. The fourth step is shared between the UX Designer and the Implementer - the designer sets the assets and theme, and the implementer works on the layouts.
Where do you work?
To work on these steps, you must use the Design System document (UI Kit appears in the first section) and the Layouts document in the repository available in Figma. Follow the links to access them and read Tasks execution below to learn which tasks you must perform.
The third stage includes:
defining and setting the Design System,
setting up different elements in Studio, and
setting the screens flows template.
Setting up Studio involves accessing the environment created for the project and start configuring the fundamental entities that define the appearance of the app screens. It includes setting up:
Assets
App theme - including its variables and styles. The Veribank theme must be used and have it installed in the Studio environment created for the project.
Note
Styles are sets of variables that can be applied to the components in each of the app screens.
Layouts
In this step, the UX Designer must execute the following tasks:
Important
Depending on the team, these tasks may be executed by either the UX Designer or the Implementer. If the Implementer works on them, the UX Designer must oversee their work and check that all the settings are correctly configured.
Access the Studio environment of the project.
Upload the assets. Depending on the asset type, they may be exported from the UI kit section of the Design System document, or they might be stored already in the device. To upload assets:
Go to Menu > Design > Assets.
Double click the first folder that appears in the list. The folder contains the assets of that app branch only.
Click Upload asset.
Click File Upload.
In the file browser, look for the asset and click Open.
In the modal that opens:
The name cannot be modified; Click Save.
In the Include in Application section, select Always;
In the Tags section, enter a tag with the asset format and press Enter (for example, svg).
Click Save.
The asset will be uploaded and appear in the assets list.
Important
Assets upload must comply with the patterns specified for assets. Read Understanding Assets to learn more.
Configure the variables. This includes the following:
Go to the Themes page (Menu > Design > Themes).
Find the app theme prebuilt for your project. The prebuilt has default values that must be modified according to the Design System definitions.
Open the theme.
The theme opens in the Variables tab. Complete the attributes in the Color, Grey, Font, Border, Radius, Shadow, Margin and Padding subsections according to the definitions in the Design System document.
Warning
If a variable is not defined in the Design System, you must not configure it in Studio - this means that its configuration must remain empty.
Configure the styles that will be applied to the components in the app screens.
Depending on the complexity of the styles defined in the Atomic Components subsection, styles will be configured in the Styles, Custom and CSS tabs of the app theme.
Note
The variables that cannot be configured in the Styles tab are specified under the DEV Info and DEV CSS frames in each of the atomic components' configuration page in Figma. This information will be useful to configure the Custom and CSS tabs as required.
This document explains the configuration of basic styles available in the Styles tab. This includes the following:
In the app theme, click Styles to open the tab.
Complete the Button, Checkbox, Flex, Input, Panel, Radio, Switch and Text subsections according to the definitions in the Design System document.
Warning
If a component style is not defined in the UI kit, you must not configure it in Studio - this means that its configuration must remain empty.
Then, the Implementer has to configure the layouts selected for the project. This includes the following:
Review the layouts section in the UI kit document prepared by the UX Designer. The implementer must check the information below and then configure any required changes:
the layouts selected;
the sizes and units of measurement of each layout area; and
the breakpoints defined for the different resolutions;
Access Studio and go to the Layout templates page (Menu > Design > Layout templates).
Duplicate the prebuilt layout templates and define the name.
Start working on the layouts, one by one, and follow these instructions for web apps:
Open the first layout defined by the UX Designer. For example, open the Initial1 layout.
Find the area you need to modify and double click it, for example, the header section. In the Attribute modal that opens, modify the Size field according to the data defined by the UX Designer: enter the number. Then, click Accept.
The CSS File field will be prebuilt with the breakpoints applicable to each layout.
To learn more about layouts and the CSS file configuration basics, read Configuring Layouts in Studio.
Save the layout changes.
In the case of mobile apps, you will only have to configure the General Mobile content and then define the screen structures when building the app screens.
Warning
Implementers must not modify prebuilt templates and must always work on duplicated versions.
Understanding Assets
Depending on the asset format, the UX Designer may upload them in Figma or keep them in their own device. Then, they will export them from the UI kit Figma document, if applicable, and upload them in Studio as assets, so that they are available for implementers to start with the app building process.
Before uploading the assets in Studio, the UX Designer must make sure that the assets are saved in their devices following specific use patterns related to the assets naming and format. Refer to the sections below to learn more.
Assets patterns
The names of resources are similar to the names of styles. Below is a list of best practices applied to the names of assets exported from Figma and then uploaded into Studio.
Important
Assets names must not include special characters, the letter ñ, spaces or capital letters. Names must be separated with _ and the specific naming defined for each type of asset.
Write the name in English and be as descriptive as possible regarding the asset purpose.
Write the name in lowercase letters and underscores must be used to divide words. Avoid the use of articles or prepositions. An example of this mistake would be: icon_on_star.
Configuring Layouts in Studio
Once the layouts are defined during the second stage of the design system definition (UI kit generation), the implementer must configure them in Studio.
Layout templates are preconfigured in the project's Studio environment - this means that the implementer won't have to create them from scratch. Instead, they have to duplicate the pre-built templates and modify the sizes in the duplicated ones. Then, they have to make modifications according to the specifications in the Design System document.