Text
Text is one of the most important elements on any interface and therefore used often in prototypes (from low to high-fidelity). The Proto.io text UI component is fully customizable and allows Rich Text. You can edit the text by double-clicking on the component on the canvas.
Rectangle
The rectangle is another widely used shape in interfaces. Proto.io allows you to customize the basic rectangle UI component to create anything you like in terms of size, position, background, border and text inside.
Image
By including images in your prototypes, you can quickly give your users a better idea of the look and feel of your application’s interface. In Proto.io you can drag the Image UI component on your canvas. You’ll see an image placeholder. You can double-click on the placeholder to pick an image to show (from the Gallery, your assets, etc.) or click on the image filename in the Properties Inspector to edit.
Also, see Importing and managing your own assets.
Audio/Video
Multimedia elements, such as audio and video are becoming a necessity for a better and more engaging user experience. You can easily include your desired audio and video by dragging in the relevant UI components and specifying the file to associate them with. Audio and video files are considered assets that have to be imported to Proto.io or linked to on the web. You can find a nice collection of sound effects in the Proto.io Gallery, found in the Asset Manager.
Also see Importing and managing your own assets for size and format restrictions, as well as other ways to import your assets.
Interaction area
When designing prototypes you frequently need to build interactions. Sometimes you don’t wish the interaction to apply to a particular UI component (e.g. when you tap on a button), but rather on part of the interface. Proto.io includes an Interaction Area UI component for exactly that reason. You specify the desired area and then the interaction properties (trigger, actions, etc.)
Arrows and speech bubbles
Proto.io offers a gallery of arrows and speech bubbles to customize and use in your project. These can be found under "Generic Libraries".
Apart from the arrow’s size and position you can customize its color, size, whether it’s dashed or not, whether the arrowhead is filled or not, as well as the direction of the arrow.
Concerning speech bubbles, apart from their size and position, you can customize the styling of the text that will appear inside, the styling of the bubble itself (background color and border thickness and color), as well as the tip direction.