DIY: How to design and Prototype Fiori applications with Figma

[sapdude]

1. What is Prototyping

Prototyping is a process where we prepare a prototype (wow, you don't say?)
A prototype is an early sample or mock-up of the product we wish to build. It’s a quick model explaining the actual plans for the final product.

Prototyping brings many benefits like better understanding of the design intent, early feedback, validation before development and much more.

2. What tools are available?

It won't surprise you, if I told you there are many tools supporting 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 when it comes to prototyping. 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.

Since this post is about Figma, it's obvious I will mention it. But there are many similar tools  like Adobe XD or Sketch. I was a big fan of XD, but Figma convinced me with their functionalities and interesting features (by the way, Adobe acquired Figma last months for ~$20 billion!).

 

3. DIY - Step by step with Figma

a) 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.


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


• Fiori Stencils for Figma - here is the main step. Before you start prototyping, 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.Picture 3.1 Figma - How to import a file


• 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.Picture 3.2 Figma - Explore Fiori Stencils and its UI Components

b) Step by step:

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:

Picture 3.3 Prepare your notes and sketches

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

Picture 3.4 Figma - Create a page for your design

We will design for Iphone 8 Plus. We select so-called frame, and on the right side we choose the Iphone:

Picture 3.5 Figma - How to import a file

Let's bring the components. We need the whole Fiori page and some buttons. Here we go:

Picture 3.6 Figma - Drag and drop the UI components from SAP Fiori Stencils

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

Picture 3.7 Figma - Design your Fiori App

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.

Picture 3.8 Figma - Prototype your design and share with your Team and Client

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!

 

3. What next / useful resources

a) Next steps in learning:

Actually, when it comes to prototyping (and Design Thinking) - there are many sources, which you can explore. For example, there is a free course at openSAP, which you can visit - Design Thinking in a Nutshell.

If you prefer a video than text guidelines, I've also recorded such, so you can follow the steps there as well:

b) Prototyping of SAP GUI?

If you are still more focused on GUI solutions than Fiori-based - don't worry.
In the below video, I described how by using Figma you can quickly Design and Prototype SAP GUI transactions, modify standard tcodes etc. Instead of Fiori Stencils, you can use SAP ERP UI KIT.
See the below video, or check out this article.



 

c) links and stuff

SAP Fiori Guidelines

SAP Fiori Icon Explorer

SAP Fiori Stencils

 

 

4. What we have just learned

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.

Feel free to use the comments section where you can share your thoughts, ideas or questions!
I also encourage you to follow the whole SAP Fiori Topic page, where you can find more stuff like this.
Hungry for more content like this? Follow sapdude_official, as more content is coming soon.

Dan