I’m a CRM Consultant by trade and low and behold I’m writing my first Blog on how to set-up the SAP Fiori Prototyping Kit.
I’ve been cracking on with the openSAP (https://open.sap.com/) course “Build Your Own SAP Fiori App in the Cloud” (https://open.sap.com/courses/fiux1 ). There’s been a good deal of mention on the course about the Prototyping Kit which can be used in MS Powerpoint, however I’ve not been able to get this too work at all. This could be due to the fact that the Prototyping Kit appears to be constantly updated due to the ramped up usage of Fiori, or alternatively I’m just doing it wrong 
So instead it works much better using the Axure RP PRO (http://www.axure.com) Software, and even with this in mind there does not appear to be too much guidance about on how to set this up…so the following is my attempt to guide you folks on this.
Step 1: Get to here: https://experience.sap.com/fiori-design/
- Hit the Resources Link
This gets you through to this page.
Step 2: Install SAP ICON Font and Design Stencils
So the documentation refers to installing the SAP ICON Font, however hitting the link will download the “openui5-sdk”. I’m not sure you really need to do this unless you want to start developing, so I’m not going to use this. It’s about 130Mb…a bit large if you just want to make use of a Font right?
So moving onto the Design Stencils, hover of the Design Stencils link and click on it to begin the download
Step 3: Once this is downloaded (as a zip file)
- Unzip the file and put the resulting file somewhere useful for your purposes.
Step 4: Drill into the folder
- I’m sure the Mac users will figure it out …J
- You’ll then need to unzip the SAP_iconfont…zip file
- Now keep drilling through this unzipped folder until you get into the “fonts” folder.
- Double click on “SAP-icons.ttf” file
- Hit the Install button
- Now that this is done, you can move onto the next step.
Step 5: Install Axure RP
Back on the web site you can continue reading the commentary about Axure…
So go to the Axure website (http://www.axure.com), and take the option to download the trial version. I’m not going to get into the details of purchasing the software, this blog is to get you up and running and prototyping as soon as possible. It’s up to you if you wish to decide to purchase the software at the end of the trial.
Install the software, I took all of the default options.
Once the software is installed you can launch.
Select the “Close” option while under the Trial Version
Step 6: Load in the Stencils
From the Widgets Menu, select “Load Library”
Locate the *.rplib files from the downloaded Fiori Stencils Folder which we downloaded in the “Download Stencils” Step. Select all entries and click on “Open”
…now you’re done!
Step 7: So from the Fiori Stencils select the Launchpad and drag it into the view
As you can see all elements here are editable, descriptions can be changed, the numeric values can be modified
Click and update…simple as that.
If you want to change the background colour, click where I’ve highlighted
I’ve selected a Linear Gradient, reddish sort of colour, once you’ve selected what you want, then click back on your background.
Well it works…I didn’t say I was an artist J
You can copy an exist “App” by highlighting, coping and then moving to where you need
And then you can copy text from another App and adjust accordingly.
Be sure to make use of the co-ordinates box at the top to assist in the placement of items
You can then use the “Publish” – “Generate HTML Files” option
Take the default options and click Generate
Now you can locate those files, hit the “Start.html” file
Your Prototype is visible
The Preview option performs the same function without saving the work
So that’s a very basic introduction, there quite a lot of features in this software. My main aim here was to get you up and running. Hope this gets you there
Arden