UX Illustration Creation Kit

Resources / UI Kits / UX Illustration Creation Kit

Intro

The UX Illustration Creation Kit helps lines of business (LoBs) create custom illustrations. Instead of requesting illustrations, you can use the kit to build what you need.

It includes a large library of illustration assets you can reuse and combine in different ways. You can also adapt these assets to create new ones.

The kit also outlines the entire illustration creation process. Step-by-step guidance and links to existing illustration libraries support you from start to finish.

Open Creation Kit in Figma

Get Started

Illustration Design Guidelines

Start by reviewing the latest illustration design guidelines. The kit incorporates the current version. Always use the kit together with the guidelines to ensure a consistent visual style.

Illustration Creation Process

Review the creation process outlined in the Read Me section before creating your own illustration.

Enabling the UI Kit in Figma

  1. In any file, new or existing, open the Assetspanel on the left. Click the Librariesicon at the top right of the panel.
  2. In the Librariesdialog, enter "UX Illustration Creation Kit" in the search field at the top. Turn on the switch to activate the library.

Inside the Kit

Read Me

In this section, you’ll find an overview of the specifications and components in the kit, plus a dedicated area with links to all related libraries. Use it to check for existing assets from other LoBs before you create a new illustration. This helps avoid duplication and ensures consistency.

You’ll also find a section on the creation process, with detailed instructions for exporting and handing over illustrations. Follow these steps to work efficiently and in line with the expected standards.

Change Log

An ongoing record of all updates to assets in the kit. Use it to track changes, see what’s new, and keep your work up to date.

Guidance

This section includes a copy of the latest design guidelines. You don’t need to search elsewhere. Everything you need is in one place.

Backgrounds and Elements

Create illustrations by combining the ready-to-use assets in this collection. It includes all available backgrounds and a range of elements. This approach gives you flexibility and keeps your designs visually aligned with the overall style.

Helpers

Use these practical resources to guide spacing, sizing, and levels of detail in your illustrations. This section also includes a grid template for different illustration sizes to help you design with precision and consistency.

Guidelines

SAP Web UI Kit
Find the ready-to-use illustrations in the SAP Web UI Kit.

Learning Session

Illustrate Your Vision: Mastering the New Illustration Style & Creation Kit
Watch an introductory video and learn more about the creation kit and how to get started.