Swipe page

Add a component with a vertical swipe effect

👉 The Tag

Creates a horizontal or vertical swipe component, which occupies the whole app screen. The list of elements in the component can be created in the design file, or created dynamically with API data.

📍 Where to add the tag: A top-level app page.

[page-swipe:vertical] -> vertical slide effect
[page-swipe:horizontal] -> horizontal slide effect

🏷️ How to add the tag

1. Create a screen design for the vertical swipe. Add the [page-swipe:vertical] or [page-swipe:horizontal] tag to the top-level app screen component.

2. Create a single [container] element covering the whole screen and wrapping all the individual UI elements of the swipe component (images, texts...). Add the [aspectratio:screen] tag to the container, to avoid undesired scrollings in devices with smaller screens.

3. If you want to have a static list (created in the design file) for the swipe component, create several containers with the corresponding UI elements, and put them one on top of another.

4. If you want to populate the list dynamically with API data, create a single container with all the UI elements that will be bound to data. Then, in the data binding section, bind the container and the UI elements to the corresponding list data items.

🎨 Example design file

https://www.figma.com/community/file/1125815853125858367www.figma.com