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 selecting the ‘Grid Settings’ from the Preferences menu (located bottom right).

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

Screenshot of Editor in dark theme

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. 

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. 

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 your progress

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.