WWW… Wednesday! Anima Auto-Flexbox

by Taylor Slattery | May 20, 2020

You’ve just spent the better part of the last week perfecting your new site design in Sketch and it’s finally come time to test it. You export the code, add some new content, and preview it in your browser only to find that something has gone terribly wrong. Your elements are no longer neatly aligned. The image you’ve added is too large and it’s overlapping with the caption.

Sketch, Figma, and XD are incredibly useful tools for quickly building out websites and apps and give designers without HTML knowledge the ability to create sites for themselves. While this is a huge step forward, they have yet to entirely bridge the gap between designer and developer in one major way. The code they output is great if you exercise strict control over what type of content is placed into it. Unfortunately, in application, the types of content we place on our sites will likely vary in size. When the disparity in size between the content we designed for and the content we aim to use is too great, our beautiful layouts suffer. The once pristine, thoughtful padding and borders come together in a sort of mosh pit, much to the dismay of our viewers who can no longer read our copy.

This is where Anima Auto-Flexbox comes in. Rather than the rigid sizing of absolute layouts, flexbox allows elements to expand and contract in relation to one another to maintain the core layout. This allows for dynamic content to be placed into our layout without ruining our carefully planned proportions. We can freely add all sorts of content while maintaining peace of mind knowing that it will always work out.

Relative layouts are common practice in web design but for those of us just dipping our toes in the water from the designer side of the pond, we have some catching up to do. The tools that have enabled us to exercise greater control over our web designs by merging the roles of designer and developer have yet to fully free us from the need of 3rd party help. The HTML output by Sketch, Figma, and XD all require some further tweaking to make them fully reflect our vision in both aesthetics and functionality.

The absolute layouts generated by these software require manual adjustments to give them the functionality of a relative layout. This process is time-consuming and tedious. Having an AI to make educated guesses as to where best to apply these changes can save you a lot of time and effort, even if the result is imperfect. This can eliminate the need for other developers or at the very least, makes for easier handoffs. If you’re a Sketch user and would like to learn more about the Anima Toolkit, you can find it here.

Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep.

If you are interested in developing your graphic design skills, Sessions College offers a range of graphic design courses for students at all levels. Contact Admissions for more information.

This blog is powered by Sessions College, the leading online school of visual arts.