Preparation of Profile Screen Design

In this learning content, we will prepare the mobile screen design where the information of the employee logged in to the application is transferred in detail.

First, let's examine the completed user profile screen.

There is a header at the top of the profile screen. In the header, there is a Label element with the screen name and an exit icon that allows you to exit the application.

Below the header, there is a summary card structure with the information of the user logged in to the application.

Let's prepare a design similar to the profile screen we examined together.

1. Open the Screens panel from the left side and hover over the Dashboard screen.
2. Duplicate the screen through the detail menu.
3. Update the name of the incoming screen to Profile via the detail menu.
4. Click twice on the Dashboard text in the Header and update the text to Profile.
5. Delete the card structure under the header and the rows that contain the table.
6. Drag and drop a Row element under the header and convert it to a single-column structure.
7. Drag and drop a Row element into the column. Convert the Row to a two-column structure with the Properties panel so that the left column is smaller than the right column.
8. Set the background color of the Row element to White and add the Radius preset style from the Border area.
9. Add an Image element in the first column.
10. Add a temporary image representing the user image to the Image element and select Fill from the ImageFit field.
11. Then, with the Image element selected, enter the Width value and Height value as 84 Px from the Styling panel.
12. Add Radius_Full ready-made style to the Image element from the Border field.
13. Select the column that is the parent of the Image element. Center it horizontally and vertically.
14. Add a Vertical Stack element in the column on the right.
15. First, drag and drop a Label element into the Vertical Stack. Replace the text content of the Label element with a temporary name.
16. Add the H3 preset style to the Label's Text style.
17. Then, add a Horizontal Stack inside the Vertical Stack.
18. Add an icon and a label element to the Horizontal Stack.
19. With the icon element selected, select the icon from the icon library and change the color of the icon from the styling panel.
20. Then, replace the Label content with a temporary department name.
21. Select the H6 preset style as the text style for the Label with the department name.
22. Duplicate the Horizontal Stack containing the department information.
23. Change the icon in the new Horizontal Stack. Update the color of the icon you changed. Then, replace the Label text with a temporary Title.
24. Select the Horizontal stack element via BreadCrumb and Duplicate it.
25. Replace the icon in the newly added Horizontal Stack and do a color edit.
26. Double-click on Label and enter a temporary email address.
27. Select the Horizontal Stack element and Duplicate it again.
28. Then, change the icon and icon color.
29. Enter a temporary phone number in the Label.
30. Finally, Duplicate the horizontal Stack element with the phone number information
31. Replace the icon in the incoming Horizontal Stack with an icon representing the date of birth and change the color of the icon.
32. Enter a temporary date of birth in the Label.
33. Finally, change the color of the Dashboard and Profiler texts in the Tabbar.

That's it!