By Matt Rae
I
f you’ve used any task tracking, or agile planning application, it's likely that you’ve come across or used a Kanban board. A Kanban board visually depicts the progress of work, projects, or tasks across a series of columns. The work, or tasks are represented with cards that move between the columns depending on their status.
A fantastic Kanban board example is found in the Trello app. The board below is being used to track team meetings and agendas, displaying them in a pseudo timeline. Kanban boards are used in many different ways, and though the elements within the UI are simple, being able to iterate through different layouts and states is very helpful when designing a Kanban board interface.
This tutorial will walk through how to create a Kanban board by leveraging Stacks and
Scroll Groups to bring it to life, and make iterating through compositions extremely easy. Download the starter file to follow along.
Creating reusable elements
A Kanban board design is a relatively simple layout, composed of a few standard, repeating elements. Since elements like cards and the list containers are being repeated, it is best to start by building components for these so that as changes are made, they’ll be applied automatically to the instances by editing the main component.
The starter file provides three elements, a main list, a section header, and a list item card. To get started, select the Main List group. With the group selected, right-click on the group and select Make Component. A component can also be created using the keyboard command Command+K on a Mac, or Control+K on Windows, or by clicking + on the Component panel in the top right.
Repeat this process with both the section header, and the list item cards. Opening the assets panel will reveal the three newly created components. Dragging components from this panel onto the artboard will create instances that can be overridden for all the cards in the design.
Laying out the list
The same principles can be used across web and mobile applications, for the purposes of this tutorial designs will be for a web-based application.
Create the list container
Start constructing the content layout by dragging an instance of the main list component onto the sample artboard. A placeholder navigation header is provided, but can be adjusted as desired.
Using guides and the grid tools can help ensure precise alignment when developing the interface layout.
Once positioned, the element can be resized to fit the desired list height and width. Thanks to Responsive Resize, the list should automatically maintain proper alignment for elements within the component.
Next, change the list title to the desired name like Backlog or To-Do for the first list of cards. The content of text can be changed in an instance while still retaining style updates from the Main component to ensure consistency.
Begin adding cards
To begin building the list, drag an instance of the section header component onto the artboard. Although the urge may be to drag the component directly onto the list component, this would actually replace the list component with the section header component thanks to the ‘drag to replace’ feature for components in XD. Instead, drag the instance to just beside the list component. Once on the artboard it can then be dragged in place on the list.
Next, drag an instance of the list item card onto the artboard using the same technique as the section header, and position it beneath the section header. Smart guides will display the relative alignment to the section header to ensure the list card snaps into place precisely.
The basic structure of the Kanban board is now formed. This collection of elements is now ready to be repeated horizontally to create other lists, and the cards within the lists will be duplicated, rearranged and modified to build out the full design.
To create this, these elements *could* be copied and pasted, or a Repeat Grid could be used to quickly duplicate them horizontally, but since the desired outcome is a layout that can be easily reorganized, there is a better way.
Creating the stack
A stack is a re-orderable group of content that runs either horizontally or vertically depending on the arrangement of the content. In this case there are many opportunities to use a stack, including several pre-configured Stacks within the list-item card itself. This tutorial will look at two of these cases in particular.
The first case is a vertical Stack of cards within each list, allowing cards to be re-ordered, added, and removed.
The second case is a horizontal Stack containing all the lists, allowing them to be rearranged, added and removed while maintaining proper spacing and alignment.
Vertical card Stack
Enabling the vertical Stack is easy. Start by selecting both the section header card and the list item card that were just added. Multiple objects can be selected by holding Shift while clicking to select. With the objects selected, create a group using Command+G (MacOS) or Control+G (Windows), or by using the right click menu and selecting Group.
Now create a Stack on the group by toggling the Stack option on in the Properties Inspector on the right. Adobe XD will automatically detect the direction the Stack should be in (in this case, vertical) based on the orientation of the content. Congratulations, the Stack has now been created!
The cards within the list can now be rearranged by clicking and dragging up and down in the list. To ensure the cards stay aligned horizontally while dragging, holding shift will lock them into the vertical axis.
Copying and pasting the individual cards will also add the pasted cards to the Stack, maintaining proper spacing and alignment to the other cards. If a card needs to be removed from anywhere within the Stack, selecting it and clicking delete will remove it from the Stack and the cards below will fill the space.
Horizontal list Stack
In a similar way, a horizontal Stack can be created. First, group the newly created Stack with the main list component to keep the list contained. Copy and paste the new list group, and position the pasted group to the right of the original. Once again, select both elements and group them into a group - and call this group the List.
With the group selected, toggle on Stack once again in the Properties Inspector. This time, notice how Adobe XD detects a horizontal Stack due to the content being positioned side-by-side.
Now the lists can be copied and pasted to create additional lists, and rearranged to get the columns just right.
Copy cards between lists
In Kanban boards, cards are often dragged or moved between lists as they progress through different statuses. Though dragging cards between Stacks is not possible, they can be cut and pasted with minimal effort.
Select the card component to be moved, and copy it to the clipboard. To paste the card, ensure that an element within the target Stack is selected - in this case, select a card within the Stack on the target list. You can also simply select one of the cards in the layers panel. Any content pasted in XD will always be added just on top of a currently selected object or groups of objects. Then simply paste the object in and watch as other cards shift to make room for the newly added card.
New elements will paste below the selected element in the Stack, so if a particular position is desired, selecting the card above that position will expedite the process. Since Stacks support offset positions, a card may paste offset from others, while still maintaining its position in the Stack. This is easy to resolve by dragging the card back into alignment and using smart guides to position it relative to the others.
Adding some scroll
Vertical scrolling cards
Some Kanban applications or interfaces fit to the height of the browser window, and rather than scrolling the entire page, they instead scroll the individual lists when cards go beyond the height of the page.
Creating this interaction is simple to do. Start by resizing the list elements to the desired height. Responsive resize will once again do most of the work ensuring elements stay positioned properly.
Next, copy and paste the last card until the cards are overflowing the list height. Select the Stack group (make sure not to have the ### group selected rather than an individual card component or the scroll will apply only to that card) and then toggle on the Vertical Scroll option in the Properties Inspector.
Two blue handles will appear on top of the card list, appearing to mask some of the content. Click and drag the blue handles to the top of the card list, and to the desired bottom of the scrolling area. This creates the viewport where cards will be visible while they scroll.
Preview the design and use a scroll wheel, trackpad, or click and drag on the card list to view the scroll in action.
Horizontally scrolling page
Scroll groups also work great when horizontal content overflows the page viewport and needs to scroll. If for instance the number of lists exceeded the width of the page, having a horizontal scroll allows them to be accessed.
To create this, first create a few more copies of lists so that the content overflows the page to the right. Select the List Stack group (this group has the horizontal stack enabled), and this time enable the ‘Horizontal Scroll Group’ option in the Properties Inspector.
Adjust the blue handles to the left and right boundaries of the artboard to create a full width scroll area. To preview a horizontal scroll, move two fingers left and right on a trackpad, click and drag with a mouse, or hold shift while scrolling on a scroll wheel.
Scroll groups can be nested within each other allowing for both vertical and horizontal scrolling within a single artboard design, adding richness to prototypes, and realism to user-testing workflows.
The combination of Stacks and Scroll groups can take designing simple layouts like a Kanban board to the next level. If you’re keen on tracking the progress of a design project within the project itself, Adobe XD is the design software solution you've been waiting for.
