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