SAP Design System Essentials

SAP Design System Academy / SAP Design System Essentials / Tooling
Learning Module:

Tooling

Explore how the SAP Web UI Kit can transform your workflow by offering ready-to-use, system-aligned components. It helps designers and developers work faster, reduce inconsistencies, and focus more on delivering great user experiences. What’s more - do that while staying true to SAP standards and enabling smoother collaboration across teams and products.

In this module you will:

promo-tile

Section 1

UI Kits

It’s your favorite SAP Design System again. Need to move fast without sacrificing consistency? That’s exactly what the UI kits are for.

These ready-made design assets bring my components and styles straight into Figma so you can prototype, iterate, and hand off with confidence. From buttons and forms to full layouts and patterns, everything in the kit follows the same standards used in production.

Whether you’re just exploring ideas or finalizing a design, the UI kits help you stay aligned with the system and save you from reinventing the wheel.

Knowledge blocks in this section

SAP Web UI Kit

Learning Goals

  • Understand how the SAP Web UI Kit can simplify your workflow and boost development speed, all while ensuring design consistency and quality.

Content

The SAP Web UI Kit is a Figma library that offers pre-made components, built with design tokens and aligned with the guidelines of the SAP design system.

It speeds up the production of high-fidelity mock-ups.

What are the benefits of using the SAP Web UI Kit?

  • 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 theme swapping.
  • 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.

Play Video

Duration: 2 min 53 sec

Learn more about the SAP Web UI Kit by reading the article and check out the video below to find out more about the different UI kits we offer.

Play Video

Duration: 0 min 43 sec

Unlock Creativity with the SAP Web UI Kit

Learning Goals

  • Understand how to use the SAP Web UI Kit

Content

Join Sebastian and Janina as they introduce the SAP Web UI Kit and guide you through its structure and resources. Learn how to work with the given controls and participate in hands-on exercises.

Play Video

Duration: 56 min 40 sec

Join Siyana Dicheva and Janina Grimm for a hands-on session to create your own personalized dashboard using the SAP Web UI Kit. They'll guide you through designing intuitive interfaces with common components, making it both practical and enjoyable to bring your ideas to life.

This hands-on session was part of SAP Design System Learning Days 2024.

Play Video

Duration: 50 min 01 sec

SAP Web UI Kits Series: Introducing the Slot

Join Siyana once again and discover how to make components more adaptable using Slots in the SAP Web UI Kit. This walkthrough highlights the main Slot types and shows how they let you add images, text, or layouts in flexible ways, reshaping existing components without detaching.

Play Video

Duration: 2 min 13 sec

promo-tile

Section 2

Joule for Figma

Designing with the SAP Design System just got even easier. Our new AI-powered assistant works right inside Figma, guiding you through components, usage rules, and design system guidelines, all in context, exactly when you need it.

No more switching tabs or digging through documentation. Whether you're unsure which component to use, need help applying a pattern, or you seek guidance, the Joule for Figma is there to support your workflow without slowing you down.

Think of it as your design system assistant ready to answer questions, suggest best practices, and help you stay aligned without breaking your creative flow.

Knowledge blocks in this section

Introduction to Joule on Figma

Learning Goals

  • Discover how to get AI-powered insights from the SAP Design System guidelines right inside your design files.

Content

Find out how you can ask contextual questions to a particular component you’re working with across the Web, iOS, and Android kits, or how to ask any question you need around the SAP Design System.

This hands-on session was part of SAP Design System Learning Days 2024.

Play Video

Duration: 50 min 01 sec