SAP Web UI Kit

Have you ever considered how many applications you use throughout the course of one day? If you do so, you’ll discover that while they’re all fairly diverse, they have one single trait in common that makes you love them or not. This trait is the user interface and the experience that underlies each choice made when designing the application. If only one design system is used, comparing two separate applications may reveal that their user interfaces and experiences are quite similar and consistent. And vice versa, using two different design systems will result in applications which have an entirely distinct look and feel.

If you want to follow certain guidelines and you don’t have the exact elements, choosing and creating the right ones could be a time-consuming task that may cause you a headache and delay in your overall work. And this is where the SAP Web UI Kit steps in to help you by saving you time that you can use to concentrate on the important decisions you need to make.

The Design Foundations

The SAP Web UI Kit is a Figma library that is essential for anyone who designs screens and applications and follows the guidelines of the SAP design system. It offers premade components and patterns. The library showcases the most recent core assets that you can use right away to create the mockups you need. All included components are aligned with the latest guidelines and are constantly updated by the system designers.

Once you have activated the library in Figma, you will have everything you need to start with your application’s design. All the elements that are included in it come with various properties that make them highly adjustable. All you need to do is to select the right variant for your design by using the property section in your Figma workspace.

In addition, you can combine the elements in any way possible, and you can get a new and more complex component with only few interactions. It’s like playing with LEGO bricks – all the needed elements are there, and all that you need is your design requirements and your imagination to create an accessible and user-friendly application.

But let’s be more specific. The SAP Web UI Kit consists of:

• Foundations

  • Colors, typography, and shadows – these styles are hosted separately, but they need to be used together with the different theme-specific color libraries.
  • Illustrations – you can find all available illustrations that you can use in your designs. They come with four different sizes.
  • Iconography – all available icons are also included. They are also continuously updated, as all of the other elements within the kit.
  • Grid – The grid is provided automatically with the library and is hidden by default. If you need to see the grid, you can turn it on in the design panel.
  • Focus – if you need to display the focus of a particular element, it’s there to use as well.

• Components – all components currently available in the library are aligned with the ones that you can find as part of the SAP design system.

• Using the SAP Web UI Kit is the quickest way to consume the best practices we have incorporated within the SAP design system without having to start from scratch. All components and patterns are the same, as defined in the design system, and they follow all the principles for good and accessible design.
• It offers Morning Horizon and Evening Horizon support through mode switching.
• The design tokens are used for the creation of the components. This means that you will receive all of the changes and updates we make as the design system evolves, by simply updating the components with one click.

1. Create a new file or take one of your existing working files.
2. Go to the the assets panel on the left.
3. Click the team library icon and search for the SAP Web UI Kit.
4. From here, you’ll simply need to enable the library, which will make all of the components available to you through the assets panel.

Now you are ready to create your next best design.

To avoid having to manually add the library every time you create a new file, you can reach out to your team’s Figma admin. Figma offers the possibility to enable one or more libraries out of the box for any new file, based on your current team. This way, you make it as effortless as possible for your team to stay aligned.