Content

1. Passwords 

2. Documentation

3. Assets

4. Design System 

5. Projects 

6. Final notes 

👉 1. Passwords

Login details to all source pages, files and apps we’ve used for over 2 years.

👉 2. Documentation

Links to all documents and source files we worked on.

3. Assets

...

Every time you intend to use a component from the Design System that we haven’t use in the FF Summary or FF Forms there’s a big chance that the component is still linked to the Ant DS Icons. It is because we have updated icons and components used ONLY in the FF designs.

So before you use the component:

1. Check every icon that is used within the component

2. 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.

3. Find the corresponding icon from in the font awesome library

4. Update the main component with font awesome icon (video tutorial)

5. Move the updated component to Font Awesome icons artboard, and leave the old one (detached from the component) in Ant Icons artboard for reference

6. Make sure that it worked properly and the icon has been replaced in the components

Adding new icons to the Design System

...

4. Design System

Replacing icons in the Design System

...

👉 3. Assets

All assets are located across Sharepoint, Onedrive and others.

👉 4. Design System

We recommend remaining the Design System version as is. Upgrading to a newer version would mean manual design work estimated at 4 weeks. There are no clear prons on the dev side either, as we’re not using React.

Design system principles should be dictated by default Ant Design specs https://ant.design/docs/spec/introduce as well as our internal agreements to the grid system and breakpoints https://www.figma.com/file/DFnVjRuzNa1oo8Dtkm2Hsw/00-%F0%9F%8E%A8-Design-System?node-id=2%3A0&t=1Ns74L4Qagpx2QIi-1

We also gathered some best practices and guides on how to develop future Finova Design System:

A. Replacing icons in the Design System

If Every time you want intend to add a new icon to the DS:

1. Make sure that the icon you want to introduce has no equivalent in Ant DS icons. Keep in mind that it might be using a different name that you would expect, therefore look for it “visually” rather than by searching by name

2. Find the icon you want to add to the DS in your local file

3. Drag it into Figma

4. Place it into a 24x24 px frame, and adjust the size of the icon so it’s aligned to all other icons

5. Name the frame using the same structure as all other icons - so that’s gonna be e.g. Icon / Outlined / Delete. If the icon is filled, you obviously change Outlined to filled, so everything is logically structured

6. Make sure the shape inside the frame is named “Vector”. It has to be same for all icons, and it has to be only one layer. Make sure that the vector Constraints are Scale for both height and width

7. Apply the colour from the design system, I’ve used Finova Neutral 700 for all icons

8. Create component

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.

Ant icons:

Every icon that has been replaced was taken from the Ant artboard. Icons with a green mark on top mean that these icons have been replaced, and they are no longer components, but just legacy icons to preview. That means that the main component is now in the Font Awesome artboard, and contains fontawesome icon.

All icons without a green mark are still Ant Icon main components that may be living somewhere in other DS components, therefore they might need to be replaced in the future.

Font awesome icons:

These are main components that have been taken from Ant artboard, or added from the local file.

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

The latest version of fact find, including all changes in agreement with Dev team, updated icons and documentation. Layers are tidied up, structures are built with auto layout and components - where it was possible or made sense

Up to date pages that matter:

• 1.0 Fact Find Summary

• 2.0 Fact Find Forms

• Documentation

Prototypes are not updated, and they might not work properly. In order to check interaction it’s best to use the previous version of Fact Find (Legacy).

Everything else in the file is legacy, contains research or some old designs.

Fact Find - Legacy

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

Case

Everything is up to date in this file

(except some product panels wireframes in 3.2 Product Wireframes. Will need to be updated to 3.1 Product individual features)

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

The main difference is in how components stretch, and also the different look of forms. On mobile designs, labels are placed above the input field, along with any icons associated with this field. Another difference is that on mobile, all components are full width. That means all form fields, buttons, containers etc. will scale along with the screen resolution.

The border between mobile and desktop rules is at 768px resolution. That means everything below 768px will be treated as a mobile design (see designs for reference)

Fact Find Summary

if the screen resolution has more than 1600 px, the panels no longer stretch, and are center aligned. 1600px is the maximum

Fact Find Forms

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)use a component from the Design System that we haven’t used in the FF Summary or FF Forms there’s a big chance that the component is still linked to the Ant DS Icons. It is because we have updated icons and components used ONLY in the FF designs.

So before you use the component:

1. Check every icon that is used within the component

2. To do it, simply select an icon, and “Go to the main component”. If the main component is still Ant Design, it means it has to be replaced.

3. Find the corresponding icon from in the font awesome library

4. Update the main component with a font awesome icon (video tutorial)

5. Move the updated component to Font Awesome icons artboard, and leave the old one (detached from the component) in Ant Icons artboard for reference

6. Make sure that it worked properly and that the icon has been replaced in the components

B. Adding new icons to the Design System

If you want to add a new icon to the DS

1. Make sure that the icon you want to introduce has no equivalent in Ant DS icons. Keep in mind that it might be using a different name than you would expect, therefore look for it “visually” rather than by searching by name

2. Find the icon you want to add to the DS in your local file

3. Drag it into Figma

4. Place it into a 24x24 px frame, and adjust the size of the icon so it’s aligned with all other icons

5. Name the frame using the same structure as all other icons - so that’s gonna be e.g. Icon / Outlined / Delete. If the icon is filled, you obviously change Outlined to fill, so everything is logically structured

6. Make sure the shape inside the frame is named “Vector”. It has to be the same for all icons, and it has to be only one layer. Make sure that the vector Constraints are Scale for both height and width

7. Apply the colour from the design system, I’ve used Finova Neutral 700 for all icons

8. Create component

All the conditions above must be met in order to be able to switch properties within other components and keep the structure clean

C. Maintaining icons in the DS

As updating icons across the DS is gonna take some time, I’ve decided to keep 2 artboards on the Icons page.

Ant icons:

Every icon that has been replaced was taken from the Ant artboard. Icons with a green mark on top mean that these icons have been replaced, and they are no longer components, but just legacy icons to preview. That means that the main component is now in the Font Awesome artboard, and contains the font awesome icon.

All icons without a green mark are still Ant Icon main components that may be living somewhere in other DS components, therefore they might need to be replaced in the future.

Font Awesome icons:

These are the main components that have been taken from the Ant artboard, or added from the local file.

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.

D. Design System component updates

In the Pages menu - the ✅ icon next to a page title means that the page has been aligned with 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 check

• The 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 the video for reference)

• Setting the proper colours will probably require the most work. Check pages that are marked with ✅ as a reference, and use the same colours for hover, clicked etc

• It’s worth checking auto layout and resizing components, as I’ve already found a few components not set up properly that required an update

E. Mobile & Tablet responsiveness

Important to know on this one is that eventually, we have established 2 component types/behaviours. Mobile, and Desktop

The main difference is in how components stretch, and also the different look of forms. On mobile designs, labels are placed above the input field, along with any icons associated with this field. Another difference is that on mobile, all components are full-width. That means all form fields, buttons, containers etc. will scale along with the screen resolution.

The border between mobile and desktop rules is at 768px resolution. That means everything below 768px will be treated as a mobile design (see designs for reference)

Fact Find Summary

if the screen resolution has more than 1600 px, the panels no longer stretch and are centre aligned. 1600px is the maximum

Fact Find Forms

The 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

Projects in Figma are divided into Products, which then contain specific files for each Feature. Space like 🎨 Exploratory & concept work is for discovery designs, concepts and mockups.

...

A. Figma Files notes

B. Additional Documentation

C. Product Panels Redesign

👉 6. Final notes

If any questions, here are the contact details: