SAP Fiori for Web – Updated Design Guidelines with New Figma Stencils (Version 1.92)
The latest edition of the SAP Fiori design guidelines includes a brand-new SAP Fiori stencil set. In this article, we’ll take a closer look at what the new stencils have to offer, followed by a quick round-up of the other updates with guideline version 1.92.
SAP Fiori Design Stencils for Figma
The SAP Fiori design stencils for web applications are now available as a Figma library. The library already contains the main SAP Fiori UI elements and pages and will continue to grow. With this asset, we want to make it easier for teams to collaborate on their SAP Fiori designs.
What’s in it for you?
The new stencil format takes advantage of the capabilities offered by the Figma tool. You’ll find more built-in configuration options, and it’s simpler to adapt individual stencil components.
One stencil, many variants
For each stencil, you can adjust key parameters to get exactly the variant you need.
For example, within the stencil for the button control, you can pick the button type, adapt the display and value states, show the button as an icon, or display a badge. All you need to do is select the button on your canvas and change the corresponding property in the Figma design panel.
Substitute controls on the fly
You can also replace a control on your canvas with another one from the SAP Fiori library in just a couple of steps.
Let’s say you’ve added a checkbox but then realize that you need a radio button. To switch the control, you just select the checkbox on your canvas and choose the radio button in the design panel.
Built-in “Quartz Light” styles
Styling is easier, too. Once you’ve activated the styles library for Quartz Light, all the visual settings come with the Quartz Light theme parameters, including colors, strokes, and other effects. When you choose colors, for example, the available colors are grouped in the standard Quartz Light color groups for better orientation.
You can make changes to the stencils without having to fix the layout every time. If you hide components or change a text, the layout adjusts automatically. For example, if you hide a button in a toolbar, the remaining buttons are realigned. Or if you remove an item in the middle of a table, the items below it just move up.
Who can use the stencils?
Anyone. The good news is that Figma works on any platform, and no license is currently needed to edit the SAP Fiori design stencils. However, you will need a license to publish the stencils as a library, swap instances, or make use of the real-time collaboration features in Figma. For details, see https://www.figma.com/pricing/.
Engineers can benefit as well; once you’ve finished your designs, you can share them as code snippets in CSS.
Where can I download the new Figma stencils?
To download the stencils and style library, follow the instructions in the new guideline:
The download package also includes SAP’s font 72 and the SAP icon font, which are both needed to use the stencils.
Can I still download the SAP Fiori design stencils in Sketch, Axure RP, and Adobe XD?
You can also use Figma stencils in Sketch, Axure RP, or Adobe XD, but you’ll need to move over the stencils you need manually. For details, check out the topic Using Figma Stencils with Other Design Tools.
Other updates with guideline version 1.92
Note that integration cards can’t be used in the S/4HANA environment yet, but they’re already available in SAPUI5.
The time picker control has been redesigned and now offers an intuitive dial for selecting hours, minutes, and seconds.
Icon tab bar
To improve responsiveness, the icon tab bar now supports an overflow menu on both sides of the icon tab bar.
The multi-input field guideline has been updated to reflect the latest features.
You can now change the value help icon to better match the type of data in the field. For example, if the user needs to enter a product, you could display the product icon.
Pop-in behavior is now supported for tabular suggestions that are grouped. This works as for pop-in behavior in the responsive table.
Value state texts can now contain links.
In display mode, you can now show half stars in the rating indicator using the new visual mode property.
For a full overview of all updates, see What’s New in Guideline Version 1.92.