When working on your design projects, especially when clients or stakeholders are involved, you may want to provide frequent updates in a slightly more polished fashion. Let’s take a look at how components can help you do just this.Read More
Save time with Repeat Grids
As designers, we’re always looking for new ways to speed up our workflows, and when I first saw Repeat Grids demoed at Adobe MAX, I knew this would be one of those features. If you spend any time designing repeated elements, such as photo galleries, contact lists, or menus, you’ll definitely want to take advantage this.
WHAT YOU’LL LEARN IN THIS VIDEO
Quickly create repeated grids, galleries, and more
Drag & drop images and text
Update all entries in a single go
Add elements after the fact
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky. As designers, we’re always looking for new ways to speed up our workflows, and when I first saw Repeat Grids demoed at Adobe MAX, I knew this would be one of those features. If you spend any time designing repeated elements, such as photo galleries, contact lists, or menus, you’ll definitely want to take advantage this. Let’s dive in.
On this project, I may want to design out a gallery of all the lovely photos in this user’s library, including location information. I’ll start by drawing out a simple rectangle that we’ll use to house one of the photos and I’ll set the color to a medium grey, just so I know it’s a placeholder. Next, I’ll grab this location icon that I have saved as a symbol and place it towards the bottom of the box. Finally, I need some text for the location name. We’ll start with San Fransisco for this card – and I think for the font, I’ll go with a medium Avenir Next, with the color set to white.
Great, our first card is set up, but assuming I want anywhere from 12 to 16 on this screen, the process would be incredibly time consuming in the good old days. Now instead of manually duplicating this over and over again then editing each card, I’m going to use a Repeat Grid to save myself a ton of time and sanity. Either in the layer’s panel or by creating a selection on the canvas, I’ll go ahead and select all the layers that make up this card. Now to create the Repeat Grid, I can either use the Command or CTRL + R shortcut, or press the Repeat Grid button to the right.
You’ll now notice two handles – one on the right, and one at the bottom. These will allow me to repeat this entry horizontally, vertically, or both – and I can create as many as I need. In addition to the handles, the padding between the entries can easily be adjusted by hovering in between them and dragging on the pink area. I’ll have a few extend off the bottom of the screen to give the impression that the user can scroll. In fact, I can even pull down the artboard a touch so that scrolling is enabled when previewing this prototype. The blue viewport handle to the left lets me know what will be visible initially and what will be visible once scrolling begins.
Perfect – now the real fun begins. With the cards now set up, we need some content. Here’s a folder containing all the images I want included, and when using repeat grids, all of your images can be dragged directly into the grid, and it will populate the boxes automatically – no matter how many you’re working with, and if you don’t have enough images, they’ll repeat them until all boxes are filled. What’s just as neat, you can even do the same for text. Here I have a plain text document with a bunch of city names, and just like with the images, I can drag this file right onto any of the text layers, and Adobe XD does the rest.
You know, now that I’m looking at this design, I may want to make a few changes. For text layers, you can edit those one a one-off basis. Let me quickly change the name of this city so that it matches the photo. For layout changes, you thankfully don’t need to update each entry individually. Changing one, changes them all.
The same applies if you need to add in additional objects to your grid. Back in my assets panel, I have this symbol which I’d like to include. With any of the entries active, I can simply drag in an object and it will automatically add it to the entire grid – and when I reposition it, they all stay in sync.
And that’s a look at how you can use use Repeat Grids to drastically speed up your design workflows. Thanks for watching.
Design for every screen with Responsive Resize
Continuing on the theme of speeding up workflows, we’re going to look at responsive resize in Adobe XD and how it can help you quickly transition your designs to fit the screen size you need.
WHAT YOU’LL LEARN IN THIS VIDEO
Intelligently resize your artboards using Responsive Resize
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky, Senior XD Evangelist at Adobe – and continuing on the theme of speeding up workflows, we’re going to look at responsive resize in Adobe XD and how it can help you quickly transition your designs to fit the screen size you need. Let’s dive in.
Here I have a landing page which was designed to be viewed on a desktop, so the various elements on this page are pretty spread apart, and there’s quite a bit of padding on the sides.
Traditionally, creating an addition version of this page for a tablet or phone would be a time consuming process.
By default, Responsive Resize is turned off on artboards. This is to ensure users can extend their work area without affecting any layers, but when the time comes, a flick of the switch will turn the magic on. Let me duplicate this artboard so we leave the original in-tact. Now as I scale horizontally, you’ll notice that many of the elements are beautifully shifting across the screen, and the repeat grid is collapsing to show fewer cards, but if you look closely, not everything is behaving the way I was hoping. The larger images, for instance, aren’t resizing correctly as the artboard is pulled inwards. In this case, I’ll want to check my constraints. Selecting both groups, I’ll hop into Responsive Resize’s manual settings, and make sure that “Fix Width” is not active – and now when I resize the artboard again, the width of those images resize to remain on the artboard.
At this point, because there was extra padding on the desktop version, we have a bit more than we’d like on the mobile screen. For the bottom cards, I can simply select them both and pull them out, making sure to hold down my Alt/Option key to scale them from the center – and because responsive resize is turned on for these groups, the elements move as they should.
For the Repeat Grid above, I have two options. I can either extend it to let users know that additional cards exists over to the right, or I can jump into the grid, expand the padding, then scale the elements to fill the screen.
Let’s look at one more example, but going in the opposite direction. Here’s a mobile app that’s currently optimized for a tablet display, but I may want to resize it to show off how it would look on the desktop. Just like with the previous example, I’ll turn on Responsive Resize and drag the handle horizontally, and just like in the previous example, it’s doing a pretty decent job, but needs a touch of help. In the Trending section, I may want to restrict this to just two posts, so I’ll start by ungrouping the repeat grid, then make sure that the width of these groups is not fixed. This will let them expand nicely as I enlarge the artboard. Then if I need to, I can make a few minor tweaks.
Finally, the two text groups under More News needs to be adjusted. Turning off the fixed width and both left and right constraints will let me pull them out to fill the screen.
And that’s a look at how Responsive Resize can help you quickly transition your designs between different screen sizes using Adobe XD. Stay tuned for even more time-saving videos coming at you very soon.
In this video, we’re going to take a look at how the Assets panel in Adobe XD can help you not only store elements for future use, but keep everything up to date, as well.Read More
Fix elements to your artboards
From navigation bars to widgets, you’ve likely designed an element that you wish could remain in place as you’re scrolling through your artboards. Let me quickly show you how to achieve this in Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Create scrollable artboards
Fixing elements in place
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. From navigation bars to widgets, you’ve likely designed an element that you wish could remain in place as you’re scrolling through your artboards. Let me quickly show you how to achieve this in Adobe XD.
In this first example, we have a mobile app that I first want to enable scrolling on, so I’ll select the artboard and drag the bottom handle down until all my content is visible. I’ll also leave a bit of extra room for the navigation bar. When an artboard is enlarged vertically, as long as scrolling is enabled to the right, the blue viewport handle will let you know what will be visible immediately and what will be visible upon scrolling. Now when I preview my prototype, I can scroll down the screen, but I certainly don’t want my nav floating in space. To fix this, I simply need to select the group, symbol, or layers that makes up this element, then tick on the Fix position when scrolling checkbox to the right. This time when I scroll down my artboard while previewing, the nav bar stays nicely in place.
Let’s look at one more. On this landing page, I may want a few elements to stay fixed, and to quickly accomplish that, I can hold down shift then select both the top nav bar and the chat widget, and press that same checkbox as we did in the first example. As expected, both elements are fixed as I scroll down the page.
But what if I also wanted the background image at the top to also remain in place, allowing the content at the bottom to overlap it? To accomplish that, I’ll first want to make sure that the image is behind all the groups that will move overtop it, and that the nav bar is at the very top of the layer stack. With that done, the process is the same as before, and now when I preview one more time, I have exactly the effect I was hoping for.
And that’ll do it. Fixing elements is incredibly simple in Adobe XD. For more tips and tricks, be sure to check out my other videos, and I’ll see you soon.
Get to know the drag trigger
When Auto-Animate was released at Adobe Max in 2018, it shipped right along side the drag trigger, which can help you prototype carousels, side scrolls, and much more. Let's take a look at how this works in Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Create horizontal galleries
Animate between cards
Create draggable interactions
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. When Auto-Animate was released at Adobe Max in 2018, it shipped right along side the Drag trigger, which can help you prototype carousels, side scrolls, and much more. Let’s dive in.
On this first example, I have a gallery of images extending horizontally off the artboard, and I may want users to drag to the left in order to reveal what’s next. Duplicating the artboard over to the right, I’ll start by shifting the images over, then start making any necessary changes. I’ll enlarge the new image to match the previous one, then shrink that one down – and because I set these up as groups, all the other elements are transforming along with the images. I’m also going to hop into each mask and adjust them accordingly. The non-active image will be smaller, while the active one will be larger.
Great, making sure everything is lined up and exactly where I want it, our two artboards are now set up and ready to be wired.
Switching over to Prototype mode, I’ll select the group with the active image then drag the handle over to the second artboard. Within the properties, instead of a tap trigger, I’ll want to choose Drag for this interaction, and once that’s been selected, Auto-Animate is automatically chosen as the action. I can now wire up one of the images on the second artboard back to the first, and because XD remembers the last settings I used, there’s nothing further I need to do. Let’s see how this looks.
Previewing the prototype, I can now click and drag the gallery over to the left, and you’ll notice that all the changes I made are being animated, including the image’s mask, and since I wired it up in both directions, I can go back and fourth with ease. Let’s check out two more quick examples.
Here's a screen from a photo editing workflow I have been working on, and in specific, this is going to be the cropping interaction. I could devote an entire video on creating this design – which I might do at some point – but in short, I have a few masked elements, a dashed rotation wheel, my image, and an overlay to hide the cropped area. Duplicating this artboard over, I’ll start working on the second state by selecting the image and rotating it until the horizon is just about straight, then I’ll enlarge it so that it fills the entire bounding box. And you’ll notice that because the opacity of the overlay layer is around 80%, it’s allowing the cropped area to subtly peek through. Next, I’ll hop into my masked number counter and pull up the text layer so that the 9 is visible, then I’ll jump to the dashed circle and rotate that a touch, as well.
Perfect! With the second state now complete, just like I did a few moment ago, I can hop into prototype mode, select the layer I wish to drag, in this case the rotation wheel, and pull the blue handle over to the second artboard – making sure that “Drag” is the trigger. Now for the second interaction, I want the checkmark to lead to the final state, but instead of drag, I’ll want a tap also with Auto-Animate for the action.
Let’s check this out. Once the preview is launched, I’m able to drag on the rotation wheel to simulate the cropping interaction, then hit that checkmark to accept the changes.
Finally, let me quickly show you one more interaction. A while back I was exploring what an official Tesla Apple Watch app could look like, specifically, how the trunk and frunk could be opened quickly from the home screen. For that, two drag triggers were used – one leading to the trunk artboard, and one to the frunk. I then utilized a time trigger to jump straight to the text entering, and back to the home screen.
And when it’s time to preview the final prototype, I can easily choose which side to drag the center element, and because it cycles back to the first artboard, I can continuously test this out without having to restart the preview.
And that’s a glimpse of what’s possible using the Drag trigger in Adobe XD. To learn more about prototyping in XD, be sure to check out my other videos. I’ll see you soon.