The develop menu

Since the beginning of Antetype we had a scripting-language embedded, which was mainly used for developing or help out with actions which did not get a real UI so far. In 1.7 we made the decision to make this functionality available. To use it, you have to first enable the Develop-Menu in the Preferences:

Screen Shot 2015-02-13 at 21.24.48

First of all: sorry for the messiness of the menu, blame it on me :) Just a quick overview about the various items:

  • F-Script contains a simple UI to write own scripts using F-Script. A later blog-post will explain it in more detail. If you can’t wait just contact me or post in our forums.
  • Export HTML/CSS Prototype exports the project as a pure HTML/CSS-prototype. Unlike the Web Viewer, which renders the screen in JavaScript in a canvas-tag, this one builds real HTML which might be reused. This is not finished, just try it on your documents.
  • Colorvision contains some script which simulate various forms of color blindness.
  • Elwoods HTML Export this script was idea from Elwood (hence the name). Yet another way to export an Antetype project for the web. It exports one image per screen and generates an image map for “Goto Screen-Actions”.
  • Force Update Widget the selected widget instance is updated with the changes, all others are reverted. All others will look the same (apart from individual properties/content)
  • Open Scripts Folder just opens the folder containing the scripts in the Finder
  • Replace Colors allows to replace color values. For now a very crude UI, you have to use CSS-hex-colors
  • Replace Font Family allows you to replace font families. (Currently works only for plain text)
  • Replace Text a simple way to replace text (case sensitive)
  • Screen Statistics display some statistics about the current screen
  • Used Colors opens a page in the browser with all used colors in the Antetype document

Quiet a long list, hopefully I did not miss one. We will continue to expand this more. We created a github repository: which will get updates over time. If you have ideas for scripts, don’t hesitate to contact us. We will try to add them.


Antetype 1.7

we are happy to announce Antetype 1.7. The update is available today. The App Store-version has to wait a few days until Apple approves it.

The main focus of this release is the improved exchange of prototypes with other people, who not necessarily use a mac (and could use our Antetype Viewer). We addressed the main difficulties with our existing web viewer:


The web viewer always supported the same layout/interactive features of the main application, but due to a lack of performance it was not always possible to for example show the layout changes while the window size changes. The performance is greatly improved in this versi0n.

Support for Web fonts

Antetype now converts all used fonts into a format usable in the web browser. If a font can not converted automatically, the user can supply his own web-font or use an CSS-fallback:

Screen Shot 2015-02-13 at 17.16.29

Usable without a web server

No need to upload the web viewer on a web server. It is now runnable locally on Chrome, Safari and Internet Explorer.

Apart from the improved web viewer this release includes a bunch of other fixes and enhancements. See the announcement for the whole list of changes.


Antetype 1.6.2

We are proud to announce the release of Antetype 1.6.2

The focus of the development of Antetype 1.6.2 has been improving the compatibility of Antetype with OS X 10.10 (Yosemite). The changes required were mostly visual updates as can be seen in the list below.

This release is not a simultaneous release for the standalone version and the app store version, so those who have purchased from the App Store will have to wait (an additional 10 days maybe?) while Apple approves this version.

New icons

The biggest change in this release are the new icons in the toolbar and the Screen Inspector.

New Toolbar:


New Screen Inspector and status bar icons:


Consistently Green

Since the introduction of the Style Bar in Antetype 1.3, there have been two colors associated with the update / revert indicators. In the Style bar the color was green but in the Style Inspector the color was red when there was a changed property.

In version 1.6.2 of Antetype we have updated the Style Inspector so that all changed properties are now show with green dots.


This also applies to hierarchy changes in the Screen Inspector:



Shared / Individual Indicator

Antetype 1.6.2 has also introduced a new indicator to the Style Inspector.

At a glance it is now possible to see if a property is shared or individual for a widget. Individual properties are no longer shown as circle outline, but as a filled circle.


Bug fixes

Many big fixes and crashes have been addressed in this release – please review the release notes for more details.

Documentation update

Over the next week we will update the online documentation so that the images reflect the new icons.

Release notes

You can find the full release notes for Antetype 1.6.2 on our support site

Faster Iterations mean More Experimentation

Experimenting with design choices is highly desirable in the design process. As a design evolves via multiple design iterations and as fidelity increases the time it takes to experiment and try out different design ideas also increases. This is not the case for designers that use Antetype.

