Tutorial > Mockplus RP > Components > Basic Components

Basic Components

Mockplus RP comes with a variety of frequently used components and shapes. You’ll find them in the Basic section in the second "Components" tab, located on the left-hand panel. With these ready-to-use components it is easy to get started wireframing and prototyping.

Rectangle

Here are a few tips to help you get the most out of the "Rectangle" component:

  • Add a Rectangle to your design by dragging it onto the workspace (Shortcut key: R).

  • Hold "Shift" to maintain the same aspect ratio while resizing the Rectangle.

  • Double click the Rectangle or click "Enter" to add text to the component.

Property Settings

You can set the text styles of the Rectangle on the right-hand Property panel. The other properties, such as the opacity, fill color, border, shadow, and corner radius can also be adjusted on that panel.

You can also show or hide the four borders separately.

Ellipse

And now some tips to help you with the "Ellipse" component:

  • Add an Ellipse to your design by dragging it onto the workspace (Shortcut key: O).

  • Hold "Shift" to maintain the same aspect ratio while resizing the Ellipse.

  • Double click the Ellipse or click "Enter" to add text to the component.

Property Settings

You can set the text styles of the Ellipse component on the right-hand Property panel. Other properties, such as opacity, fill color, border, and shadow can also be adjusted there.

Polygon

The "Polygon" component enables you to add a polygon to the artboards with a customized number of sides. You can use "Polygon" component as follows:

  • Add a Polygon to your design by dragging it into the workspace.

  • Hold "Shift" to maintain the same aspect ratio while resizing the Polygon.

  • Double click the Polygon or click "Enter" to add text to the component.

Property Settings

Use the right-hand Property panel to style the Polygon component with the following properties: fill color, border, shadow, and side. You can customize the number of sides for your Polygon on the same panel.

Line

You can use the "Line" component in the following ways:

  • Add a Line to your design by dragging it into the workspace (Shortcut key: L).

  • Hold "Shift" to adjust the Line direction or to stretch it.

  • Double click the Line or click "Enter" to add text to the component.

Property Settings

You can define the text styles of the Line component on the right-hand Property panel. Here you can also edit the line’s opacity, border, shadow, and other properties.

You can add an arrowhead to your line in the "Extension" section.

Text

Mockplus RP provides a "Text" component to add one or multiple lines of text, along with rich-text tools and auto text-filling features.

You can use the "Text" component in the following way:

  • Add text to your design by dragging it into the workspace (Shortcut key: L).

  • Edit text content by clicking the "Enter" key or double clicking.

Auto Fill

If you want to fill the Text component with placeholders, simply right-click the Text component and choose the "Auto Fill" option from the drop-down list.

Property Settings

The Text components can be styled on the right-hand Property panel with the following properties: font, color, text indentation, vertical alignment, opacity, shadow, border, and so forth.

You can also edit parts of your text separately.

Image

This is how you can use the "Image" component:

  • Add an Image to your design by dragging it into the workspace (Shortcut key: I).

  • Hold "Shift" to maintain the same aspect ratio while resizing the Image.

Property Settings

You can switch between different image fill modes in the "Extension" section: Stretch, Tile, Fit, Fill.

Upload Images

Use the image component to import both static images and animated GIFs.

Drag an image component onto your artboard and click "Enter" to upload it. Once uploaded, you can choose whether to keep the original size of the image.

Button

Buttons are used widely in web/app user interfaces. Mockplus RP offers button components with rounded corners by default. 

Here are some tips to get the most out of the "Button" component:

  • Add a Button to your design by dragging it into the workspace (Shortcut key: B).

  • Hold "Shift" to maintain the same aspect ratio while resizing the Button.

  • Double click the Button or click "Enter" to add text to the component.

Property Settings

The Button can be styled with the following properties on the right-hand Property panel: text color, fill color, border, shadow, and corner radius, and so forth.

Input Box

Here are a few tips for using the "Input Box" component:

  • Add an Input Box to your design by dragging it into the workspace.

  • Hold "Shift" to maintain the same aspect ratio while resizing the Input Box.

  • Double click the Input Box or click "Enter" to add text to the component.

Property Settings

This component can be styled using the right-hand Property panel. The following properties are available: opacity, border, shadow, corner radius, and more. Text can also be placed here.

You can choose an input type in the "Extension" section: Text, Password, or Number.

Text Area 

Some tips for using the "Text Area" component:

  • Add a Text area to your design by dragging it into the workspace.

  • Hold "Shift" to maintain the same aspect ratio while resizing the Text Area.

  • Double click the Text Area or click "Enter" to add text to the component.

Property Settings

This component can be styled on the right-hand Property panel with the following properties: text style, opacity, border, shadow, and fill, and more.

Icon

Click the "Icons" tab (on the left-hand panel) to open the Icon library.

A unique feature of the library is that it provides thousands of bold and thin icons.  You can use the top search bar to find icons relevant to your project.