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.
Figma variants - switching a button from compact to cozy mode
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.
Figma instances - switching a checkbox to a radio button
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.
Quartz Light styles - applying a semantic color to a table row
Auto layout
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.
Message popover - success icon hidden, info icon takes its place
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?
Yes! The existing SAP Fiori design stencils for Sketch, Axure RP, and Adobe XD will remain available (up to version 1.90). However, please bear in mind that they won't be updated in the future.
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
Integration cards
The guidelines now include an overview article on the new integration cards and a more detailed article on the calendar card.
Note that integration cards can't be used in the S/4HANA environment yet, but they're already available in SAPUI5.
Time picker
The time picker control has been redesigned and now offers an intuitive dial for selecting hours, minutes, and seconds.
Redesigned time picker
Icon tab bar
To improve responsiveness, the icon tab bar now supports an overflow menu on both sides of the icon tab bar.
Icon tab bar with overflow menus on the left and right
Multi-input field
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.
Value help with custom icon
Pop-in behavior is now supported for tabular suggestions that are grouped. This works as for pop-in behavior in the responsive table.
Tabular suggestions, grouped with pop-in behavior
Value state texts can now contain links.
Value state text with link
Rating indicator
In display mode, you can now show half stars in the rating indicator using the new visual mode property.
Rating indicator in display mode with half-star
All updates
For a full overview of all updates, see What's New in Guideline Version 1.92.
- SAP Managed Tags:
30 Comments
