This page should list all elements that are used in Figma designs to construct pages/screens.
Information about status should be kept up to date, so squads can rely on information listed on this confluence page.
Text styles
Style id | Status | Description |
|---|---|---|
h2 | Ready | Header 2 across app |
body1 | Ready | Body 1 across app |
subtitle | Ready | Subtitle across app |
caption1 | Ready | Caption 1 across app |
noNameWelcome | Ready | Style used on welcome page without name specified |
noNameCheckbox | Ready | Style used on TnC checkbox without name specified |
noNameRadioGroupExpand | Ready | Style used on onboarding ID type select screen “expansion toggle“ without name specified |
Insets/Dimensions
Id | Status | Description |
|---|---|---|
xsmall | Ready | 4 |
small | Ready | 8 |
medium | Ready | 12 |
large | Ready | 16 |
extraLarge | Ready | 24 |
xxLarge | Ready | 32 |
button | Ready | Generic insets on action buttons |
formInput | Ready | Add bottom space to input fields |
onboardingHeader | Ready | Adds insets to onboarding header element |
rootContent | Ready | Adds paddings to side of root content of page |
newId0 | In progress - branch_name or squad adding this value | (just example of value, that is in app code, but only in working branch) |
newId1 | Missing | (just example of value, that is in UI but not yet in app code) |
Components
Component name | Status | Preview |
|---|---|---|
Action button (style) | Ready |  |
Text button (style) | Ready |  |
Safi appbar | Ready |  |
Switch |   | |
TextField | Implemented in Transactions |  |
Phone field | In progress - onboarding |  |
SMS OTP field | In progress - onboarding |  |
Passcode field (keyboard + indicator) | Ready |  |
SegmentedControl |  | |
TabsControl (any of the designed) |   | |
Dropdown | Ready |  |
Date & Time field | Ready |    |
Credit card widget | Ready |  |
ScrollableActionMenu |
|  |
Picker |  | |
Slider | Ready |  |
Slider with turning point | Ready |  |
Tab Bar | Ready |  |
Numbered double text row | Ready |  |
Icon double text row | Ready |  |
Icon text row | Ready |  |
List radio tile | Ready |  |
Two column summary block |  | |
Label value row (optional icon and action icon) |  | |
Product header (same for account, loan and pockets) PocketDetailHeaderTitle | Ready |  |
Product action list (naming to be decided later) PocketDetailButtonBar | Ready |  |
Scaffold (top bar) |  | |
Bottom navigation |
|  |
Shortcut Menu |
|  |
Shortcut Sub-Menu |
|  |
Menu - Navigation Drawer |
|  |
Sub Menu |  | |
Progress half circular | Ready |  |
Dashboard Loan Pocket |
|  |
Dashboard Overdraft |
|  |
Dashboard Info | Text and button can be re-arranged |  |
Transaction History Item as in Card Transaction History & Payment List Recent Transaction. | Ready |  |
Bottom Drawer as in passcode field and can be expected to be used with any journey that need bottom sheet widget with custom content. |   | |
Radiobutton Menu (This doesn’t look like a reusable component, especially because it appears in different variants in the various mockups) |  | |
Checkbox | Ready |  |
AmountInput TextInput for amount, with build-in available amount validation | Ready |  |
SM-565Attachments:
image-20220517-093612.png (image/png)
image-20220517-093716.png (image/png)
Screenshot 2022-05-17 at 13.08.18.png (image/png)
Screenshot 2022-05-17 at 13.10.49.png (image/png)
Screenshot 2022-05-17 at 13.08.33.png (image/png)
Screenshot 2022-05-17 at 13.08.58.png (image/png)
Screenshot 2022-05-17 at 13.10.33.png (image/png)
Screenshot 2022-05-17 at 13.10.38.png (image/png)
Screenshot 2022-05-17 at 13.11.16.png (image/png)
Screenshot 2022-05-17 at 13.11.25.png (image/png)
Screenshot 2022-05-17 at 13.12.28.png (image/png)
Screenshot 2022-05-17 at 13.03.33.png (image/png)
slider.png (image/png)
slider-turning-point.png (image/png)
slider-turning-point.png (image/png)
tab-bar.png (image/png)
image-20220517-123628.png (image/png)
image-20220517-123759.png (image/png)
image-20220517-123911.png (image/png)
image-20220517-123944.png (image/png)
image-20220517-124034.png (image/png)
image-20220517-124202.png (image/png)
image-20220517-124324.png (image/png)
image-20220517-124411.png (image/png)
image-20220517-124437.png (image/png)
image-20220517-124613.png (image/png)
image-20220517-124832.png (image/png)
image-20220517-124947.png (image/png)
image-20220517-125051.png (image/png)
Main dashboard - floan activated.png (image/png)
Main dashboard - floan activated.png (image/png)
Screen Shot 2022-05-18 at 11.48.28.png (image/png)
Screen Shot 2022-05-18 at 11.48.35.png (image/png)
Screen Shot 2022-05-18 at 11.44.47.png (image/png)
Screen Shot 2022-05-18 at 11.40.57.png (image/png)
Screen Shot 2022-05-18 at 11.54.45.png (image/png)
Screen Shot 2022-05-18 at 11.54.40.png (image/png)
Screen Shot 2022-05-18 at 11.58.36.png (image/png)
Screen Shot 2022-05-18 at 16.33.37.png (image/png)
Screen Shot 2022-05-18 at 16.33.37.png (image/png)
Screen Shot 2022-05-18 at 16.34.58.png (image/png)
Screen Shot 2022-05-18 at 16.39.09.png (image/png)
Screen Shot 2022-05-19 at 09.51.18.png (image/png)
image-20220519-080019.png (image/png)
image-20220519-080019.png (image/png)
Screen Shot 2022-05-19 at 15.03.58.png (image/png)
image-20220519-080529.png (image/png)
image-20220519-080719.png (image/png)
image-20220519-081309.png (image/png)
image-20220519-081548.png (image/png)
image-20220519-083204.png (image/png)
Screen Shot 2022-05-19 at 15.42.20.png (image/png)
Screen Shot 2022-05-19 at 16.01.44.png (image/png)
image-20220519-090736.png (image/png)
image-20220519-090814.png (image/png)
image-20220519-090824.png (image/png)
image-20220519-090834.png (image/png)
Pockets - floating navigation.png (image/png)
Screenshot 2022-05-19 at 15.40.08.png (image/png)
Group 48096473.png (image/png)
Group 48096413.png (image/png)
image-20220531-072423.png (image/png)