Content
Passwords
Documentation
Assets
Design System
Projects
Final notes
...
Asset | Project | URL |
|---|---|---|
Final Video, Previous versions, Source files | Intermediary Manager | |
Final Video, Previous versions, Source files | Mortgage & Savings App | |
Final Video, Previous versions, Source files | Burrow | |
Legacy Sketch Design Files | Burrow |
4. Design System
Replacing icons in the Design System
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
...
Check every icon that is used within the component
To do it, simply select an icon, and “Go to main component”. If the main component is still Ant Design, it means it has to be replaced.
Find the corresponding icon from in the font awesome library
Update the main component with font awesome icon (video tutorial)
Move the updated component to Font Awesome icons artboard, and leave the old one (detached from the component) in Ant Icons artboard for reference
Make sure that it worked properly and the icon has been replaced in the components
...
Adding new icons to the Design System
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
...
All the conditions above must be met in order to be able to switch property within other components, and keep the structure clean
...
Maintaining icons in the DS
As updating icons across the DS is gonna take some time, I’ve decided to keep 2 artboards in Icons page.
...
Blanked icons above each component are just old Ant icons for reference, and they are not linked to anything. They can be removed anytime. If there’s no icon above a component, it means that the icon has been added to the DS and had no equivalent in Ant.
...
Design System component updates
In the Pages menu - ✅ icon next to a page title means that the page has been aligned to the Finova brand style. It means that if in the future you want to use a component from a page that hasn’t been updated yet - you will need to do this by yourselves, because it still has the initial Ant DS style
All fonts have been updated automatically so most likely you don’t need to worry about it, but it is still worth to check
Corner radius is 8px
Make sure that icons connected within a component, are updated and linked to Font Awesome artboard. Lots of icons that haven’t been used across FF designs will require to update them manually (check video for reference)
Setting the proper colours will probably require the most work. Check pages that are marked with ✅ as a reference, and use same colours for hover, clicked etc
It’s worth to check auto layout and resizing components, as I’ve already found a few components not set up properly that required an update
...
Mobile & Tablet responsiveness
Important to know on this one is that eventually we have established 2 components types / behaviors. Mobile, and Desktop
...
Maximum size of containers with forms is 802px. So regardless of how big the screen is, panels with forms will never stretch bigger. They will be aligned to the left side of the screen, and if there’s enough space for 2 columns - they will break into 2 columns (see designs for reference)
5. Projects
Figma Files notes
Fact Find - FINAL
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
...
It’s the first version of FF, before the big dev review after which many things required to be redesigned. Some things that have been descoped, are still in this file - e.g. multi column layout for applicants, creating applicants during FF.
IMPORTANT
Do not update this file to the actual DS version. It may cause inconsistency in icons and some components that have been updated in the DS accordingly to the newest version
...
Most of the layers in the file are a mess, so don’t rely on layer names or structure. As these are concept wireframes that often required to be changed, moved around, redesigned etc - I wasn’t paying too much attention to layer names or the proper structure. However when you move to the UI stage, everything should be named and structured properly (See fact find file for reference)
...
Fact Find Documentation
| Panel | ||
|---|---|---|
| ||
https://www.figma.com/file/5BXe5BtM3cJyIRNe7CHzpJ/Fact-Find---FINAL?node-id=2154%3A61790 |
...
In this file you will find the most important information about some components logic and behaviour used across the Fact Find. Some of them will apply to future designs, such as product tags and some other will answer some questions, like why is one icon blue, and the other one grey. The future designs should be consistent with what’s in this file.
...
Product Panels Redesign
| Panel | ||
|---|---|---|
| ||
https://www.figma.com/file/DMH6gCMeery6pHOOzl20Zb/Case?node-id=2490%3A36604&t=zt76nIseOSZkZvHQ-1 |
...