Quick Peak into Finastra’s Design System
Like every major player out there, Finastra has been creating its own Design System. If you’re part of a big company, you would have your own Design System as well. If that is not the case, this article would be of interest to you, and as a primer, I would suggest this nice read on Design Systems.
Finastra’s Design System gives access to resources for both designers and developers.
For the latter, we provide 2 themes, one for Power BI and one for Angular Material, as well as some business widgets for the Angular Framework.
Regardless if you’re an Angular developer or not, we try to always provide documentation that could be useful for anyone. Let’s take an example at the Data Visualization documentation:
On one hand, we provide developer documentation that would help Angular developers use our widgets; but on the other hand, we also provide a designer documentation, where we explain what kind of chart to choose depending on the use case. Once again, we’re always circling back to using what you need for your use case 😉.
One of the specificity of our Design System is that we are producing widgets that are specific to the financial industry.
Let’s take a look at our cards. Cards are present everywhere nowadays, yet when browsing our documentation, you can see specialised cards for business use cases such as this one below :
One of the things we are hard at work with is user experience out of the box. On top of great looking widgets, we’re trying to give tools for developers to craft a great experience with low-code investment.
An example of that would be that we expose skeleton equivalent of a widget next to the widget itself.
If you take a look at this sample of code below :
While the accounts are not loaded yet, we display some skeletons of the accout-card widget in place of the actual list of accounts. Doing so, the user gets a feel of what the interface will look like and the perceived speed will be much better, hence improving the overall experience
You can see it for yourself in action here :
This is a nice development pattern that we hope you will use across your applications; but let’s now talk about UI patterns !
At the time of writing, we currently expose 3 patterns :
Let’s have a look at the first one : global navigation, since we used it in our sample application!
Put simply, the global navigation pattern is an aggregation of 3 main parts :
- Toolbar
- Side-navigation
- App content
But it has a profound impact of the structuring of your application :
This kind of structuring echoes with micro-frontend architecture. If this topic interests you, I would suggest this video.
In action, it results in the following :
Using this pattern across your suite of products would result in an harmonized experience when your customer go from one application to the other.
A parallel I like to make is with the Office suite from Microsoft : Switching from Outlook to Powerpoint seems seamless because the overall structure/shell of the application is the same. Inner content and primary color being the only change to notify the user of this context switch !
Auto dark mode
One last nugget of knowledge that I want to pass on, as it gets a lot of traction and popularity these days : dark mode!
Finastra’s Design System implemented dark mode from the get go, and enabling it for your application would be as simple as that :
See the full integration below :
That’s it for today !
I hope this was informative 🤗! If you want to go more in depth, go explore the website :
If you liked this article :
- Add some 👏
- Share it
- Follow our Medium Publications
- Try to make some apps using our Developer Portal & Design System
- … or all of the above 😆
Till next time!
