How to Design for SAP Fiori

Unsure of where to begin when designing for SAP Fiori? Below are some tips to help you get going!

Resources

SAP Fiori Guidelines: Whether you’re designing for Native iOS or device-independent, SAP has guidelines for designing for Fiori. This is a great place to kickoff to get to know Fiori and how it functions.

Device-independent –  https://experience.sap.com/fiori-design-web/foundation/get-started/

iOS –  https://experience.sap.com/fiori-design-ios/article/get-started/

Icons: Creating icons can be time-consuming when constructing an app. SAP has a library of icons that speed up both the design and development process when building an app. Download the Icon Font here. Use the SAP Fiori Icon Explorer to browse through icons. You can also copy and paste icons from this page once you have the icon font downloaded.

Stencils: Sketch Templates are available for iOS-based designs here.

(Pro-tip: Compact is mobile and Regular is Tablet/Desktop)

Sketch templates for device-independent designs are not available yet, but are coming soon from SAP!

Sometimes it’s easier to see a certain element in action to get a better idea of how it works. Click here to interact with samples of Fiori UI elements

Design Tools

These are the three main design programs being used in the industry currently. While all of these design tools are very similar (and there are even more than this), it all depends on what works best for you.

Sketch https://www.sketchapp.com/

Sketch integrates really well with InVision (more on that below). There are also a bunch of plugins and tools you can download to speed up productivity!
Unfortunately, Sketch is only available for Mac OS

Figma https://www.figma.com/

Figma is the best for teams that are working on projects together at the same time. You can see your teammates editing the same document, similar to how Google Docs works! The prototyping function is also built in, so you’re not having to export or sync anything to another tool.
Figma is a browser-based design application, meaning it can be used on both Mac and PC.

Adobe XD

If you already have Adobe Creative Cloud, then you’re all set with Adobe XD!
The whole Adobe Creative Suite is available for both Mac and PC

Want to learn more about the comparison between the programs?

Sketch vs Figma vs Photoshop vs Adobe XD vs Invision Studio: The Battle of UI dominance

Sketch vs. Adobe XD vs. Figma

Prototyping

InVision https://www.invisionapp.com/

Some of the tools above incorporate prototyping in their applications, but InVision can be used no matter what design tool you use. It integrates with Sketch and Adobe Photoshop through the Craft Plugin, but you can upload screens manually to your prototype as well. InVision allows you to share a clickable prototype with users and gather feedback from them. You can also use the Freehand feature to collaboratively sketch ideas with teammates.

Theme Designer

Once your design is complete, you can easily apply your theme to SAP Fiori applications through the Theme Designer!

Now you’ve got the resources to help you start designing for SAP Fiori. If you have any other questions, reach out in the comments!

 

If you are interested in viewing similar articles, visit our blog, here. 

View our LinkedIn, here. 

Jennifer Gnerer is the Head of UX Design at Mindset. She's a multi-talented UX designer whose focus is making everything she touches both simple and beautiful. You can often find Jen participating in our client's Design Thinking Workshops or perfecting their apps.

Back To Top