Editor basics

The canvas

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.

 

canvas.png

 

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’.

 

Editor Layout

 light-theme.png

 

Apart from the canvas, you have a set of panes with different functions:

Toolbar

  • Alignment and positioning icons
  • Zoom
  • Undo/Redo
  • Special icons (Patterns, Scrollable)
  • Add-ons (Sketch, Photoshop, Dropbox, Proto.io App, Proto.io Spaces)
  • Screens Navigator
  • Font Manager
  • Asset Manager
  • Variable Manager
  • Search
  • Share
  • Download
  • Save
  • Preview

Right pane

  • UI Components and libraries
  • Inspector
  • Assets

Left pane

  • Layers (See section below)
  • Screens
  • Containers

Bottom pane

  • 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, Device libraries and Icons. 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. 

libraries-tab.png device-libraries.png



Components

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). 

inspector-properties.png inspector-interactions.png

 

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.

 

Keyboard shortcuts

Show keyboard shortcuts: CTRL/CMD + k

 

Preferences

You can customize the Editor interface, from the Preferences menu (located bottom right).

Grid Settings

The Proto.io Editor lets you work with two types of a grid; a regular grid and a layout grid. 

Regular grid

 

Layout grid

 

You can manage these options by opening the ‘Grid’ icon of the top toolbar.

Rulers and guides

By default, smart guides, device guides and custom guides are enabled in Proto.io Editor. You can manage these options by opening the ‘Grid’ icon of the top toolbar. 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. 

 

 

Tooltips on/off

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. 

 

Interface Settings

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


dark-theme.png

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 Auto Save. Auto Save 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

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 drag and drop in the layers list. The higher to the top you bring a layer, the more “to surface” you bring it in your interface.

 

Assets

The Asset Manager provides access to digital assets like images, audio and video files that can be used in the project. UI components that require assets allow the use of the asset manager to upload and select the appropriate asset for each UI item.

 

When adding an image to the canvas for example you can click on the asset manager icon (on the right properties pane) and it will load the asset manager in a modal window. There are three types of assets:

 

Project assets

Project assets are assets that are specific to the particular project that you work on.

 

Account assets

Account assets are available throughout your projects. A common use is for branding logos for your agency etc.

 

Proto.io Gallery

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.

Project assets and Account interfaces are identical. For the purposes of this documentation, we describe one of the two.

 

Folders

On the left pane of the asset manager, you have the asset folder where you can easily add, rename or delete a folder. You can also reorganize folder using drag-and-drop.

 

Handling Assets

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.

 

Have more questions? Submit a request