How to design SAP Fiori Apps?
What tools do we need?
It won’t surprise you, if I told you there are many tools supporting designing and prototyping. What may surprise you is the top tool, which is totally free and doesn’t even need a PC or any other device. It is sketching. Sketching is the best first step, which you can take in this journey. You put your ideas and your Client’s requirements on a paper, you erase things, then correct them, then erase again and so on. But at the end you have your first draft, which you are proud of, and which can be then moved into digital world.
When it comes to this world – there are many tools available. In this guide I will focus on Figma, which is very popular and strong these days.
Let’s design our first Fiori App – step by step
Let’s kickstart with the prerequisites:
- Get figma – download it for free, install and then proceed with the next steps. Figma also works as a web-based application, but as we are going to install some additional components, let’s use Desktop version.
- Get Fiori Icons and fonts – Fiori uses its own font (called SAP 72) and icons, which are technically another font (called SAP Icons). Download them and install.
- Get Fiori Stencils for Figma – here is the main step. Before you start any design, you need some library with all components, which you can use in your design. It’s called Fiori Stencils. Just download them, there is nothing to be installed.
- Open Fiori Stencils with Figma – you can now launch Figma and import the Fiori Stencils library.Note:Paid version of Figma allows you to link Fiori Stencils as an external library. In our case we use the free version, that’s why we import it directly.
- Get familiar with the components to understand what Fiori Stencils consist of. Thanks to that you will get more confidence with what is delivered as a standard and what needs some additional development (if you consider some custom UI components). It is a huge boost which you can use for your collaboration with Developers.
We are all set-up, it’s time to prototype something. The first step is to find our sketches.
This is what I prepared for myself:
In my scenario there is a Vehicle Technician, who is responsible for about 20 vehicles at his Plant.
His daily duties is of course maintenance of these objects. Sometimes it’s impossible for him to repair a vehicle (for example, it requires other skills, machines etc.), so he calls the office and asks for an External Service. Until now. We want to equip the Technician with a smartphone, so he can create Maintenance Request by scanning a barcode of the vehicle, adding few information and that’s all.
We jump to Figma. First, we will create a page and call it ‘Exploration’ (as we are going to explore different ideas/approaches and so on).
We will design for Iphone 8 Plus. We select so-called frame, and on the right side we choose the Iphone:
Let’s bring the components. We need the whole Fiori page and some buttons. Here we go:
My idea is, to call it ‘Quick Maintenance Request’ – it will be a separate tile in the Fiori Launchpad. Once it’s clicked, the user can quickly scan an equipment, add description, save and Maintenance Department will receive it.
(Of course this is just an example, as we already have many Fiori Apps supporting Asset Management).
I switch to the prototyping mode and create interactions between each of the screens.
All I have to do is just select for example the blue ‘Log in’ button and link it with the next frame.
Okay, for the purpose of this tutorial that’s all.
Three important things here:
- you can ‘Play’ the prototype and see your design in action
- you can share the prototype with your Developers and then with the Client, so they can give you some feedback
- coming back to Developers – Fiori Stencils components are named in the same nomenclature as it is done at UI5 SDK. So it hugely speeds up the work for your front-end colleagues!
What next?
Let’s sum up the whole topic! We have just learned how to design and prototype our first Fiori Application with Figma. Of course it wouldn’t be possible without some prerequisites, especially Fiori Stencils which are delivered by SAP.
I hope you found this article interesting and it shed some light on the topic ‘Prototyping’, which is something that we – Consultants should pay attention to.
If you prefer a video than text guidelines, I’ve also recorded such, so you can follow the steps there as well:
Cheers,
SAPdude
If you want to know how to design SAP GUI screens with Figma, check this link out.