Lego Scientist and Frankenstein -

Several features of Antetype such as Smart Dragging, Automatic Layout and Widgets all enable designers to experiment with different ideas for a design without having to do lots of work.

Smart Dragging enabling experimentation in a design

Smart Dragging provides immediate feedback as the designer makes changes by immediately updating the design while objects are dragged around the design.

Smart Dragging is only possible because of the advanced Automatic Layout system in Antetype. If you would like to read more about how Antetype reduces the time spent working on tedious jobs please read “The end of Nudging” to find out more about Automatic Layout.

Widgets also allow designers to experiment and immediately see how changes impact an entire screen.

Using a widget in Antetype to experiment

Widgets are a key feature of Antetype, enabling reusability and consistency with little effort. If you would to read more about widgets in Antetype please read “Consistency, Consiztency, Consitency…”.

Having the freedom to rapidly experiment and “play” with a design encourages a designer to quickly and more deeply understand the various options that are available. Antetype enables faster iterations and more experimentation because it is designed from the ground up to be a unique UI design tool build specially for UI designers.

You can download a free 30 day trial of Antetype from our website and see for yourself.

This post is part of a series of posts about how Antetype helps reduce the tedious work, read more about No More Pixel Pushing.

Consistency, Consiztency, Consitency…

Consistency in a design / mockup / prototype is hard to maintain.

A design should be consistent in content across multiple areas of the same screen, across multiple screens and in some cases across different projects.

Ibex Relief, Church of Abba Afse, Yeha, Ethiopia by Alan, on Flickr -

Design consistency relates to:

  • colors
  • fonts – family, variation and size
  • styles across elements (e.g. rounded corners, padding and margins)
  • re-usable elements all match (e.g. buttons, tabs, headers etc)
  • data – names, dates, headers, footers etc

The typical level of consistency sought by a designer takes a lot of work, a lot of reviews and lot of changes to maintain consistency in a design. As soon as there is a change request a review of consistency has to happen again.

Keeping a design consistent throughout the life-cycle is a real pain for designers who are not using Antetype. No other UI design or rapid prototyping software offers re-usable design components with custom sharing for the properties or the facility to compare different usages of re-usable components.

Using widgets to maintain consistency

This is not the only way to maintain consistency in Antetype, you can read about other methods in this article such as using Automatic Layout or OS X color lists or even Property Binding.

These features not only make Antetype unique but help the designer to easily maintain consistency across many screens and even documents using the widget library. No longer should a change request create fear for a UX designer.

The rest of this article outlines the details of how Antetype helps maintain consistency, while you read it why not download a 30 day trial of Antetype in the background so you try it yourself.

Using widgets for consistency

Antetype widgets are re-usable components that can be re-used within screens, documents or in many documents.

A widget can be created from any hierarchy of elements in Antetype and then re-used throughout a design. A common example of a widget would be a type of button that is repeatedly used. As a widget any changes to the button will be immediately reflected across all buttons on the screen.

You can learn more about Antetype widgets in the Getting Started Tutorial for Antetype or in the Tutorial 2 – Widgets.

6 versions of a widget each with individual text

Antetype highlights widget usage that is inconsistent with the master widget. Inconsistencies happen if a widget instance is modified but the changes are not applied to the master widget. If you select an inconsistent widget instance you will see two green and gray circular buttons on the style bar.

Using these buttons a designer can choose to update the master widget with the changes (and therefore all other instances) or to revert this instance to match the master widget.

6 versions of a widget top left has modified background

Pressing the green circular button on the style bar will result in the background changes being sent to each instance.

6 versions of a widget after update

Why has the background changed and not the text?

Not every instance of a widget needs to be the same though and with Antetype you can mark which style properties are unique to each instance and which are shared across all instances of a widget. As a default text defaults to always being unique to each instance of a widget, but background fill defaults to being shared across all instances of a widget. The sharing settings for each style property are unique for each widget.

If we use the Style Inspector to change the background style property to be individual, we can then modify all the backgrounds of the widgets.

Shared / Individual menu in the Style Inspector

6 versions of a widget all have modified background

If further changes are made to the master widget (e.g. rounded corners, shadow etc) the individual style properties (background color, text) are not overridden.

