SAP AI Web UI Kit
Resources / UI Kits / SAP AI Web UI Kit
Intro
You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s been designed to help you create responsible, accessible, and human-centered AI experiences with ease.
Components
Here’s a quick overview of the key components included in this kit with links to the corresponding design guidelines:
- AI Button: Allows users to trigger an AI-powered feature with a quick prompt.
- AI Menu: Offers context-relevant quick prompts (predefined AI actions).
- AI Notice: Encourages users to fact-check AI-generated content.
- AI Acknowledgment: Informs users about the AI service.
- AI Text Highlight: Highlights AI-generated text, enhancing transparency and clarity.
- AI Prompt Input: Streamlines instructions for generative AI.
- AI Progress Indicator: Informs users about the status of their request while content is generated.
- AI Writing Assistant: Streamlines writing and editing tasks, enhancing users’ efficiency.
- Guided Prompts: Guides users through crafting tailored prompts with ease and precision.
Using the Kit
Activate the SAP AI Web UI Kit library through Figma’s “Assets” panel to make components immediately available in your design files. To save time, set default libraries for new files.
To use a component, drag and drop it from the “Assets” panel into your project’s canvas. If the component has variants, you can configure its properties and values as needed.
Refer to the Figma documentation for detailed instructions on using Figma component variants.