Artwork by Matt Rae
Prototyping is an important part of the design process and allows for experiences to be tested or validated prior to developing them with code. In this Adobe XD tutorial you’ll learn how to apply XD’s powerful prototyping features to bring to life a simple mobile photo editing screen for an app like Photoshop Express.
To follow along download the starter file containing the basic design elements. This tutorial will demonstrate two methods for creating this experience, and one includes leveraging Photoshop’s image editing features, so if you have Photoshop, open it now alongside Adobe XD.
The experience
This tutorial will bring to life this simple experience of selecting and applying filters to an image for quick edits, similar to filters in Photoshop Express, or presets in Lightroom. The goal being that as each thumbnail is selected, the main image will change to reflect the applied styling. Though this can be accomplished in a more advanced method using a singular art board and component states, this tutorial will demonstrate it over a series of art boards.
The first example will walk through how you can use Photoshop, and component states to create styled variations of a singular image, and then connect them together with a tap trigger. In the second example you’ll learn how to expand on simple tap gestures and apply more advanced interactions using the drag trigger, overlays, and using blend modes in Adobe XD. Let’s get started.
Tap to apply filters
At the core of this design is a singular component used as the image preview, and will also be used for each of the thumbnails. The benefit of using a singular component (and instances of it) is that styling changes can be made in one location, and they will show up on all the instances, significantly reducing the time to develop this photo app design.
Make a component
To start, select the image element. This image has already been masked into a square ratio, as you can see from the Layers panel. If you wish to work with your own image simply replace the Source Image element within the mask, or mask your own image. With the image element selected, right click and select Make Component. The element should now show a green selection box with a green diamond, signifying that it is a main component. A diamond shape will also appear to the left of the element name in the Layers panel.
Create states
With the component created, several states will need to be added to reflect each of the different styles that can be selected in the filter presets. In this case there are 6 available presets including the normal, non-stylized option. The normal mode will be reflected using the Default state. To create new states, click on the + button in the component menu and select New State. Name each new state accordingly to match the name of the presets in the design.
With the states created, select the first state and double-click into the source image on the component. This is where Photoshop will be used to customize how each image should look. Make sure the edits you are making are being applied to the appropriate state in the main component (solid green diamond). Right-click the image and select Edit in Photoshop... to open the image in Photoshop and begin editing.
Once the edits have been made, simply save the Photoshop document and your changes will automatically be applied to the image in XD, and applied only to the state you had selected. Since this is in a component, any instances of this component will see these styling updates applied as well (unless directly overridden). Now simply repeat the same steps with the other states to create a collection of filters for your design.
Finishing the layout
Now the elements can be compiled together to create the main screen. Start by placing a copy of the component in the main photo preview area. Then create a copy, or instance of the component, and resize each state within it to 100px height and width. This will be the base thumbnail that can then be copied and pasted to create a row of filter thumbnails.
With the thumbnails laid out and in position, ensure they are all grouped together. To make this group scrollable, a horizontal scroll group will be applied. Select the group and toggle on the appropriate Scroll Group Action in the Transform section of the Properties Inspector.
Finally, to make things more efficient, convert the thumbnail group into a component (select the Scroll Group from the Layers panel). Now duplicate the screen five times, one for each filter preset. In the next step we will connect all of these screens together simply by editing the main thumbnail component on the first screen.
Connecting it all together
With all the screens created, the first step is to change the state of the preview image on each screen to reflect the selected filter. This can be done by selecting the component instance, and toggling to the desired state in the Component menu. Once complete you should have six unique screens.
Next, repeat the same process with the thumbnail component, however this time you’ll apply opacity and positioning changes to the active thumbnail as a way of indicating what is selected. On screen one, leave the default or normal thumbnail at 100%, while reducing the others to about 50% or whatever you feel looks right for your design. Then repeat the process on the other screens, leaving the selected thumbnail at 100% and the others reduced.
For added feedback, adjust the position of the scroll group content so the selected thumbnail is always aligned to the left most guide. Be sure not to move the scroll group itself, just the content within.
Finally all the screens can be connected together. On screen one, ensure that the component is the main component, if it is not, right-click and select Edit Main Component. Connect each of the thumbnails to their corresponding active screen. This will set the interactions globally so they only need to be set in one location, making the process more efficient.
Ensure your prototype settings are set to Tap as the Trigger and Auto-Animate as the Action. Repeat this process with each of the other thumbnails in this component, linking each to their designated active screens.
With that complete, each of the instances of the thumbnail component should also have these interactions applied. Previewing the design, you should now be able to tap on each thumbnail and the preview image will change, showing the reflected filter applied. You have now completed your first photo app design in Adobe XD. Continue to learn how you can expand on this example using gestures.
Drag to apply filters with motion
Using a slightly different technique, and the same screen layout the Drag trigger can help create a unique experience for this mobile photo app design. In this example the component structure and layout will be similar, however it will leverage color overlays and blend modes, paired with the drag trigger.
Setting up the component
Once again a single component will be used. Select the image like you previously did, convert it into a component, and create the states like in example one. This time however, rather than editing the image of each state in Photoshop, this design will use colored squares placed on top of the image. These squares will move position between states to emulate a slide over effect when dragged.
With the main component selected, in the default state, draw a rectangle covering the image entirely. Then select a desired fill color and blend mode pairing to create the desired look (some examples have been provided and can be placed in the component instead of drawing). Once styled as desired, ensure you name the rectangle layer to match the filter name so it can be identified easily later on, then repeat the process creating a rectangle for each of the styled filters (don’t worry about the normal mode, as it will simply be the original photo itself).
Finally, in the default state, position all of these new rectangles to the right of the screen, aligned with their left edge positioned about 20-30px from the right edge of the artboard. Reduce their opacity to 0% so they appear invisible.
Creating the states
With the default state configured, each state can now be edited. Once again ensure you are editing the main component, so changes are applied globally. To create the first state, move the first filter rectangle overlay so it is centered and covering the entire default image, and set the opacity to 100%. This will help to create the effect that the filter is sliding in on top of the image.
Moving on to the second filter, repeat the process above to move the next filter rectangle into the center of the screen. Next the first filter rectangle should be moved off of the screen again. For each state, the previous filter’s rectangles should be positioned to the left, so that as you drag back they appear to slide in from the left, rather than the right. To make sure there is an appropriate target for the drag, set their right edge about 30-40px from the left edge of the artboard, and ensure opacity is once again set to 0.
Repeat this process for each state, ensuring the active state is at full opacity and in the centre, previous filters are aligned at the left, and upcoming filters are on the right.
Finally, following the process in the first example, re-create the thumbnail component (or reuse the same one if the filters look the same), shrinking this new component down to 100x100px, and aligning within a scroll group. The process for configuring this is the same as example 1.
Connect the screens
Once again copy all of the screens, toggling to the state of the preview image that matches the active filter.
Next, the thumbnail component can be connected using tap triggers like before, but the focus for this section will be adding the drag interaction on the preview image. In the default state, select the rectangle overlay for the next filter, and drag the prototype link to the appropriate art board. Set the Trigger to Drag and the Action to Auto-Animate. If you preview this from the first artboard and drag your thumb from the right edge of the screen to the left, you should see the first filter slide into view.
Next, repeat this interaction across all art boards, using the rectangle for the next filter as the trigger target for the drag interaction. It is helpful to set up the layer order so that the next rectangle is on top of the layer stack. You should now be able to swipe from default to the last filter using right to left drags.
Next the process can be repeated to allow for swiping backwards. To do this, simply select the previous rectangle in each (using the overhang from the left). For the first filter, since the default doesn’t have a rectangle, the drag trigger can be placed directly on the first filter rectangle. Ensure the drag trigger is connected to the corresponding rectangle for the previous filter in the series, otherwise it may not function as desired.
With that step repeated for all artboards, the prototype should now allow a drag gesture to move between all of the filters.
Pairing different triggers together like this in your prototype can help to capture different ways users may be interacting with your application, and depending on how the prototype is configured can craft varying experiences, or motion effects.