6 versions of a widget all modified

Widgets can also be configured for different states so that a single widget can be used for example to show different states of a button (mouse-over, pressed, selected etc). Using states of a widget enables consistent representation of a widget in these different states.

Using widgets to managing consistency of re-usable elements is simple and quick. Designers that build Antetype documents with widgets almost need not worry about consistency.

 Using the Widget Library for consistency

Similar to the way that widgets are re-used in a document, widgets can be re-used across documents via the Widget Library.

If a widget has been sent to the widget library then the master widget can be compared to the widget library version and the changes sent to the widget library. This process can be repeated across multiple documents first sending changes to the widget library and then taking the changes from the widget library into other documents.

Send Changes to Widget Library Menu Entry

Using Automatic Layout for consistency

The Automatic Layout system in Antetype (read more about Automatic Layout in the post “The End of Nudging”) is a great time saving feature, but it also helps maintain consistency.

Automatic Layout rules in action as a screen resizes

Using Automatic Layout a single design responds to changes in width, by flowing content, re-sizing content or showing and hiding content. Automatic Layout allows designers to use a single design to generate images of how a screen will appear for phones, tablets and desktop displays. The use of a single design means that it is simple to maintain consistency across screen sizes.

Automatic Layout rules in action as a screen resizes

When interactions are added to your Antetype design, then Automatic Layout provides more consistency. Imagine a screen that expands some information in response to a click, in Antetype when this happens the screen will flow around the additional section. This means that additional designs do not have to be created for each of the states of the screen. Using Automatic Layout encourages a single design for all screen states which in turn provides easy to manage consistency.

Interaction causes layout to expand

 Using OS X color lists for consistency

The Color Picker in Antetype provides quick access to Color Lists that have been created in the standard OS X Color Picker. This means that a single color list can be maintained across different OS X apps. You can find our more about this in the blog post “New Color Editor – Antetype 1.3”.

OS X Color List in Antetype Color Picker

This approach is only suitable for designs that are constrained by a single palette of colors at the start of the project because subsequent updates to an OS X color list will not result in changes to the Antetype document.

Using property binding for consistency

Property Binding in Antetype can also be used to help maintain consistency. This is not a solution we would recommend for all designs but in some circumstances it is being used for exactly this purpose.

If you are not already aware of Property Binding read more from our blog or the help pages.

Property Binding allows a designer to link the style properties of one element to another. For example this allows the background of one element to be linked to the background of another, or even the font of one element to be linked to another.

Some Antetype designers use Property Binding as a way to centrally control colors and fonts. This is done by creating a “style screen” that contains elements for each of the colors to be used in a design and a set of elements that define the fonts, styles and sizes to be used.

Style screen with a project color palette defined

The designer then uses Property Binding to manually link each element in a document to the elements in the “Style Screen”. This means that making a single change on the “Style Screen” will be reflected across an entire document.

It should be noted that Property Binding was not designed for such usage, and although it can work in this way, using it this way may produce unusual results.

N.B. There are also some restrictions to using Property Binding that make usage a little complicated.

The first problem is that widgets do not hold external references to property binding sources. This means that is it possible to use property binding within the hierarchy of a widget but not with an external reference to a “style screen”. To get around this restriction widgets can be duplicated using copy and paste or the duplicate action instead of being dragged from the widget inspector. Using Cut and Paste will maintain the external references for the widget.

The second problem is that Property Binding does not work across documents meaning that it is only a solution within a single document. It is possible to use Property Binding in combination with widgets that are shared across documents using a widget library but such a workflow is not for the faint hearted.

This post is part of a series of posts about how Antetype helps reduce the tedious work, read more about No More Pixel Pushing.

You can download a free 30 day trial of Antetype from our website.

The end of nudging

Nudge, nudge, wink, wink - say no more - Monty Python TV Sketch

Nothing is more frustrating than the process of making sure everything is correctly aligned within a screen design. OK, there is something more frustrating: Having to change a screen that you have only just perfectly aligned and then having to re-align everything to fit around the change.

With Antetype these frustrations do not exist.

Antetype has an advanced automatic layout system that re-calculates the layout of the elements in a design immediately or even “on-the-fly”. When adding, removing or rearranging items the design flows around the changes making or removing space as required.

N.B. Click on the image to see the animation at the correct scale.

