A
common feature of many informational or product web pages is a frequently asked question, or FAQ page, which attempts to collect commonly asked questions and answers into one easy-to-read format. FAQ pages are great for giving customers the information they need to evaluate a potential purchase, and to understand the details of a product or service.
A common FAQ page design approach is to use an accordion style component that expands to reveal answers to each question. Prototyping an interaction like this with simple artboard transitions doesn’t provide a clear picture or representation of the interaction, and can lead to many artboards depending on the volume of questions.
In this guide, learn how to design an FAQ page by leveraging components and component states, along with powerful layout features like Stacks and Padding within Adobe XD to create realistic interactive prototypes in your next web design project.
Choosing a layout type
There are several different formats in which FAQ pages can be found. Some pages display a list of questions, and clicking on the question link will open a detailed answer in another page. Other examples will display questions and answers side by side without the need to click to see the answer. The most common approach, however, is using expandable accordions to show a series of common questions, and expanding each one to see the associated answer. This expandable approach is a great approach, especially if there are numerous questions. This guide will cover creating an expanding accordion style FAQ.
Defining the row style
Since the FAQ is a series of identical elements with text overrides, the first step is to define what that element looks like and how it functions. Once that is defined, converting it to a component will allow it to be copied across the page and reused with minimal effort.
The simplest approach for layout is to use a rectangle as the background layer of the row, with text left aligned on the left of the element, and an arrow or chevron to the right.
The style of the background can be adjusted to match the aesthetic of the rest of the site, but common approaches are either top and bottom borders, like a series of table rows, or individual cards with spacing between each row. For this guide the card approach will be used.
Add Q&A elements
Using the rectangle tool, draw out the rectangle to the desired width and height of the FAQ card. Using the text tool, add a left aligned text on top of the rectangle. Using the text controls in the Properties Inspector, set the text field type to auto-height text so that the text box will expand vertically as text gets longer.
Next, using a plugin like Icons for Design, or a custom icon set, add in a chevron arrow to the right side of the rectangle, and position it so it points to the right. To ensure a consistent width and height, group the icon with a transparent square object.
When the accordion is open it will contain an answer to the associated question. It is a good idea to design out the end state of the accordion before converting it to a component.
Using the Text tool, draw out an auto-height text area filling nearly the entire width of the rectangle, and resize the rectangle background to include the text area.
Now you should have a series of elements covering the rectangular background element. The next step is to begin compiling these elements into groups and apply layout controls so that the instances of this row can be manipulated easily for the various questions included.
Grouping elements
Grouping elements together creates important associations for resizing, and layout controls. It is a good practice to group elements together that are related, and then group those groups in parent groupings. This building up of groups makes it easier to manage dynamic changes later on.
Start by grouping the question and the chevron arrow since they’re a horizontal row. Name this group Card Title.
Next, an internal group should be created for all the content within the FAQ card. Do this by selecting the newly created Card Title group, and the answer text box. Create a group out of these elements and call it Card Content.
Finally, select the background rectangle and the Card Content group and make one more grouping called FAQ Card.
There should now be three groups cascading down from each other in the Layers panel. This will allow Stacks and Padding to be applied to each one to control layouts.
Apply Content Aware Layout
Start by selecting the Card Title group from the Layers panel. In the Properties Inspector on the right, enable Stack. This will transform the group into a Stack, making it easier to adjust spacing later on.
Next, select the Card Content group. Once again a Stack will be applied to this group, however this time the Stack will be a vertical stack, allowing the spacing between the title and the paragraph text to be adjusted as needed.
Finally, select the FAQ Card group and apply Padding in the Properties Inspector on the right. This will ensure that the spacing between the Card Content and the background layer remains consistent as the element resizes, and the paragraph text is hidden and shown.
Create FAQ card Component and states
The next step is to convert this group of elements into a reusable component so that creating additional FAQ cards is simple, and they can retain visual properties as edits are made.
The first component to create is the card component itself. Select the FAQ Card group, and using the right click menu, select Make Component. A green border will appear around the group, with a green diamond in the top left corner. This indicates this component is the Main Component, any changes made here will cascade down to any copies, or instances made of that component. To make it easier to work with, copy this component and move the Main Component off of the artboard.
Now that the component is created, an open and closed state should be defined. Since the component was designed in the open state, with the answer visible, this can be left as the Default State, and the collapsed version will be defined as a new state. Create a new state by clicking the + button in the top right corner of the Component menu, and selecting New State.
Name the new state Collapsed. With the Collapsed state still selected the properties can be edited. Ensure these edits are being made to the Main Component with the green diamond. To keep the animation simple, the paragraph element can simply be hidden in the layers panel in the collapsed state. Find the eye icon and click it to hide this layer.
Now, toggle between Default and Collapsed to see how these changes are reflected. The component should appear to open and close as the states are toggled. These states will be leveraged to create the interactions in the overall FAQ component.
Duplicate the FAQ card component
With the card component and states now defined, the card needs to be duplicated to create as many FAQ cards as are needed. First, to set the cards up for interactions later on, place the FAQ card component into a new group and call it FAQ Container. This is going to act as a trigger target for prototyping interactions. Ensure the component is set to the Collapsed state.
To quickly replicate these cards, a Repeat Grid can be used by selecting the FAQ Container and dragging the bottom green handle until the desired number of cards are visible. Adjust the spacing as desired.
Once copied, select Ungroup Grid to remove elements from the Repeat Grid, this will make it easier to apply the required layout controls like Stacks. Select all of the duplicated FAQ Container groups and place them into a group called FAQ Section.
Enable Stack on this FAQ Section group. This will allow control of the spacing between card objects, and automatically adjust the layout as each card opens or closes. Try it by selecting one of the components and toggling the state between default and collapsed.
Here the questions can be overridden so that each one is unique. Be sure to apply the updated question text to both states.
Create the parent component
With all the cards in place, the FAQ Section group should be converted to a component so that the interaction states can be created for opening and closing each of the card groups. In this scenario, only one FAQ card can be open at a time to ensure a focused viewing experience for visitors. Using the right click menu, convert the FAQ Section group into a component.
Next, in the Component menu in the top right, create a new state and name it Card one open. With the new state selected, click into the first card and select the FAQ Card component, and toggle the state to Default State so that it appears as open (the other cards should be collapsed).
Repeat this process creating states for each of the remaining cards and naming them to match. When adding a new state from the component menu, ensure that Default State is selected when you click + as that will copy the properties of the default state to the new state and make it easier to work with.
Adding interactions
Now that all the components are connected, adding interactions will allow a user to click on the cards and open and close them to reveal the answers inside. Since triggers can be set on any internal element within a component, each FAQ Container group will be a trigger for its respective state.
Start by toggling into Prototype mode in the top left corner. Then select the first FAQ Container group. Rather than dragging the blue arrow to a destination, click on it, and in the Properties Inspector on the right, set the destination to Card one open, the open state defined on the FAQ Section component. Repeat this process with the other cards by linking them to their corresponding open states.
Next, toggle the FAQ Section component to that Card one open state and create a link navigating back to the default state.
Repeat this process with the remaining cards to allow them each to be opened and closed. In the preview window, whenever one card opens the layout will adjust thanks to Stacks and Content Aware Layout.
Making changes to the FAQs
To make changes to copy, or add additional cards, remember to always make those changes first to the default state of the component so that the changes will cascade down into the other states. If you add a card to one of the open states, it won’t propagate to the others. Consider the Default State to behave similar to a Main Component.
