Application Overview

1. Screen Inspector
2. Style Bar
3. Canvas
4. Toolbar
5. Inspectors

Toolbar

Each document window has a toolbar that contains the most frequently used functions.

You can customize the toolbar by choosing "Customize Toolbar…" from the toolbar's contextual menu.





Inspectors

Antetype has several inspectors that let you customize and manage the properties and resources of your elements and projects. The inspectors are always related to the front most document.

Screen Inspector

Lists all screens and the hierarchical structure of the elements contained on the screen.



Style Inspector

Provides all size and styling properties that can be applied to a selected element. It is also used to manage widget states.



Interaction Inspector

Can be used to add and specify actions for selected elements.



Widget Inspector

Shows all widgets available in the widget library and project.



Resources Inspector

All used graphics are listed here and can be managed in this inspector.



Color Inspector

All used color are listed and can be managed in this inspector. (Including copy, paste, delete and merge colors.)



History Inspector

Lists all steps performed by the user. Steps can be un- or re-done by selecting entries in the list.



Show / Hide Inspectors

Inspectors can be shown or hidden by the Inspectors button in the main window's tool bar or the View menu. They can also be toggled with Shortcuts:

• Left Inspector: ⌥ ⌘ 1
• Right Inspector: ⌥ ⌘ 2
• Both Inspectors: ⌥ ⌘ I

Individual Inspectors can also be activated (opened/focused) by keyboard equivalents ⌥ ⌘ 3-8.





Style Bar

The style bar is designed to provide at-a-glance information about the currently selected element and enable quick editing.



At-a-glance styling information

The style bar has been designed so that designers can quickly see information about the most commonly used styling properties.



Single update / revert indicators for widgets

At the end of the style bar there are two controls that only appear when the properties of an instance of a widget do not match the definition of the widget.

For more detail about which properties have changed - please consult the widget inspector.



Change widget state

When a widget is selected the first control in the style bar is a control that shows the currently selected state of a widget.

In this case the selected state is Normal - this area can be used to change the state of a widget from one state to another. It is also possible to select multiple / all states to quickly apply styling changes to multiple states.



Popup Editors

Most of the controls will open a Style Editor when they are clicked e.g. Visibility, Size etc. The Style Editors are designed to be focused on a single task.





Text Bar

The Text bar is only displayed for cells that have text associated with them.

Text can be entered in any cell in different ways:

• If you create a text cell from the toolbar, you can start typing right away
• Using the Style Inspector, find the Text input area in the Text section and enter some text
• For cells that already contain text:
  • Select the element and press ⌘ ⏎, which starts text editing mode
  • Double click the element to enter text editing mode





Style Editors (Popovers)

The Style Inspector in Antetype contains all properties that can be edited for any element in Antetype. Unless you have an enormous monitor it is not possible to see all of the entries in the Style Inspector and styling tasks often involves at least one scroll of the inspector and often groups must be expanded and collapsed. Style Editors can be shown either in-place next to your content (using a keyboard shortcut) or from the style bar with a button press. This post covers the details of the style editors and uncovers a couple of hidden features that will speed up workflows with Antetype.

Stylebar

In an effort to help designers focus on their designs we have created the style editors to focus on a single styling tasks. We have Style Editors for the following areas:

• Visibility
• Size
• Fill
• Border
• Layout
• Rounded Corners
• Margin
• Padding
• Drop Shadow
• Inner Shadow
• Float
• Text Color
• Text Shadow

Each editor focuses on just the task in hand, so for example the visibility editor only has two controls one to select the visibility mode (Visible, Hidden or Collapsed) and another to control opacity. The editors can easily be accessed from the Style Bar by clicking on the relevant buttons. There is another way to open the Style editors though…..



Open in-place

It is also possible to open Style Editors using Keyboard shortcuts. When a Style Editor is opened using a keyboard shortcut rather than from the Style Bar it will open right next to the element to be styled within the document. By opening the Style Editor next to the selection there is less distraction and focus remains on the design. Single Character Shortcuts are used for these pop-up Style Editors.

The single character shortcuts will work regardless of which area of the application is focused. Only with focused text fields they do not work.



Using Arrow keys and Scrolling to manipulate number fields

Unlike the Style Inspector the Style Editors have custom behaviour that allow any number fields to be manipulated with arrow keys or with the scroll wheel on a mouse or two finger scrolling on a trackpad.

All number entry fields in the Style editors will increase or decrease their values using the up or down arrows respectively. Using the shift key will jump the value by 10 rather than single digits.

A number field does not need to be the focused control either to have the value manipulated with a mouse or trackpad you can change the value by hovering over the control. Once your pointer is over the control then you can use the scroll wheel on the mouse or a two finger scroll on the trackpad to increase or decrease the values.



Single Undo Entry each time you use a Style Editor

An advantage of making changes using a Style Editor is that all changes that are made while the style editor is open are combined into a single undo entry. This enables designers to try out many different values for style properties such as the exact colours in a gradient without polluting their undo list with hundreds of entries.

While a Style Editor is open changes can be reverted to their state prior to opening the Style Editor using ⌘ Z or ESC.

Changes can be committed by clicking outside of the Style Editor or by pressing ⌘ ⏎ or just ⏎.



Enable keyboard access to all fields in the Style Editors

The default System Preferences in OS X do not allow all controls in the Style Editors to be able to take the focus. This means that keyboard manipulation of segmented controls and stepper controls is not possible. If you open System Preferences in OS X and Choose Keyboard and then Shortcuts you will see a preference for Full Keyboard Access - ensure that his is set to All Controls - see below.





Status Bar

On the bottom of the window, the status bar shows the hierarchy of the selected element. There you can also change the zoom level and switch between breakpoints.





Smart Guides

Smart guides help you to align elements located on the same hierarchical level. They appear if:

• an element is dragged and its outer or center bounds reach another element's outer bounds or center
• an element reaches the outer bounds or center of the parent cell
• the baselines of the texts are at the same position.
• the bounds of a nested element reach the padding
• the bounds of an element reach the margin of another element.

Smart guides can be turned on or off by the toolbar button or menu entry View > Smart Guides.





Keyboard Shortcuts



Cheatsheet



Shortcut Overview

Export



File



Edit



Elements



Presentation Mode



Arrange



View



Zoom



Inplace Style Editors



Contextual menu on status bar entries

On the screen entry: List of screens On a cell entry: List of nested cells (cells are highlighted on the canvas on mouse over)



Hidden Shortcuts

Double-click widget or resource in the widget inspector to add it to the canvas, next to the selected element ⌥ + double-click widget or resource in the inspector to add it to the canvas, inside the selected element.



Custom Shortcuts

If you open the System Preferences in macOS and select Keyboard and then Keyboard Shortcuts, you can define your own keyboard shortcuts.

All you need to do is to enter the exact name of a functionality. For Example "New Text Cell".

This allows them to overwrite existing shortcuts or create new ones.