Intro

Slots are placeholder components that can be filled with content. In the SAP Fiori for iOS UI Kit for Figma, components leverage these slots to offer more flexibility to users by giving them the option to insert either prebuilt or custom components.

Compatible components with slots

Best Practices

Do

  • Only insert components that are set to “Hug Content” in their height.
  • Use the Instance Swap property that is nested within the slot.
  • Name variants of custom components with the correct size class format, for example, Property: “Size Class”; Variants: “Compact”, “Regular”.

Don't

  • Don’t insert components that have a fixed height.
  • Don’t swap the instance directly without using the property.
  • Don’t use custom names for size class variants.

Banner component with its height set to “Hug Content” inserted into a slot

Banner component with its height set to “Fixed” inserted into a slot

A slot’s content being set through the component’s property panel

A slot’s content being set through the component directly

The slot leverages the text variable and selects the corresponding variant

The slot cannot find a matching text variable and selects the component’s default variant

Slot Page

A slot page is a UI Kit-specific page type. It consists of an adaptable layout suitable for all use cases.

With section-specific slots, the slot page indicates which components are compatible with each section, for example, a chart header for the header section, using the “Preferred Values” setting from Figma. This flexibility allows users to modify their pages without the need to detach.

In addition, the slot page leverages size class variables. These variables allow the content to change between the form factors “Compact” and “Regular” by applying the corresponding variable mode.

A. Header

The header section is at the top of the screen. All “Header” components are compatible with this section.

B. Body

The body section is positioned directly below the header section.

C. Footer

The footer section is at the bottom of the screen with a fixed positioning. The most prominent compatible components are the tab bar and the toolbar.

D. Modal

The Modal section has an absolute positioning and is on top of all other layers. It offers an overlay to darken the area below the main content and a slot that can hold components, such as a form sheet.

Anatomy of a slot page component