Skip to Content
Product Information
Author's profile photo Susanne Wilding

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.

Figma%20variants%20-%20switching%20a%20button%20from%20compact%20to%20cozy%20mode

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%20instances%20-%20switching%20a%20checkbox%20to%20a%20radio%20button

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%20Light%20styles%20-%20selecting%20colors

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%20popover%20-%20success%20icon%20hidden%2C%20position%20of%20the%20other%20icons%20adapts

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:

Link%20to%20download%20and%20instructions%20for%20SAP%20Fiori%20design%20stencils%20for%20Figma

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%20time%20picker

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%20tab%20bar%20with%20overflow%20menus%20on%20the%20left%20and%20right

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%20help%20with%20custom%20icon

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%20suggestions%2C%20grouped%20with%20pop-in%20behavior

Tabular suggestions, grouped with pop-in behavior

Value state texts can now contain links.

Value%20state%20text%20with%20link

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%20indicator%20in%20display%20mode%20with%20half-star

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.

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Wolfgang Röckelein
      Wolfgang Röckelein

      Hi Susanne,

       

      thanks for the blog. The part on figma use with no license looks promising. However when trying to follow the linked instructions, in the step "publish them as a library" I stumble upon that publishing needs a paid license. And in " for all files in your drafts." I don't see your files despite them being in drafts.

       

      Could you clarify the exact procudure how to use your files with figma?

       

      Thanks,

      Wolfgang

      Author's profile photo Susanne Wilding
      Susanne Wilding
      Blog Post Author

      Hi Wolfgang,

      I'm afraid you're right - our mistake! You can use the stencils in Figma without a license, but you'll need the professional plan to publish the stencils as a library or swap instances.

      Without a professional plan, you'll need to copy and paste the stencils from the imported file. The updated instructions are here. Most of the features described in the Top Tips should still work though.

      Thanks for drawing our attention to this and apologies for the confusion. It looks like we unwittingly used the wrong user profile when we tested the process.

      Best regards,
      Susanne