Axure Tutorial: Make Masonry Layout Cards

Introduction

This tutorial introduces the method of making masonry Layout Cards with repeater, which supports deleting the cards and automatically filling the positions after deletion, so as to ensure the integrity of masonry layout.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

Features to be Realized

1. The images in the card have different heights, so as to realize the masonry layout.

2. When deleting a card, the following card will be filled automatically.

How to Realize these Features

1. Make cards list through repeaters. And the height of the image in the card is adjusted according to the data of the corresponding column of the repeater. So as to realize the masonry style layout.

2. Sets the context panel to show when the card is hovered. When you click any button on the panel, delete the current row of the repeater and add a new row.

Preview the completed prototype for this tutorial

Widgets Setup

1. Drag a Repeater-Card widget into the canvas and adjust its image, heading and paragraph to the appropriate position. Because we want to make a layout of 2 columns and 8 items, we need to add more data.

2. We need to create a dynamic panel for the image widget so that the aspect ratio will not change when the picture is enlarged. We will use it in the following settings. Name the image widget Image and the image dynamic panel Image Panel.

3.Create a rectangle, set the bottom round corner to 6 pixel, add color, and select the title and paragraph text to create a dynamic panel named Card text. Group the Image Panel, Heading and paragraph text and name it card.

4. Set the repeater layout to “Vertical” and “Warp(Grid)”, and the number of items in each row is 4.

Note: the number of items in each row can be set to any value m, for example, the number of data row written in the repeater = 2m, and the waterfall flow is shown in two columns; If the number of data rows written in the repeater = 3M, the waterfall flow is displayed as three columns… And so on.

Set the repeater Pagination to Multiple Pages, the number of Items per page is 8, and the Starting page is 1.

Set the repeater Row Spacing = 10, Column Spacing = 10.

4. Make a card hovering scrim and add 3 buttons in the middle. Group 3 buttons and name it Buttons, Group the three buttons and scrim and name it Context.

Interactions Setup

1. First, adjust the size of the Image Panel when item loaded. The size of the dynamic panel is set to the size of the Height column of the repeater table.

2. Set the Image height to the height of the Image Panel. Then set the width of the Image to the height of the Image Panel / the height of the Image * the width of the Image. In this way, the width of the Image is set to keep the aspect ratio unchanged and included in the Image Panel.

3. Move the Text panel to the bottom of the Image Panel and subtract the rounded pixels 6px to ensure that the rectangle color completely fills the rounded corners.

4. Set the size of the scrim as large as the card (the width is the width of the Image Panel and the height is the height of the Card).

5. Move the Buttons to the vertical center of the scrim.

1.Select the Card, set to hide the Context when the Mouse Enter.

2.Group the Card and Context, set to hide it when the Mouse Exit.

Create the repeater as a dynamic panel, adjust its size, unselect Fit to Content, and right-click to set Scrollbars to Scroll Vertical.

Finally, adjust the background style and add a mobile phone mockup to the interface.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.

--

--

--

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

Practical colour management for app makers

Colour management

Requirements for Buying a ComfyBed https://t.co/3gU5MB4KkG

Compassionate Leadership Through Play

Usability Testing

My experience of co-production

The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers |Ariel Chang

Move the table out of your meeting room

How to help students cope and navigate in an unexplained world

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium

This is what I learned from my first interface design project

Axure Tutorial: Making Mobile Calendar with Repeater

Let’s Talk about User Interface (UI) & User Experience(UX) Design

UX Design Principles For Startups