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.
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
- In any file, new or existing, open the Assetspanel on the left. Click the Librariesicon at the top right of the panel.
- 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.
Related Links
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.