By Matte Rae
S
ocial media applications have, for the most part, taken on similarities amongst one another. Markedly it seems many apps have taken the approach of including ‘stories’ or ‘highlights’ in a horizontally scrolling view across the top of their mobile apps, with the vertically scrolling ‘feed’ falling below. In the past, prototyping these interactions meant multiple art-boards and some ingenuity. Thankfully, with powerful features like scroll groups in Adobe XD, not only is this type of layout possible to prototype, it can also be done rather effortlessly. In this guide, you’ll learn how to create a horizontally scrolling interaction for a social photo app on the iPhone.
The same approach can be used for either iOS or Android platforms, but this article will be using iOS assets as examples. iOS and Material design (Android) UI kits are available via the file menu in Adobe XD. Select “Get UI Kits” and the platform you wish to work with. To help you to get started quickly, the starter file contains a set of pre-built assets you can use to follow along.
Setting up the design
To get started, the appropriate device artboard needs to be created. Adobe XD makes this easy with several popular device presets available to choose from. These can either be selected on the start screen when creating a new file or by clicking the artboard tool at any time in an open document. The desired preset can then be selected from the panel on the right.
By default artboards are set to a white background, but this can be overridden by selecting a fill colour in the property inspector on the right or by clicking “I” on the keyboard to enable the eyedropper, allowing you to select the desired colour. In this case, the dark blue colour.
Use the starter file template or build your own
Since the elements for this design are pre-created, you can choose to use them or reconstruct them yourself. This tutorial won’t cover the creation of these elements, but you can learn how to get started with this video series or how to make and use components yourself in this video.
Adding navigation elements
For this iOS application, both the top navigation bar and bottom tab bar are important elements for creating boundaries for the content in the design. These elements can be dragged in from the assets panel on the left and positioned onto the newly created artboard.
To ensure the elements are positioned precisely, the alignment tools in the top right of the property inspector can be used. For the navigation bar, ensure that it is aligned to the top and either the left (it is best to align full width items to the left in the case where the artboard needs to be resized). The tab bar will be aligned to the bottom and the left.
Fixing the navigation
The end goal of this design is to have the content in the ‘feed’ scroll vertically and stories to scroll horizontally. To create that effect, the navigation items need to remain fixed in their position and be the top layer on the artboard. To make it easier to reorder these elements later on, combine them into a single group by selecting both elements and using CMD/CTRL + G on the keyboard.
It's best to give this new group a name so that it can be easily identified in the layers panel once more content is added to the page. Using a clear name like ‘Navigation bars’ can make your life much easier down the line.
Finally, to fix this new group in position while content scrolls, select the group and toggle the “Fix position while scrolling” tickbox on the right. This attribute is available in both the Design and Prototype views.
Creating the “feed”
With navigation elements in place, it’s time to begin building out the content for the app. The feed item post element is a group of other elements, including a header and image placeholder and post details. This element can be copied from the asset artboard with a standard copy and paste or by holding Option/Alt while clicking and dragging the element into place (Option/Alt must be held until the drag is released or the object will simply be moved, not duplicated).
Position the post card below the navigation header. Don’t worry about precise positioning yet as the elements will be adjusted later. Since all of the elements on the page share the same background colour, it may be helpful to adjust the colour of the artboard to a contrasting colour while elements are positioned.
With one post in place, it can now be quickly duplicated by using the Repeat Grid tool, eliminating any need to copy and paste repeatedly. With the element selected, click “Repeat Grid” in the top right corner of the application. Two green handles will appear, with a dashed green line around the element.
Now, drag the bottom handle down until the desired feed length is reached. Five or six posts is likely sufficient for demonstrating the interaction.
With the content now repeated, the artboard needs to be adjusted to fit. Select the artboard and simply drag the bottom handle of the artboard to resize. As the artboard is resized, you will notice a blue dashed line and a grab handle appears where the artboard previously ended. This represents the viewport of the design and what will be ‘in-view’ on the preview.
Since the tab bar is fixed and will display over-top of the feed content, the height of that element needs to be considered when resizing the artboard. In this case, the element is 79px tall, so resizing the artboard height to be 79px beyond the end of the repeat grid will ensure that no content is cut off on the scroll.
Adding Imagery
No photo feed is complete without stunning images. Using a repeat grid allows images to be added quickly to your design. Images can be dragged in bulk from your local machine to an element on the repeat grid and automatically inserted into each instance in the grid.
Like that, in just a few actions a fully functioning photo feed has been created. The last step is to re-order the layers so that the navigation group is once again on top. With the navigation group selected, it can either be dragged in the layers panel or moved using CMD/CTRL + the right square bracket until it sits at the top.
Previewing the design now will show the photo feed scrolling up and down and navigation items remaining fixed.
Adding the story elements
Now the design is ready for the addition of the stories or highlights feature. There are two elements for this, the ‘follower story’ and the ‘your story’ elements.
Start by clicking and dragging the ‘Your story with label’ component from the assets panel, onto the open space at the top of the design. Once positioned, the feed grid can be adjusted accordingly.
Next, drag a ‘Follower Story’ component onto the design from the asset panel and position it next to the first story. This element can be repeated in the same way as the feed using a repeat grid as well. With the element selected, click and drag the right handle to a desired length.
This time, the artboard won’t be resized for the overflow of content. Instead, to enable this section to scroll horizontally, a Scroll Group will be used. First, this new repeat grid should be grouped with the other story element, so it can all scroll together. Alternatively, if the desired outcome is to keep the ‘Your story’ element fixed, it can be left ungrouped from the repeat grid.
Now on the property inspector on the right, enable the ‘Horizontal Scroll Group’ option underneath the object dimensions. This will create two blue handles on either side of the group which can be adjusted to fit the desired scrolling viewport.
The scroll can now be previewed by scrolling horizontally with a track pad, clicking and dragging with a mouse or holding shift and scrolling with a scroll wheel on the mouse.
Ensuring the navigation group is once moved to the top of the layers, the app will now scroll both vertically and horizontally, all within a single artboard.
Scroll groups also work great with features like component states and auto-animate to take your interactions to the next level. Want to learn more about using scroll groups in your design? Check out this guide.
