Bringing Auto Layout to UXPin

AutoLayout blog header

Exciting news in UXPin! From now on, you can design faster with our new feature – Auto Layout. Align all the components the way you want within seconds and speed up your design workflow. 

At UXPin, our goal has always been to simplify design process and make sure designers have enough time to focus on meaningful work. We believe that Auto Layout will remove the pain of manual resizing and make your work more intuitive. 

Challenges of designing without Auto Layout 

However, we want it to be true, designing isn’t only creative and fun work. You have to adapt to the constraints of your UI/UX tool. As designs are static by nature, without the proper technology, you can’t expect them to behave like a coded product. 

This means every element you draw only visualizes how it’s supposed to look and work. For example, when you design a simple button, first you draw a rectangle and then add text. The moment you want to expand your text, you need to adjust the length of the rectangle as well. It shows how designers need to think about every relation between all the UI elements. 

The disconnect between components translates into more repetitive work – constantly resizing multiple elements, adjusting them separately so that they can create a coherent whole. It takes too much time to do everything manually. On top of that, you have to keep the changes consistent in all elements, and let’s be honest – it’s easy to forget about setting the right paddings and gaps, especially when adding new elements to your design. 

That’s when Auto Layout can remove all those bottlenecks.

How Auto Layout works

Auto Layout gives you the freedom to focus on what matters and remove all the repetitive and manual work. We made sure that your UI won’t be constrained by the laws of static design but can benefit from the code-approach that we like so much. Thanks to Flexbox – CSS Flexible Box Layout, you can apply Auto Layout to groups as well as components to make chosen elements depend on one another’s position. 

Auto Layout removes all the hassle and will take you just a few seconds to adjust the components the way you want. Let’s take for example a simple button – whatever you need to change in the text, the rest of the elements will adapt to the new text length. It’s only one of many cases when Auto Layout speeds up your work. If you design repeated elements like a menu and want to swap the items’ places, or add an expanded/collapsed view, our new feature will save you a ton of work.

Get started

Drop elements to the canvas, select the group or pick a component from your library. Add Auto Layout in the properties panel and your design will behave in a flexbox-like manner. You can also add Auto Layout components to a Design System.

Align all the elements within a few clicks – Auto Layout can help you: 

Group scattered elements and wrap them how you want

Just by wrapping the elements, you can align them right away and adjust how many lines they should take by controlling their width or height. Say goodbye to moving the separate boxes around. 

Lay out and distribute elements

If you want to distribute your components in relation to each other, just set the vertical or horizontal direction and choose how they should be laid out (start, center, end, or stretch). 

Keep consistency

With Auto Layout maintaining consistency among gaps, paddings, borders, and radiuses is easy. When you apply the wanted value, all the elements with Auto Layout will align accordingly.   

Resizing

Resizing comes in handy when you want to change one chosen element in the Auto Layout group. You can still maintain all the properties set for the group and play around with one element by changing the width, height, or filling out the main group. 

TL;TR

Auto Layout will automate some of the manual work that you have to do when tweaking, aligning, and resizing elements. Groups of items can now align intuitively to work as a whole. Check all the functionalities in our documentation. Need help? Ask our community.

Sign up for a trial and align all your components in one click.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you