Create Interactions with Component Modes in ProtoShare

One of ProtoShare’s cool features is simulating interactions with most components simply by creating variations in their appearance modes.

For example, make a button look clickable, as you would in final development, by specifying its on-hover and on-click looks. Here’s how:

  1. Drag a button component to your canvas;
  2. Style the button as desired under the default “Normal” mode in the Inspector (e.g. background fill color);
    Interactive Prototype Button
  3. Choose the “Hover” mode to change the button’s appearance on hover (e.g. use a lighter fill color);
    Clickable Prototype Button
  4. Choose the “Click” mode to change the button’s click appearance (e.g. add inset shadow, darken fill color, etc.);
    Clickable Prototype Button
  5. Change the canvas to Test Mode to check out your changes – a clickable button by using a single component!
    Clickable Prototype Example

Note that when initially dragging a button component to your canvas, the button has inherent styles applied. Adding your own styles will override the default settings of the button.

Now if you actually want the button to take you somewhere, just add a page to the “Link to” field in the Inspector.

Interactive Prototype Button

You can also view our detailed video on the subject:

This entry was posted in Blog, ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>