Content
Passwords
Documentation
Assets
Design System
Projects
Final notes
...
3. Assets
Asset | Project | URL |
|---|---|---|
Final Video, Previous versions, Source files | Intermediary Manager | |
Final Video, Previous versions, Source files | Mortgage & Savings App |
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
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, 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)
Mobile & Tablet responsiveness
Important to know on this one is that eventually we have established 2 components types / behaviours. Mobile, and Desktop
...