Tutorial > Mockplus RP > Components > Basic Components

Basic Components

Click the "Components" tab (on the left panel) to open the Basic component library. You can use all these ready-to-use components and shapes to start design quickly.

Rectangle

Basic information to help you learn about "Rectangle" component:

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

  • Resize the Rectangle at an equal ratio by holding the "Shift" key.

  • Add text to Rectangle by clicking the "Enter" key or double-clicking.

Property Settings

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

Besides that, you can also show/hide the four borders separately according to your needs. 

Ellipse

Basic information to help you learn about "Ellipse" component:

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

  • Resize the Ellipse at an equal ratio by holding the "Shift" key.

  • Add text to Ellipse by clicking the "Enter" key or double-clicking.

Property Settings

You can set the text styles of the Ellipse component on the right Property panel. It's also possible to set other properties like opacity, fill color, border and shadow there.

Polygon

The "Polygon" component enables you to add a polygon to the canvas by customizing the number of sides. 

Basic information to help you learn about "Polygon" component:

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

  • Resize the Polygon at an equal ratio by holding the "Shift" key.

  • Add text to Polygon by clicking the "Enter" key or double-clicking.

Property Settings

Use the right 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

Basic information to help you learn about "Line" component:

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

  • Stretch the line as you need. You can adjust the stretch direction of the line by holding the "Shift" key.

  • Add text to Line by clicking the "Enter" key or double-clicking.

Property Settings

You can set the text styles of the Line component on the right Property panel. Edit line opacity, border, shadow and other properties there.

Besides that, when you need an arrow to mark up designs, you can add an arrowhead to your line in the "Extension" section.

Text

Mockplus RP provides a "Text" component to add one-line or multiple line texts. Rich text tools and auto text filling features will help you create eye-catching, effectively designs.

Basic information to help you learn about "Text" component:

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

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

Auto Fill

If you want to quickly fill text components with placehoders, 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 with the following properties in the right Property panel: font, color, text indentation, vertical alignment, opacity, shadow, and border, etc. 

Moreover, part of the component texts can be styled based on your needs.

Image

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

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

  • Resize the Image at an equal ratio by holding the "Shift" key.

Property Settings

The Image components can be styled with the following properties using the right Property panel: opacity, border, shadow, and corner radius.

You can also set the image fill in the "Extension" section: Stretch, Tile, Fit, Fill. 

Upload Images

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

Drag an image component to your artboard and click "Enter" to upload your desired image. 

Button

Buttons are widely used in web/app user interfaces. To simplify your prototyping process, Mockplus RP offers button components with rounded corners by default. 

Basic information to help you learn about "Button" component:

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

  • Resize the button at an equal ratio by holding the "Shift" key.

  • Add text to button by clicking the "Enter" key or double-clicking.

Property Settings

The Button can be styled with the following properties in the right Property panel: text color, fill color,border, shadow and corner radius, etc.  

Input Box

Basic information to help you learn about "Input Box" component:

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

  • Resize the component at an equal ratio by holding the "Shift" key.

  • Add text to the component by clicking the "Enter" key or double clicking.

Property Settings

This component can be styled with the following properties using the right Property panel: opacity, border, shadow, and corner radius, etc.The texts can also be set there.

You can still set the following input masks in the "Extension" section: Text, Password and Number.

Text Area 

Basic information to help you learn about "Text area" component:

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

  • Resize the component at an equal ratio by holding the "Shift" key.

  • Add text to the component by clicking the "Enter" key or double clicking.

Property Settings

This component can be styled with the following properties in the right Property panel: text style, opacity, border, shadow, and fill, etc. 

Icon

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

Here are some key features about Icon library:

  • It provides thousands of bold and light icons. (Unique feature)

  • Use the top search bar to find icons relevant to your project ( just type keywords in the search bar).

Next Icons