To utilise Automatic Layout designers just need to include some rules within their designs about how elements should behave when a layout is calculated. These rules are simple but when combined together enable Antetype to make complex layout decisions without requiring any input from the designer.

Antetype’s layout rules mostly rely on the chosen hierarchy of each screen, but also use properties from each element in the hierarchy.

Read on to find out more about how Antetype can end nudging for you – while you are reading why not start a download of our free 30 day trial in the background.


A design built in Antetype is more than just shapes arranged in layers on a canvas. An Antetype document consists of a number of screens. Each screen then has a number of design elements arranged in a hierarchy which is similar to the HTML DOM.

Nesting the design elements in a hierarchy allows Antetype to infer the relationships between design elements, using this information when calculating layout changes.

Element D is a container with A,B & C nested inside Element D is a container with A,B & C nested inside
Element D is a container element with A,B & C nested inside element D.

In addition to an elements place in the hierarchy, the following properties are also used to automatically calculate layout changes.

Layout Direction

D has horizontal layout - A,B & C align horizontally
Element D horizontally lays out nested elements A, B & C.

D has vertical layout - A,B & C align vertically
Changing the layout mode of D to vertical results in a new layout of A, B & C.

Fixed size elements

A,B & C have fixed sizes
A, B & C all have fixed sizes as the container D changes size.

Stretching elements

B has a width that stretches
B is now set to stretch horizontally to into the space created as D increases in size.

Shrinking elements

The element shrinks to the content
When the text inside the element changes, then the size of the element adapts to the text. This applies to all content, such as nested elements, within a container.

Maximum sizes

B has a maximum width of 60px
B has a maximum width of 60px, when B no longer stretches

Minimum sizes

B has a minimum width of 60px
B now has a minimum width of 60px, when B no longer reduces in size


All elements have a margin set between them and other elements in the same container or from the sides of a container element (D in this case).
In the images above A,B and C all have margins of 3px on each side.


All elements have a padding between their sides and any content (nested elements or text).
In all the images above D has a padding of 17px.

Putting it all together

For the sake of simplicity the examples above focus on changes in the horizontal direction, but the same is possible vertically too. It is even possible (and typical) to combine different rules both horizontally and vertically in elements.

As containers are combined and different rules added, designs become more complex in how they respond to changes. In the animated example below many rules are being used to control how the design reacts to the changes as element K is resized.

Automatic layout with many elements
Here is quick explanation of the layout rules used:

  • The main container (K) uses a vertical layout, within K there are 3 nested containers (D,G & J) all the nested containers stretch to the width of K.
  • Container D should be familiar from the above example with B stretching to fill space.
  • Container G is stretching vertically to fill the space created as K expands.
  • Elements E & F are stretching both horizontally and vertically.
  • Container J is no different from D except that it contains only a single element J

Re-arranging on-the-fly without nudging

Making changes to the layout of an Antetype design is easy because nothing has to be manually nudged as a result of the changes. This makes experimentation much quicker.

Re-arrange on-the-fly

In this example all the elements in the screen automatically re-arrange as element C is dragged around the design. When C is eventually nested inside container J and next to H the design fully re-calculates the layout.

This post is part of a series of posts about how Antetype helps reduce the tedious work, read more about No More Pixel Pushing.

You can download a free 30 day trial of Antetype from our website.


Adapting your iPhone 5 designs for iPhone 6 & 6 Plus with Antetype

With the announcement of new iPhone sizes from Apple yesterday, let’s just have a quick look at how quickly an Antetype design can be adapted for the two new phone sizes and even in the landscape orientation.


Below are the steps needed to adapt the design to any screen size, but in this case we will show the examples for the new iPhone 6 and iPhone 6 Plus

1.Open the iOS 7 – Phone  Settings Template

Press ⌘+N to Open the Template Chooser, then select the iOS7 – Phone Category and choose the Settings template

2. iPhone 5 / 5S / 5C sized template – 320 x 568

3. Set the screen to the iPhone 6 dimensions (375 x 667)

N.B. The screen should be selected when you open the file – if not the wrong cell will be changed.

This now shows the extra area of the new iPhone 6, but the content is still sized for an iPhone 5

4. Select the Settings object

Open the Screen Inspector (⌥⌘1) and select the Settings cell from the list (1)

5. Open the Size Editor

