Gap, Visual Layout & Interactive Tutorials (+ More)

Hello friends,

today’s the day for the next Antetype update.
It comes with some interesting new features:

Bridging the Horizontal & Vertical Gap

You’ve asked for it, here it is: You can now add gaps via the layout panel. These will automatically give spacing to any new element you add to that layout – and it works both horizontal and vertical.

Plus: If you enable content wrapping, you will be able to add both dimensions on a single container. It’s auto spacing – so you don’t need to set margin individually on each element.

Document image

Re-order and Nest Elements on the Canvas

Re-ordering & nesting elements using the screen inspectors is fun. Re-ordering & nesting elements directly on the canvas is it even more:

Drag any element, move it to its new position in horizontal or vertical layouts. Move it over other elements, and drop it to nest inside. No need for special containers, it just works everywhere. It’s visual. And it’s fast.

Document image

Too Little Space? Time for Truncation So Users …

… know there is something more to come: If you check the truncation check box in the text section, will be automatically added once your text exceeds the space you gave it. To never miss out on the details.

Document image

Interactive Tutorials & Getting Started

New users had a hard time starting out with Antetype. With the addition of two interactive tutorials, it will be way easier:

Both come with an explanatory video and then guide you interactively through all the steps needed to do specific things in Antetype. To check it out, create a new file and select the tutorials from the template chooser.

While Getting Started gives a broad introduction to all basic features, How to Build a Card will show you – well, who would have guessed! – how to build a card.

Pro tip: You can find even more guides on how to build specific elements like working dropdowns or input fields in the Antetype documentation. Free of charge, full of fun!

Pro tip 2: These new in-app guides make today a good day to invite your designer friends to try out Antetype. It will be way easier for them now!

Opening External Websites

It’s now possible to open external websites from within your prototype and even inside Antetype itself:

Either use the <a> tag inside the HTML field: <a href="https://www.antetype.com">Link Text</a>
Or set the action of any interaction to script: window.open("https://www.antetype.com");

Both will open the specified website in a new window. Ever had that in a prototype? Us neither!

Cloud, header_include.html & Other Improvements

As you know: Designing in Antetype is entirely offline – it will always be possible, even the whole Internet is down. We made sure shared prototypes work just as well: We’ve added additional security and emergency plans to the entire Cloud infrastructure. This will prevent any lasting outages of your hosted prototypes.

Moreover, some smaller bugs regarding uploading prototypes to Antetype Cloud from within the macOS application have been fixed as well.

We’ve also fixed a noteworthy bug in the advanced header_include feature that you might be using in some complex use cases. It will work in all scenarios again.

On a side note, we’ve renamed Layout to Float in the style inspector as it better describes what this section is about. This will prevent confusion on where to find the new Gap feature (see above).

Apart from that, this update also includes 19 smaller fixes, changes and improvements that will make your designing life a little easier and a little faster. We hope you’ll enjoy.

2 Likes

Fantastic update, thank you!

1 Like

Happy to hear that, Ben! Hope it will help in your designs

Thanks for the update and congrats. Nicely done! Can I re-enable auto-updates for the dev version as well now?

Which one might that be? I basically live inside header_include :slight_smile:

1 Like

yes, both contain the same data model.

If Antetype was not running and you double click an Antetype document in the Finder (which starts Antetype and opens the document), the header_include.html was not loaded.

Aaaaah, that’s what it was. Great stuff. Thanks!

1 Like