[en] UI Kit Generation
[en] Previous steps
[en] To generate the UI kit, the UX Designer must have previously created the project's documentation repository and obtained the brandbook that represents the client's brand identity.
[en] Who participates in the UI kit generation instance?
[en] The UX designer is in charge of preparing and defining the UI kit document.
[en] Where do you work?
[en] To work on this step, 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.he UX designer is in charge of preparing and defining the UI kit document.
[en] Step 2 - UI Kit Document
[en] The UI kit (User Interface kit) is an initial approach to the look and feel of the app interface, where the visual guidelines are presented and validated with the client. It includes a collection of pre-designed elements to streamline the design process, ensuring consistency and efficiency.
[en] The UI kit consists of:
[en] Brandbook details: the brand identity (logos), fonts, color palettes, icons, animations, images and illustrations.
[en] Assets: Resources such as images, video files, audio files or icons, that are part of the design and aesthetics of the app. For example, the images related to the client's logo, banners or icons that are part of the client's brand.
[en] Basic components: text inputs, text labels or buttons. These components do not show functionalities or behaviors, but just how they will look like in their basic form. Then, based on this information and once the client approves the UI kit, the designer defines the atomic components in the Design System and configures the app theme with the styles for each of them (that can be applied when the components are configured in the app screens).
Nota
[en] For all of the above, the accessibility check is required.
[en] Reference screens: basic screens that don't show functionalities but are prepared to demonstrate the basic design aspects of the screens and their interaction.
[en] Layouts: Structures that define how visual elements are arranged in a screen or a part of a screen. This definition is based on the project requirements and the purpose of the app to be built.
[en] The different layouts available are defined in the Layouts document that is part of the project's documentation repository. This document specifies each layout purpose and use; layout areas; area sizes and size ranges allowed to make changes; the design of the layout in its responsive capacity together with breakpoint details; and the configuration of each layout in the three levels (if applicable).