You can transfer design components from the Figma UI kit to other design tools. This article outlines how to do this for Sketch, Axure RP, and Adobe XD.

Step 1: Open the UI Kit in Figma

1. Go to www.figma.com, and sign up for a starter account (free).
2. Import the UI kit file using the button in the top right corner.
3. Select the design component you need (see the design components within the layers panel on the left side).

Step 2: Export/Copy to Your Tool

Sketch

1. Select the design component.
2. Set up the export:
   1. In design panel on the right, go to the Export section and click the “+” icon.
   2. Choose SVG as the export file.
   3. In the overflow menu (…), deselect “Outline Text”.
       If you don’t deselect “Outline Text”, you won’t be able to change text afterwards in your design tool.
3. Click Export to export the selection.
4. In Sketch, open the exported SVG file via File / Open Local Document… .

Axure RP

1. Install the Axure RP Plugin.
2. Select the design component on the canvas.
3. Under the main menu on the top left go to Plugins / Axure / Copy Selection for RP.
4. Open Axure RP and paste the design component to your canvas.

Adobe XD

1. Right click on the design component and use the Copy as SVG option.
2. Open Adobe XD and paste the SVG directly to your canvas.

Related Links

• SAP S/4HANA Web UI Kit

Despite its name, the upload set is not limited to upload scenarios. Depending on the context or the access rights, some users may only be allowed to download the files uploaded by others. You can use the upload set control for both cases.

When to Use

Use the upload set control if:

• You want to show a list of uploaded files that can be modified.
• You want to allow users to add or remove several files, and to change the file names.
• You are still using one of the older upload controls:
  • sap.ca.ui.FileUpload
  • sap.m.UploadCollection (deprecated since SAPUI5 version 1.88)

Do not use the upload set control if:

• The user can upload only one file to the app. In this case, use the sap.ui.unified.FileUploader control instead.

Components

1. Toolbar with upload and download controls
2. Edit and delete actions
3. Technical status
4. Attributes and statuses

Toolbar

The toolbar (1) can contain manual upload and download controls. The user can download one or several items selected in the list.

List

Actions (2)

By default, each item has an Edit button and a Delete button  . Edit turns the title into an editable field so the item can be renamed.

Technical statuses (3)

Technical statuses are not bound to a workflow or business process. They are mainly used to show the current editing status of an object (Draft, Locked, Unsaved Changes). For further uses and more details, see Object Display Components and Draft Handling.

Attributes and statuses (4)

You can display additional attributes and statuses below the file name. Attributes or statuses can include the name of the person who uploaded the file, the upload date, the version number, file size, and the object state in a workflow (such as “Approved” or “Overdue”).

Statuses can be shown in different colors, based on the visual guideline for semantic colors.

If multiple attributes or statuses are displayed, they are separated by a bullet.

Behavior and Interaction

Uploading Files

The upload set offers two basic working modes:

• Instant upload (default): Files are uploaded as soon as they the user drops them onto the control or clicks the OK button in the file selection dialog.
• Manual upload: All added files are first collected in the front-end list, where the user needs to trigger the upload.

If some users are only allowed to download the files uploaded by others, you can disable the upload option.

Unlike the deprecated Upload Collection control, the Upload Set control allows you to use a custom uploader.

Empty State

If empty, the upload set provides a hint to use the Upload button or drag and drop to upload files. This hint already provides a large enough zone for users to drop their files.

Drag and Drop

Users can easily select one or multiple files from their computer and drag them onto the upload set to start the upload.

As the user hovers over the drop zone, a border appears around the upload set to indicate that the file can be released.

The upload process itself is the same as if a file had been added via the Upload button.

Opening Files

Files are opened by clicking the file name of the attachment. How the files open depends on the operating system and browser settings.

On desktop devices, clicking the file name opens the program that has been assigned to this file type. In some cases, the files are opened directly in the browser if they are among the supported file types, like jpg, png or pdf. However, this also depends on the individual browser and its settings.

Mobile devices usually open a dialog in which the user can select an app that supports the respective file type.

Renaming Files

The Edit function works identically on desktop and mobile devices.

1. The user clicks the Edit button  .
2. The file name becomes an input field in which the existing name is highlighted. The icon buttons for Edit  and Delete  are replaced by two text buttons: Rename and Cancel.
3. When the user starts typing, the highlighted text is overwritten. Alternatively, the user can use the mouse or keyboard to change the selected text.
4. The new file name can be validated in two ways:
   • The user clicks Rename.
   • The user presses Enter.

Deleting Files

The Delete function works identically on desktop and mobile devices.

Clickable Attributes

Object attributes can be made clickable. This can be very helpful to provide users with a direct way to access certain information, such as a person’s profile and contact data, or the version history of a file.

Examples:

• Uploaded By: John Miller
• Last Edited By: Donna Moore
• Version 1.1

Responsiveness

The upload set control offers full responsive behavior from small phones to large desktop screens. Uploading, downloading, renaming, and deleting works on all screen sizes. Texts that no longer fit into the available space are truncated.

Example

You can use the upload set control whenever users need to be able to upload multiple files. The example below shows the object page of a product, in this case a machine, with an Attachments tab containing several documents relating to the material specification and requirements.

Other possible scenarios:

• Warranty claim: Users need to upload images of a damaged item.
• Product details: Editors can upload product pictures that will be shown in the online shop.
• Service history: Whenever maintenance is carried out, the service worker attaches a document to the object.

Top Tips

When to Show, Disable, and Hide Actions

The Edit button  and Delete button  are visible and enabled by default. If you don’t want to allow users to edit or delete uploaded files, hide the corresponding buttons.

Don’t leave buttons enabled and then show an error message when the function isn’t available.

Related Links