The Latest Update Includes Scrollable Containers

of 03

The Latest Update Includes Scrollable Containers

A series of Vertcally scrolling images is shown in the atomic preview window

A few months back I showed how can be used to prototype motion. One of the key points I made in the piece was “showing motion” rather than leaving it to the client’s or team’s imaginations is important. In fact, this has become so critical that a whole new category of UX/UI tools is appearing on the scene. They include – Apple Keynote, Adobe’s Edge Animate, After Effects and UXPin, to name a few. The new kid on the block is which was in open beta when I first wrote about the product.

The neat thing about open betas is they give the software manufacturer the opportunity to collect user feedback on the feature set, including missing features, and then add them to the application and have them tested before the commercial release. In the case of atomic, one feature I really missed was the ability to scroll content vertically or horizontally. This could include such things as cards, slide shows or practically anything a user would swipe or drag within the confines of an app’s or site’s interface.

This must have been a subject a lot of the users asked for because scrollable containers were just introduced to the app this month and, I have to admit, creating scrollable content in the prototype is dead simple to enable.

Here’s how…

of 03

How To Create Vertical Scrolling Content in Atomic

The Container and Create Scroll container items in the atomic interface are highlighted.

You will need to first sign up for a free 30-day trial and, at the end of that period, ​you will be presented with three pricing plans.

The first thing you need to know is all the work you will be doing is in the browser and the app is aimed strictly at Google Chrome. Once you log in, you will be taken to the Projects page. To open the app, click the New Project button.

When the interface appears you will see there are a limited number of tools, the ability to add pages and layers to the pages, the artboard and, over on the right, a context-sensitive properties panel.
In this example, I started with an iPhone 5 preset that is 320 x 568.I then open the folder containing the images to be scrolled and dragged them onto the canvas. They were automatically added to the project and you can see they are on individual layers if you click the Layers tab. I then selected the Arrow tool (Selection), selected an image and dragged it to a new position in order to add some space between them. I then selected all of the images and clicked the Distribute Vertically button on the toolbar. This evenly spaced the images.

The next step is to select all of the content to be scrolled and to either click the Container button or select Create Scroll Container from the Group button pop down. Once the container is created- you will see it in the Layers panel – click the container and drag the bottom handle upwards to the bottom of the canvas. Click the Preview button at the bottom of the Properties panel and this will launch a browser window. Use your mouse’s scroll wheel to scroll the content. To return to your project, click the Edit button in the bottom right of the browser window.

of 03

How To Create Horizontal Scrolling Content in Atomic

The Horizontal scrolling option is highlighted in the Behaviors area of the Properties Panel.

Horizontal scrolling is just as easy to accomplish.

In this case, dragged a series of images on to the canvas and butted them up against each other. With the images selected, I then click the Top Align button to ensure they all aligned with each other.

I then held down the Shift key and selected each layer in the Layers panel. With the images selected, I clicked the Container button and, in the Properties panels, selected Horizontally in the Behaviors area.

I then tested the project in a Browser window by clicking the Preview button.

Though I have shown how to create individual versions of Vertical and Horizontal scrolling, as long as you put the scrollable content in a container, you can have these containers in separate areas of the screen. For example, a web page could have vertically scrolling content in a side menu and horizontally scrolling content in a slide-show on the same page. In fact, a container can have both vertical and horizontal scrolling for items such as an image picker that has a dozen or so thumbnails.

To learn more about this feature in check out: