as a graphic designer, I have fallen in love in the design tool Sketch for its speed and would like to do my Fiori prototypes here.
But as I understand it Axure has exclusive rights when it comes to design stencils?
So I wonder if there is any interest that I spend the time to create design resources for the Sketch (other then myself) and if it’s allowed?
Hi Leon (from SAP Academy in Dublin, CA!)
I’m also a huge Sketch fan.
I’m not sure if Axure has exclusive rights but I do know that there is an Axure Fiori template for prototyping UI.
I have been wanting to get my hands on a Sketch resource for Fiori but it does not seem to exist online.
I have also been looking for SVG icons for Fiori. These resources would make prototyping so much faster!
I would be interested in collaborating on this.
thank you for using our prototype templates and your interest in Fiori.
It is not the case that Axure has the exclusive rights in the Fiori design stencils. The stencils are produced by SAP primarily for internal use but we have decided to make it available to our customers and partners as well. We have decided to use Axure as the internal prototyping tool about one and a half years ago. This was to replace Microsoft Powerpoint, which was our prototyping tool until then. We picked Axure as it was the most common tool amongst interaction designers and it offered good means to create interactive prototypes for multiple platforms. Since then, we have built up a comprehensive set of stencils covering all relevant components and patterns in Fiori and updated that every new wave (unfortunately, we are lagging behind with the external versions due to some delays in copy editing).
Of course, the market is constantly moving and new prototyping tools are emerging. Sketch indeed has become a strong player in the recent year offering also a very strong ecosystem of plugins and integration tools.
So far, we have observed Sketch to be primarily used by designers for mobile applications – above all for iOS. Our team working on Fiori for iOS is working with Sketch as well. For that reason we are planning to make the design stencils or example for Fiori for iOS available in Sketch later this year. We are currently evaluating this option.
However, Fiori for iOS means that the design will target native iOS applications and not the web-based Fiori apps on UI5. Currently, we are investing into the next generation of Fiori stencils for Fiori 2.0 in Axure.
However, if you are planning to create such stencils for Sketch, I am sure that we could find a place where we could share that with the community.
you mention SVG versions for Fiori icons? What would be the advantage of those?
Are you aware of the availability of the icons as icon font? Those are also rendered as vectors and should be embeddable in any format. You should be able to format them like any other text, which makes it rather easy to handle in prototypes.
You find the icon font here: https://experience.sap.com/fiori-design-web/resources/downloads/
Hello Killian and Kai,
Thank you for your responses.
First of all, you’re doing a tremendous work with the Fiori for Ios design. I can wait to get my hands on those designs stencils and help clients design apps in real time in workshops and discussions. And as you said, Sketchs integrations and plugins is a eco-system. Just imagine a plugin that enable transfer of real time SAP data into your designs!
If you’re planning to update the design stencils, is’s better to wait until the release of both Fiori 2.0 update.
Let me know if I can help with anything and keep up the great work!
thank you. It might still take some time until Fiori 2.0 stencils will be available externally with the 1.40 version. But do our best to catch up with our planned schedules and we will keep you posted!
I am new to SAP Fiori framework and I wanted to know if there are now Design Stencils that can work with Sketch as well.
Thank you Radhika for your question.
- For SAP Fiori apps for iOS we provide iPad Sketch stencils, see https://experience.sap.com/fiori-design-ios/resources/design-stencils/. iPhone stencils will follow.
- For web-based SAP Fiori apps we offer Axure stencils, see https://experience.sap.com/fiori-design-web/resources/downloads/. See also Kai’s comment above (5 months ago)
All the best, Annette
In response to Kai Richter,
It is a fallacy to think that sketch is primarily used by mobile designers. It is quickly becoming the de-facto design tool for most organizations. Granted, it needs to be coupled with another tool for prototyping but other than HTML/CSS, Invision seems to have become the top dog there. There are multiple surveys that support this, here are a few: http://tools.subtraction.com/interface-design.html and https://www.invisionapp.com/product-design-industry-report-2016
I would expect SAP would want to provide the tools necessary to help its customers in as many ways as possible. While I know creating templates for all design tools is impossible, creating them for the 37% of us (Sketch) seems like a better investment than creating them for the 6% of us (Axure). While I understand that Axure is the tool of choice for SAP designers, it should not effect how customers perform their business. For instance, the designers in our organization that are primarily on SAP applications use Axure to ease the transition according to the stencils you provide. It isolates them from the rest of the design community in our org that are all using Sketch. I would hope that SAP has plans to rectify this quickly in the future. After all, giving the customer what they need is a primary tenant of good UX design.
being a Mac user myself I am also a big fan of Sketch. The way it supports the design workflow is really amazing. However, it has one huge limitation: it is for Mac only. In corporate environments we find many places where Macs are not available or not supported. Also, there are indications that Microsoft is also targeting the creative market more so that we might see designers trading in their Mac for a Surface. To support our customers in creating the best possible designs as you rightfully state is very important for us and therefore we want to consistently support your creative staff with the best possible tools on the platforms they use.
At the same time we have seen how Adobe recently published XD, which seems to follow a similar philosophy as Sketch but which is available on both platforms, Windows and MacOS. It will be interesting to observe how XD will be adopted and whether the market presence and the huge population of Photoshop users will help them to establish XD.
It is really good that you bring this topic up, thank you. I believe it is important that we continuously evaluate our options as the market of design tools evolves rapidly. Sketch has shown how a modern design tool should look like and the market is now picking that up so that I believe we will see more such innovations in the next years. Design has become too important for the industry so that the support of the creative staff with better tools to increase productivity but also to lower the barrier of entry for new people has become a necessity to better scale.
Just read through https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526 and it seems like this is a good way to convert many of the html design assets to sketch templates automatically and take much of the drudgery of keeping it up to date. Even if it was just built with one page with a subset of the full set of controls would be enough to get started with https://github.com/brainly/html-sketchapp.
Any plans to release a UI Kit for Adobe XD?
there are currently no plans to release a UI Kit for Adobe XD.
currently Adobe Xd has an import feature for sketch libraries/files. So you could start with the mobile sketch files as base for some Xd prototypes.
Though i’m using Adobe Xd quite often too for custom prototypes, so maybe it would be a nice community project to setup a package for sketch & Adobe Xd fiori libraries to have some more prototyping flexibility. Especially now Adobe offers the free version to both windows and macOS.
I would also love to see a UI Kit for Adobe XD in addition to the Axure RP design stencils! As it is free to use (for one active project at a time) I think it may be a good tool for many UI5 developers. Pricing Editions for Adobe XD: https://www.adobe.com/products/xd/compare-plans.html
thanks for your suggestion. I’ll pass ist along to the team!
Best regards, Sebastian
You must be logged in to reply to this topic.