How to SAP Fiori mock-up: SAP icon font, Axure & SAP Stencil installation Overview
i’ve started with Fiori app development some time ago. Currently i’m working on mock-up’s for a client project.
The new Fiori prototyping kit for Axure is pretty nice. Installation of Axure & the SAP stencils is pretty easy. The following document provides a simple overview for the installation of Axure, SAP stencils & SAP icon font.
Download Link Axure: http://www.axure.com/
Download Link SAP Stencils: https://experience.sap.com/fiori-design/resources/downloads/
OpenUI5 SDK : OpenUI5 – Download
Installation of SAP Icon Font:
One part of the setup process is to install the SAP icon font. It’s recomended to install the font before you start working with Axure software.
Download the OpenUI5 SDK Zip & extract it on your device.
Navigate to the following directory: <ExtractionFolderOfOpenUI5 SDK>\resources\sap\ui\core\themes\base\fonts
In the folder right click on the SAP-icon.ttf file & select the option “Install” in the context menu.
The SAP Icons are a seperate library in Axure.
Installation of Axure:
Follow the steps of the installer
Instalation of SAP stencils:
Select “Load Library…” & navigate to the files you extracted from the SAP Stencils Download link.
Switching libraries can be done by the “Select Library” option.
Thats it. Now you can start creating mock-up’s with Axure for youre Fiori projects.
It’s great to see, that the PowerPoint Prototyping Kit disappeared & that there’s now a tool available specialized for mockups. I can recomend to participate/check the tutorials provided by Axure to get into the tool to speed up for creating mock-up’s.
Tutorials for Axure can be found here:
I like the UI5 Framework & the NetWeaver Gateway a lot & soon first projects will go into productive use 🙂 . It was hard to get into the topic but the more i do the more i appreciate this new UI world.
And one of the best things is, i can show the applications to clients directly on the mobile phone i carry along with me all the time.
@SAPUI5 Folks: Keep up the good work.
Feel free to comment & improve this document. I apreciate your feedback.
Have a nice day.