Artboard

Artboards are the areas where you can add the views. In the workspace, multiple artboards can be added. Each artboard in the Main tab corresponds to a view controller or a screen in mobile application.

iOS Development Notes: Artboard view is equivalent to UIViewController’s view.

Artboards in the workspace


Adding the Artboard

Artboard can be added using Toolbar. When Artboard icon at the toolbar clicked, an artboard is automatically added to the workspace.

Moving the Artboard

Artboard can be moved by simply dragging it at its title. The title of each artboard is displayed at the top of the artboard. The title of the artboard also is used by Code Generator to generate class with same title.

Resizing the Artboard

Artboard can be resized by using the Attributes Inspector, or by dragging edge of the artboard. When you have completed layout constraints for the views inside the artboard, the views will responsively update its frame based on the constraints. This let you preview the artboard for phone screen with different size.

Special Artboard

All artboards inside Object Editor tab are considered as special artboards. In Object Editor Tab, artboard cannot be added manually. For example in Object Editor tab for Collection View, a layout artboard or item view artboard can be added using specified button at the workspace.

Different type of artboards in collection view


Zooming the Workspace

The workspace can be zoom in or out using CMD + PLUS or CMD + MINUS respectively. Alternatively, you can use button at right most of the tab bar to zoom in or out.