Note the size of the Settings object is set to Manual Width and Height resizing

6. Change the resizing to Stretch

This means the Settings cell will now stretch to the size of the screen

7. Select the screen again

Make sure the screen from the upper list is selected (1) and nothing is selected in the lower list (2)

8. The content now stretches to take up the entire screen.

9. Change the size to match an iPhone 6 Plus (414 x 736)

The content again stretches to the size of the iPhone 6 Plus

10. Check out the content for an iPhone 6 Plus in Landscape (736 x 414)

Again just change the size of the screen to match

Antetype 1.6.1

We are proud to announce the release of Antetype 1.6.1.

The release is a simultaneous release for the standalone version and the app store version.

Minor bug fix

There was a minor bug which occurred when some files were upgraded to the new format used in 1.6.

Antetype OS X Viewer also updated

The OS X Antetype Viewer that is available in the Mac App Store has now also been updated and released.

Release notes

You can find the full release notes for Antetype 1.6.1 on our support site

Help us to promote Antetype

We need your stories


We are starting work on a big promotional push for Antetype and we need your help.

We know you have great stories about Antetype has helped you:

  • how you no longer have to spend time in Photoshop nudging things around because of the Antetype layout system

  • how stretch and shrink sizing have saved you time adapting designs to new requirements

  • how you can now edit designs live in meetings to quickly iterate and therefore turn things around in shorter times and reduce the number of meetings

  • how implementations more thoroughly match your intentions because developers have better understood what your designs mean

  • how you found your lost cat using Antetype and discovered Eldorado the lost city of gold….. ok maybe not

We need you to spread the word about how our layouts, widgets, breakpoints and specifications have made you more efficient and improved your working life – would you do that for us?

Here is how you can help:

  • tweet about us – recommend Antetype to your followers

  • refer people to great examples at on twitter or Facebook or elsewhere

  • mention us on Facebook

  • post about Antetype on LinkedIn

  • vote for us on our page

  • Publish a blog post about the benefits of Antetype and how it has made your working life better

  • contact us about writing a case study on your usage of Antetype

  • list Antetype as a skill on LinkedIn

  • write a how to article about how to do certain things in Antetype

  • blog about Anteype best practices

  • attend a local user group for UX designers and present Antetype (we can support you in this with licence giveaways)

  • create a video tutorial for

  • or any other ways you can think of to spread the word about Antetype

If you can do one or two or even three of the things on this list then we will give you a thank you shout out tweet and mention you on Facebook too – and even mention you in a follow up post on this blog – please offer any links for us to use.

If you can do 4 or more of these things then we will dispatch to you one of our exclusive Antetype T-shirts, just give us an address and tell us your size!

 Antetype T-shirt - FrontAntetype T-shirt Back "Shrink to Fit"

If the T-shirt doesn’t grab you then please contact us and we will find some other useful reward for you.

If you create a how-to or tutorial video for us then we will sort out an even better prize for you – just get in contact with us.

So please help us get Antetype promoted, remember the more users we have the more sustainable Antetype is and the more features we can add in the future.

Antetype 1.6

We are proud to announce the release of Antetype 1.6.

The focus of the development of Antetype 1.6 has been performance improvements and bug fixes, you can find out more details in the release notes.

The release is a simultaneous release for the standalone version and the app store version.

Package file format

The biggest change in this release is the move to a package based file format. This change matches those made by many other apps in recent years and has been essential for the sandboxed version of Antetype to work correctly.

The change to a package based format will also allow to introduce further performance changes in the future will be added slowly in future updates.

Updated iOS Antetype Viewer

The iOS Antetype Viewer has also been updated to take advantage of the latest changes made to Antetype – please update from the iOS app store.

OS X Viewer App waiting for Apple released

The OS X Antetype Viewer that is available in the Mac App Store has not yet passed the Apple review we expect this to be available at the end of this week in the App Store has now also been updated and released.

OS X 10.7 support

With Antetype 1.6.0 we sadly have had to drop support for OS X 10.7. The cost of maintenance for 10.7 was becoming prohibitive especially when 95% of our users are using 10.8 or 10.9.

Release notes

You can find the full release notes for Antetype 1.6 on our support site

UPDATED 21:20: OS X Antetype Viewer – latest update released to Mac App Store

← Older posts