Mockplus > Community > Announcement

Component States in Mockplus RP

Mockplus Team · 5220 · 0 · 2:31 AM    Feb 21, 2023

Currently there are 6 different states for an element in Mockplus RP. These are normal, disabled, pressed, selected, mouse hover and focused. Of these, pressed, mouse hover, focused, and normal are the most commonly used. You can also add more states. 

The default state could be one of these three, Normal, Pressed and Disabled. 

Mouse hover: Hover over an element and it changes to the "mouse hover" state. Move the mouse cursor away and it returns to the default state.

Pressed: Pressing the left mouse button on an element will change the element to the "pressed" state. Release it and the element returns to its default state. 

Focused: This state is typically used for input boxes and text areas. When you start typing while previewing it, the element changes to the "Focused" state. 

Selected: This state is typically used for checkboxes and radio buttons. When an element is selected, it becomes this state. 

Disabled: This is a state of an element to indicate that it's disabled. 


The following takes the "mouse hover" state as an example to illustrate how to use it.  

Drag and drop a button onto the artboard. Select it and click "mouse hover" and change the properties. We change the fill color to yellow. When previewing, hover over the button and it will turn yellow. 


If you save an element with different states as an asset and drag it onto an artboard to reuse it, instances of that asset will also retain those states.  Give it a try and leave us a comment if you have any questions.

Sorry, this topic cannot be commented on.

Similar topics

MOCKPLUS CLOUD

One platform for design, prototype, hand-off and design systems.

Get Started for Free
MOCKPLUS RP

Best wireframing and prototyping tool for APP and Web design.

Get Started for Free

This action can't be undone. Are you sure you want to delete it?

Cancel
OK

This action can't be undone. Are you sure you want to delete it?

Cancel
OK