In the middle of the Editor interface, you see your canvas, your interface design area. The canvas size is set based on the device you’re designing for. You choose a device when creating your project. Your canvas is where you will be designing your prototype’s screens.
If you want to change your screen canvas size, you will have to go to the Dashboard-> Project Settings and change the ‘Device’ to a new one, or create a custom device (see Create Custom device).
If you have designed your prototype for a certain device and then change it, you will see the following dialog next time you edit your project. Proto.io can automatically adjust UI items to the new device settings.
When designing Containers (see Containers) then the canvas you see is the container canvas and dependent on the container’s size that you choose. This might be different to your screen size. You can modify the container canvas size at any time through ‘Edit container properties’.
Apart from the canvas, you have a set of panes with different functions:
- Alignment and positioning icons
- Special icons (Patterns, Scrollable)
- Add-ons (Sketch, Photoshop, Dropbox, Proto.io App, Proto.io Spaces)
- Screens Navigator
- Font Manager
- Asset Manager
- Variable Manager
- UI Components and libraries
- Layers (See section below)
- Screen/Container states
- State transitions
UI Components and libraries
The Proto.io UI components are graphical elements designed to simulate the basic mobile OS UI elements. There are three collections of components: Basic, UI and Templates. You can switch between collections by clicking on the relevant tab.
Switching between Libraries and Inspector is handled automatically depending on what you do. If you need to bring a series of UI components in your canvas, you can Pin the Libraries tab for convenience. The following dropdown (see on the right, below) appears under Device libraries.
Components can be added to the canvas either by dragging and dropping them on the canvas or by double-clicking on the component icon. When a component item is added to the canvas, then a relevant layer appears in the Layers list and the Properties and Interactions Inspector appears for you to edit size, position, properties, and interactions (see Inspector).
Searching for things (CMD/CTRL+f)
You can search for screens, containers, assets and UI items, all from one place, by using CMD/CTRL+f. This is particularly useful when you are looking for something but you cannot remember its exact name.
You can customize the Editor interface, from the Preferences menu (located bottom right).
The Proto.io Editor lets you work with two types of a grid; a regular grid and a layout grid.
You can manage these options by selecting the ‘Grid Settings’ from the Preferences menu (located bottom right).
Rulers and guides
By default, smart guides, device guides, and custom guides are enabled in Proto.io Editor. You can manage these options by selecting the ‘Grid Settings’ from the Preferences menu (located bottom right). Guides help you in resizing and aligning UI items easily on the canvas. Green lines appear accordingly to show you exactly what your item is snapping to. You can create custom guides by clicking on the desired point of the ruler (horizontal or vertical). Custom guides appear as orange lines. To remove a custom guide, grab it on the ruler and drag it out of the canvas. To clear all guides, click on the ‘Clear Guides’ button.
With smart guides, you can now see a real-time visual indication of the distance between the elements you're moving or resizing and others with which they snap. When you have an element selected and hold down the Option/ ALT key, then you can see its distance from other elements you hover.
Tooltips are on by default. They appear when you hover over a feature. Turning off tooltips will make them appear with a 3-second delay.
You can change theme through Interface settings (found under Preferences). You can choose between Light or Dark theme and also select your preferred Pasteboard color or add your own.
Interface Settings as seen in Light (left) and Dark (right) theme
Screenshot of Editor in dark theme
Close/Open side panes
You can close or open the left and right pane according to your preferences. You can also resize these panes from the blue resize bar. To quickly close/open, just double-click on the blue bar. You can also use the CMD/Ctrl+Left and CMD/Ctrl+Right keyboard shortcuts.
Autosaving and CMD/CTRL+s
Proto.io makes sure you have all your work saved with AutoSave. AutoSave will automatically save your Proto.io project regularly. If needed you can manually save your changes by pressing CMD/CTRL+s
Rollback to a previously saved version
There might be cases where you need to roll back to a previously saved version of your project; in other words, load from backup. In some cases, using the ‘undo’ functionality might suffice. Your session’s actions are recorded into history: this includes anything you do across screens and containers, excluding actions such as Asset upload.
Proto.io lets you access these saved versions from the hamburger menu in the editor.
Note: if you roll back e.g. to a version saved 5 days ago and realize that it was not the one you wanted, that you actually wanted a more recent one, you can still access those from the same feature.
You cannot ‘undo’ a load from backup action, but you can roll back to a more recent saved version.
Layers are the basic building blocks of content in Proto.io. Each component added to the canvas forms its own layer.
Layers can be managed from the Layers list in the left pane of the Proto.io Editor. You can select a layer or multiple layers, rename, search, show/hide, lock/unlock, group/ungroup and reorder by drag and drop.
When you select a layer, either from the layers list (left pane) or by clicking on the item itself, you see eight little blue handles; one in each corner and one in the center of each edge. You also see the Properties inspector window that lets you edit the component properties (see Item properties). Two of those properties are “Visible” and “Unlocked”. By default layers are visible and unlocked. You can change these properties from the properties inspector and the relevant checkboxes, or by clicking the icons that appear next to the layer title in the Layers list.
When you hover over the layers in the layers list you see the relevant items highlighted with a thick blue border in the canvas. This is particularly helpful when you are looking for an item that might be hidden behind others. When your project grows and you have a lot of layers on your canvas, you can use the Search to find the one you want.
You can select multiple layers by holding down the SHIFT key and clicking on the layers in the layers list, or the items in the canvas. In the status bar, you will see an indication that “X items selected”. You can now right-click to perform one of many actions.
You can reorder layers by hold and drag in the layers list. The higher to the top you bring a layer, the more “to surface” you bring it in your interface.
The Asset Manager allows you to manage and organize digital assets like images, audio and video files that can be used in the project. You can multi-select assets to move, delete, download or add to your canvas.
There are three types of assets:
Project assets are assets that are specific to the particular project that you work on. These assets are previewed in the bottom-right pane in the Editor (Quick Assets pane).
Account assets are available throughout your projects. A common use is for branding logos for your agency etc.
A gallery available from Proto.io with a large selection of UI assets like icons, backgrounds, buttons, etc. for several devices that can be used. You do not have access to upload, move or delete any assets in the gallery.
You can easily add, rename, move or delete folders to keep your assets organized.
To add a new asset you can either upload an asset from your computer or you can link an asset from the Web. When linking an asset from the web, the asset does not get copied, instead, a direct reference to that asset is used.
You can also rename, download or delete assets. You can also reorganize assets by dragging them to folders on the left folders pane.
Assets can also be sorted by Last modified, File name, File type and File size.