How to Use Adobe XD Responsive Resize Feature
If you're a designer, you would know about the new feature that Adobe launched in Adobe XD. Yes, we're talking about the Adobe XD responsive resize. Earlier, creating designs for different screen sizes was hard. But this notion has changed.
With responsive design Adobe XD, resizing screens and design elements have become easy. With a toggle button, you can turn on XD responsive resize and see the magic. Do you want to know how it happens? Well, read along for that.
- Part 1. How to Use Adobe XD Responsive Resize
- Part 2. The Best Adobe XD Responsive Resize Alternative
- Part 3. Tips for Using Adobe XD Responsive Resize
- Part 4. Customer Reviews about Adobe XD Responsive Resize
How to Use Adobe XD Responsive Resize
Here's how you can use Adobe XD responsive design:
Step 1. Create a Copy
Let's say you have a design open on Adobe XD with some menu elements. First, you need to press Ctrl+D for Windows and Command+D on Mac. It'll help you create a copy of the artboard. After creating a copy, rename it and select the artboard. Now increase the width of the artboard.
You'll see the inner elements don't change size. It's because Responsive resize is off by default. Now, you see what happens normally + revert the changes.
Step 2. Observe What Happen
Turn on responsive resize Adobe XD. And now increase the width. You'll see that the elements reseize in a better manner—however, it's still not perfect. So, revert the changes again.
Step 3. Get Organized
You would see that after turning the responsive resize on, the elements still do not resize properly. It's because they're not grouped. You need to select the elements and group them. Now, try increasing the width. Did you notice? The elements resized perfectly.
Step 4. Check Constraints
Now, the responsive resize does the job. But when it comes to images, you need to check the constraints. You can press Shift+Click and select the images you want to select. After that, you can manually change the constraints from auto to manual. When you resize after that, the images won't stretch.
Step 5. Expanding the View
Now, you can expand the view by pressing Alt or Options button while keeping the images selected. This way, you can adjust everything better as per the screen size.
Step 6. Showing Repeat Grid
Let's suppose you're showing a gallery or set of images in a repeat grid and want it to resize. It's easy. You need to bring the gallery in the present view and drag to reduce its width to fit a smaller screen. This way, you can accommodate it into the artboard.
Step 7. Move Things Around
While the Adobe XD Responsive Resize does a fine job in achieving a mobile design, you'll still see some errors. The errors will be minor, though. You can easily select the layers, headers, or any other elements to suit the design. In a nutshell, Adobe XD Responsive redesign makes the job easy.
The Best Adobe XD Responsive Resize Alternative
Adobe XD is a great tool but it can be overwhelming for people who have just started their UI/UX designing journey. In such cases, using a beginner-friendly tool like Wondershare Mockitt is the best option. It is an online prototyping solution that allows you to create professional prototypes within a short time. Mockitt is a perfect alternative to Adobe XD Responsive Resize as it comes with all essential features that you would need to complete your designing tasks. It features an easy drag & drop editor, which eliminates the need for any coding skills. All you have to do is to select the required element and drag it to the canvas. If you have your own custom images and resources, then Mockitt also allows you to upload them into the library.
With Mockitt, you can create prototypes for various devices such as IOS, Android, etc. It is an online tool, so you only have to create an account to start prototyping, no additional software required. There are many more things that make Mocitt ideal for everyone. From linking between pages to prototyping sharing, everything can be done within a few clicks. The learning curve is shallow, so you won't have to invest more time and effort to master its features and functions.
Tips for Using Adobe XD Responsive Resize
1 - Use Numbers To Change Opacity
If you are adding several elements to your project, then managing the opacity could be tedious if you do it with the traditional method. With Adobe XD, you can do that by typing numbers. Simply select the object, and type 1 for 10% opacity, 2 for 20% opacity, and so on.
2 - Name Assets Quicker
Most people don't name the assets and skip this process as it feels boring and takes extra effort. The interesting thing is that you can name any asset by pressing the Tab button. Along with this, if you want to export your assets panel to any other document, then you could also do that by clicking the '+' button.
3 - Adjusting Corners
Shapes are essential elements that are used in the majority of the UI/UX design projects. With Adobe XD, you can turn a rectangle into an oval by adjusting corners. Simply hold the corner and drag it to change the radius of the entire rectangle. If you want to change only one specific side, hold ALT/Option while doing it.
4 - Path Restructuring
If you are drawing lines to create shapes, then you can open the path at one point by engaging the pen tool. You only have to press "P", then you can easily start restructuring the diagram. You can also hold the Opt key in Mac and Alt key in windows to unlink the control points. If you want to create better refinements, you will have to turn a Boolean group into a path.
Customer Reviews about Adobe XD Responsive Resize
The release of Adobe XD Responsive Resize has impacted many customers across the globe. After all, it has a huge customer base. One of the benefits most users see is the ease of designing for different screens. Earlier, users had to manually work around the constraints.
It was a cumbersome process that took time. But with the Responsive Design, Adobe XD predicts the constraints and tries to manage them on its own. So, when you resize the screen, the elements behave as you would expect.
And even if you're not satisfied with the default settings, you can override them. You can change the constraint settings from automatic to manual. This way, you can work around different constraint settings to make it work as you want. Also, the users can group the elements to resize them the way they want.
The downside of this feature, as per the users, is that this feature is not available for preview. Many users highlighted this problem as they couldn't show their clients how the to resize would look on the spot. This is something; Adobe should work on.
Professional users, especially designers, expect the responsive resize to handle the character spacing, font, and line spacing. According to them, it will further increase efficiency and will reduce the time spent.
In a nutshell, most users are happy with this feature as it reduces the time and hassle in resizing elements. It's quite handy if you are creating multi-platform designs. However, you still have to put in some effort in achieving the perfect results. Hope this article will solve your queries and provide some valuable information.
