User Interface

- Screen Inspector
- Style Bar
- Canvas
- Toolbar
- Inspectors
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.

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.
Lists all screens and the hierarchical structure of the elements contained on the screen.

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

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

Shows all widgets available in the widget library and project.

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

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

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

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.
The style bar is designed to provide at-a-glance information about the currently selected element and enable quick editing.

The style bar has been designed so that designers can quickly see information about the most commonly used styling properties.
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.
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.
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.

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
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.
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…..
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.
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.
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 ⏎.
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.
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 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.

Note
⌘ Command (cmd) ⌃ Control ⇧ Shift ⌥ Option (alt)

Export
Description | Shortcut |
Screen as Graphic | ⌘ E |
Selected Elements as Graphic | ⌘ ⇧ E |
Web Viewer Export | ⌘ ⌥ E |
File
Description | Shortcut |
New File | ⌘ N |
Open File | ⌘ O |
Close Window | ⌘ W |
Save | ⌘ S |
Save as | ⌘ ⇧ S |
Edit
Description | Shortcut |
Paste inside | ⌘ ⇧ V |
Replace | ⌘ ⇧ R |
Copy Styles | ⌥ ⌘ C |
Paste Styles | ⌥ ⌘ V |
Select All States | ⌃ ⌘ A |
Elements
Description | Shortcut |
New Rectangle | ⌃ ⌘ N |
New Rectangle Inside Cell | ⌥ ⇧ ⌘ N |
New Widget from Selection | ⇧⌘W |
New Screen | ⇧ ⌘ N |
Presentation Mode
Description | Shortcut |
Toggle Presentation Mode | ⌃ ⌘ P |
Show cells with interactions | Hold ⌥ |
Exit presentation mode | ESC |
Change to Edit Mode | D |
Change to Interaction Mode | R |
Arrange
Description | Shortcut |
Group | ⌘G |
Group in Vertical Flow Layout | ⇧ ⌘ G |
Group in Horizontal Flow Layout | ⌥ ⌘ G |
Group in Free Layout | ⌃ ⌘ G |
Group in Stacked Layout | ⌥ ⇧ ⌘ G |
Bring Forward | ⌥ ⇧ ⌘ F |
Bring to Front | ⇧ ⌘ F |
Send Backward | ⌥ ⇧ ⌘ B |
Send to Back | ⇧ ⌘ B |
View
Description | Shortcut |
Present In-place | ⌃ ⌘ P |
Show Status Bar | ⌘ ⇧ 7 (⌘ /) |
Show/Hide All Inspectors | ⌥ ⌘ I |
Screen Inspector | ⌥ ⌘ 1 |
Right Inspector | ⌥ ⌘ 2 |
Style Inspector | ⌥ ⌘ 3 |
Interaction Inspector | ⌥ ⌘ 4 |
Widget Inspector | ⌥ ⌘ 5 |
Resources Inspector | ⌥ ⌘ 6 |
Color Inspector | ⌥ ⌘ 7 |
History Inspector | ⌥ ⌘ 8 |
Image Chooser | ⌘ R |
Show/Hide All Smart Guides | ⇧ ⌘ H |
Show/Hide Selection | ⌃ H |
Next Screen | ⌥ ⌘ → |
Previous Screen | ⌥ ⌘ ← |
Hide Toolbar | ⌥ ⌘ T |
Show/Hide Style Bar | ⇧ ⌘ T (im Moment nicht mehr belegt) |
Minimize Window | ⌘ M |
Zoom
Description | Shortcut |
In | ⌘ + |
Out | ⌘ - |
Actual Size (100%) | ⌘ 0 |
Fit to Screen | ⇧ ⌘ 0 |
Inplace Style Editors
Description | Shortcut |
Visibility | V |
Size | S |
Fill | F |
Text Color | ⇧ F |
Borders | B |
Layout | L |
Rounded Corners | C |
Margin | M |
Padding | P |
Drop Shadow | O |
Inner Shadow | I |
Float | A |
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
Description | Shortcut |
Add cell inside selected cell | ⌥ + New Cell |
Move the canvas | ⌘ while dragging |
Select next element on canvas | TAB |
Select previous element on canvas | ⇧ TAB |
Select parent element on canvas | ⌘ ↑ |
Select first nested element on canvas | ⌘ ↓ |
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.
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.
