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 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

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.

Assigned Tags

      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?




      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,

      Author's profile photo Ravid Aloni
      Ravid Aloni

      Dear Susanne,

      thanks for supplying the Figma Stencils!

      With the help of SAP Theme Builder, we have created a specific green theme for our company and were able to import it and apply the correct colour theme to SAP Fiori cockpit.

      The missing link is, I guess, between SAP Theme Editor and the Figma Stencils:
      Is it possible to use the colours defined in the theme Editor, in Figma stencil, kind of automatically?

      If not, we would at least like t edit the colours in the "Test_08_03_Quartz Light Colors MASTER.fig" file,
      and see those new colours in the "Test_08_03_Fiori Web Stencils v1.96" file.
      It all seem not so straight forward.
      Do you have an idea how to solve it?


      P.S. - we do not have a Figma pro version (yet?)

      Author's profile photo Gerard Keane
      Gerard Keane

      Hi Ravid,

      I posted a reply here:

      I hope this helps

      Best regards



      Author's profile photo Ravid Aloni
      Ravid Aloni

      Thank you, Gerry!!!

      Author's profile photo Pieter Janssens
      Pieter Janssens

      In the latest version 1.98 there should be separate cozy and compact stencils, however the cozy one is not included in the archive:

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

      Hello Pieter,

      Unfortunately, our stencils expert is currently out sick. We'll follow up on this asap and let you know when the file is available.

      Best regards,

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

      Hi Pieter Janssens,

      This has now been fixed. The download file now includes both compact and cozy stencils:

      Sorry for the inconvenience and thanks for reporting.

      Best regards,