A tool for fast prototyping is of great value in any agile working environment. Business users should be involved frequently to get to the perfect design. It is therefore important to incorporate some kind of design process into your custom Fiori app development. By iterating your design, you will have a clear vision of how your application adds value to your uses. In other words, with design iteration you’re developing an application that’s in line with the user’s expectations and needs.
When you follow the Fiori Design Guidelines closely, the user of your app will not be able to tell the difference between your custom Fiori app and a standard SAP Fiori app.
Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
SAP Build
SAP Build is one of those fast Fiori prototyping tools. It allows you to not only create a high-fidelity prototype, but you are also able to share it to your stakeholders. By studying your prototype, stakeholders can test, judge and comment on your prototype. The perfect tool for the job, you might say. Until SAP decided to disclose SAP Build for unknown reasons, which means that companies canno longer purchase licenses for this tool. SAP Build will be terminated when the last contracts end somewhere in 2024.
Fiori Design Stencils
Without SAP Build, there are not a lot of options left for Fiori prototyping. One option is the Fiori Design Stencils. This essentially is a library of Fiori components which can be imported into several existing design tools:
- Sketch
- Axure RP
- Adobe XD
Once you have downloaded the files, installed the fonts, and imported the library into your design tool of choice, you are ready to go. You can search for every Fiori control and design pattern, once found, these components can be dragged and dropped into a Fiori app design canvas.
Here a link to Fiori Design Stencils
Adobe XD
In the images below, you’ll see the process of creating a simple list report application prototype using the Adobe XD tooling.
- Create a new blank Web 1920 canvas and search for “application xl”. This will give you the “LAYOUTS, FLOORPLANS & FRAMEWORKS/APPLICATION PAGE/XL 1440px” element. Drag and drop the element onto the canvas.
2. Now search for “filter bar xl”. This will give you the “UI ELEMENTS/FILTER BAR/EXPANDED/XL 1440px” element. Drag and drop the element onto the canvas and position it accordingly inside of the empty application page. It should be a perfect fit since the same size (XL) was used.
3. Now search for “responsive table xl”. This will give you the “UI ELEMENTS/RESPONSIVE TABLE/VARIANT 4/XL 1440px” element. Drag and drop the element onto the canvas and position it accordingly inside of the empty application page. Delete some rows of the table to make it fit into the application page.
4. To make the prototype come alive, change the default data on the elements to reflect the actual application you are working on. Do this by double clicking on all the elements that need to be changed and simply typing in the values you want.
The result of your prototyping can be discussed with the stakeholders in your project. The different design tools all have options to share the prototype in an easy way. Adobe XD has the option to upload your prototype to the Adobe cloud in one click, this will enable you to share the prototype by sharing a URL that leads directly to it in a preview mode.
The future of Fiori design
Are the Fiori Design Stencils the way forward? Or will SAP come up with a dedicated tool specifically tuned for Fiori design? On one hand, designers are usually accustomed to one of the existing design tools, so it would be sensible to make use of this. On the other hand, Fiori is a very specific UI framework for which a dedicated design tool can make sense and you are able to designing your Fiori apps much more efficient. Either way, the Fiori design stencils are the only viable option for prototyping at the time of writing.
