By Matt Rae
D
esigning marketing-focused websites and landing pages often involves continual iteration, testing, and experimentation. A common element in product landing pages that often receives iterations and changes, is the pricing, or features, comparison page. This page is a core call to action for onboarding new customers into your product. When iterating through your design, having tools that make iterations quicker and easier is important. In this guide, I’ll cover how to leverage Stacks in Adobe XD to make updating, and modifying designs for comparison pages easier.
Stacks is a layout feature in Adobe XD that allows for quick reorganization of content within a group, and adapts the layout accordingly as content is added or removed from that group. For the purposes of this guide, a typical multi-card pricing layout will be used as the example.
Setting up the artboard
To get started, the comparison elements can either be added to an existing page design, or created independently. For the purposes of this guide, a separate artboard will be created to design out the pricing section, which can then be added into a page design at a later point.
Start by creating an artboard, the desktop presets in Adobe XD will be helpful for this. If you’re following along on the guide, select the 1920x1080 option.
Create a pricing card
With the foundation setup, creating the first pricing card is the next step. Since this design is going to include four cards of a similar look and feel, Components and States are going to be very helpful, reducing duplicative work, and keeping designs in sync.
Create the card background
Start by drawing the background of the card using the rectangle tool, and adjusting the border radius to a desired value.
Each card will consist of three core elements, a title, a list of available features, and a call to action button. Start by adding the title, centered at the top of the card.
Adding a call to action
Next, draw another rectangle, about 44-50 px high, and spanning 80% of the width of the card, depending on the desired look. Using the text tool once again, add the button label, and center it within the button. Be sure to set both the title, and button label text alignment to centred so that it stays aligned across component instances later on.
Add the first feature
To create the list of features, start by adding in a checkbox icon. Icons can be sourced from free services like Font Awesome, plugins like Icons or Icondrop in XD, and paid services like the Streamline Icon pack. Place the desired icon onto the canvas, and adjust the color as desired to fit the design. Then, using the right click menu, convert the icon into a component, so that visual changes made to it later on will apply to all the copies.
Next, add a text field to the right of the icon, adding in a placeholder like ‘Feature 1’. This text will be overridden across instances, so does not need to be detailed at this point. To accommodate various text sizes, switch the text box to Area Text in the property inspector on the right, and adjust the bounds to the desired position on the right.
With the area text positioned, it will now accommodate various text sizes easily. Lastly, make sure the text alignment in this case is left aligned, so the text will always expand away from the icon on the left.
Creating a Stack
To create the other items in the list, and allow for reordering of the feature list, a Stack will be used. First, start by copying the first feature item, and pasting it below to form the start of the list.
With the new feature item positioned, select both feature items, and create a new group called ‘Feature List’. In the property inspector on the right, enable “Stack” under the Layout section of the panel. Adobe XD will automatically detect that you’re trying to create a vertical Stack and set the properties accordingly.
The feature list is now a Stack, and the list items can be easily reordered by clicking and dragging on them. XD also automatically grouped the icon and text element together to ensure that they move as one group as elements are reordered.
New items can be added by copying the last feature in the list, and pasting it, the Stack will handle placing the pasted item below, with consistent spacing applied. Continue pasting until the desired number of items exist in the list.
Items can also be removed from the list by selecting them, and pressing delete, or right clicking and selecting ‘delete’ from the dropdown menu.
Creating the card Component
Now that the card has been created, turning it into a component will make the creation of additional pricing cards much easier. Start by selecting the card contents, including the background, title, feature list and button. Convert this collection of elements into a group using the right click menu or CMD + G on Mac, and CTRL + G on Windows.
With the group selected, use the right click menu, or CMD+K on a Mac, CTRL+K on Windows to convert the group into a Component. The outline of the group will now turn green, with a solid green diamond in the top left indicating this as the Main Component.
Copying this component and pasting it three times will create three instances of the component that can be used for the other cards.
Once pasted, and positioned, a new State needs to be set up to create the highlighted card for the Pro plan. To do this, select the Main Component once again (if you’re not sure where the Main component is, right click on any instance and select ‘Edit Main Component’). In the top right, click the ‘+’ next to the default state, and select ‘New State’ from the menu.
Give this state a clear name like Highlighted. With the new state selected, make the desired adjustments to the card, titles, and features list.
Now the features, titles, and calls to action can be customized for each card to demonstrate the features, and pricing included in each package. As more features are required, simply copy and paste in the list to expand, or delete items to remove them from the Stack.
Reordering the cards
In the same way that Stacks can be used to reorder the list elements, a horizontal Stack can be used to shuffle the order of the cards themselves. To do this, start by grouping all the cards in the pricing comparison page.
Next, enable the Stack in the property inspector on the right. Since the cards are arranged horizontally, Adobe XD will automatically enable a Horizontal Stack.
Clicking and dragging on the cards will allow them to be reordered, making it really easy to adjust the arrangement of the plans or packages. Since each element is using component states, changing which card is highlighted is as simple as switching the state, and updating the copy as needed.
Now as design iterations take place, or the feature lists change, time isn’t wasted on tedious layout changes, lining up pixels, or rearranging content, time can be spent on ensuring the best result.
