Search for elements, and add them to the page

The element library includes a wide range of designed elements, from simple shapes to complex user interfaces.

Browse Element Library

To browse the element library, navigating to the Left Sidebar and click on Elements tab. The tab will be highlighted, and open the Elements panel.

As you scroll down, you will see the the Element set grouped into Categories. These categories are collapsible, and by clicking on category name, you can hide or show that section.

Filter Categories

You can also filter categories to only show desired ones, by clicking on Filter icon next to the search box.

  • Tick to show/hide elements:

  • Or you can click X button to deselect

  • Import a component Pack → Click on add icon

Search Elements

To search elements, use the search box at the top of the Elements panel. Search will show the results of all the filtered categories

Ctrl/Cmd + K to directly switch to the search box

Add Element to a Page

From Elements panel, dragging an element to a desired location of a page to add that Element.

General format, style and color

All objects can be styled and customized in Format panel. The panel will be shown up as soon as you select an object.

Format panel

Clicking on any object to show the Format panel in the left side. It will be hidden when you click to outside objects.

  • Change colour, line , stroke dash/width

  • Drag to change opacity

  • Shadow position : None/All/Top/Right/Bottom/Left/Custom

  • Click on -/+ to zoomin/out canvas

  • Click on

    to show keyboard shortcuts:

Size, Position, Rotate and Flip

These controls are grouped in the Transform section of the Format panel, each of them can be performed both in the panel or on the page.

Size and Scale

On the page, use the resize/scale handles to change the size of the selected object.

In the format panel, use width, height and scale inputs for precise value, and use the arrow buttons to adjust these values incrementally.

Position

On the page, select an object and drag it a desired position.

In the Format panel, set the object’s position by entering exact x, y in the input fields. You can also use the arrow buttons to change the coordinates incrementally.

Rotate

On the page, select an object and click on the rotate handle at the top of the object, then drag the handle to rotate.

In the Format panel, enter the degree value in the Rotate input filed. You can change the value by using arrow buttons.

Flip

You can flip an object both horizontally and vertically.

On the page, use resize handle and drag it across the centerline of that object to resize and flip. It is possible for both horizontal and vertical flip.

In the Format panel, simple click on horizontal flip or vertical flip to flip the selected object.

Background, border, stroke dash/width and shadow

Background

To fill background color of an object, go to Background section and click on Color to open the Color picker

From the color picker, you can:

  • Select your desired color

  • Enter a hex value for a color

  • Adjust RBG values

  • Adjust the color opacity

You can also change the object opacity directly by using Opacity slider or enter opacity percentage value in the Background section.

Border

Go to border section to update border width, color and corner radius.

Open color picker by clicking on Color field

From the color picker, you can:

  • Select your desired color

  • Enter a hex value for a color

  • Adjust RBG values

  • Adjust the color opacity

Change conner radius by entering value in the Corner Radius input field. You can also use the arrow buttons to change the value incrementally.

Shadow

Go to shadow section to add shadow to your selected object

There are 5 options to choose in the position drop down list

  • All - Add shadow to all the edges

  • Top - Add shadow to the top edge

  • Bottom - Add shadow to the bottom edge

  • Left - Add shadow to the left edge

  • Right - Add shadow to the right edge

General Element

Text Element

Mocky app has a wide range of text-based components that have 2 main forms

  • Single line text that permits only one line including Label, Link, Text input, etc.

  • Multiple line text that allows multiple lines including Text, Paragraph, Note, etc.

Text-based elements are found in the Element Library and just like other elements, they are added to the page by drag and drop

Quick menu toolbar

When you select text within an object, the quick menu toolbar will popup, allowing you to:

  • Apply basic font styling (Bold, Italic, Underline, Strike-through)

  • Change font weight

  • Create ordered and unordered list

  • Text and fill color

Text Format Section

For more text format options, select a text-based object and go to Text section in the Format panel.

Here you can choose the Font family, weight, color, style, and you can set both vertical and horizontal alignment.

Group and organize elements

By grouping single elements together, you can speed up and simplify your workflow. Grouped elements can be moved, updated, styled and duplicated as a single object.

Group and Ungroup objects

To group objects together

  • Mouse drag multiple objects or shift + click on multiple individual objects

  • Right click inside the bounding box of the grouped object to show the Menu context, then click on Group

To ungroup a grouped object

  • Select a grouped object

  • Right click on that object to show the Menu context, then click on Ungroup

Edit a grouped object

Once objects are grouped, the group is treated like a single object. But you might still want to edit an individual element from its group.

To access a single object within a group, double-click on that object and select the desired on. Now you can format, style or delete that element.

Arrange Elements

You can layer objects which overlap together by selecting Bring Forwards, Bring to Front, Send Backwards and Send to Back. They can be found on the top of the Format panel or in the Menu context with

  1. Send backward - Level down one layer of the object

  2. Send to back - Send the object to the bottom layer

  3. Bring forward- Move the object up one layer.

  4. Bring to Front - Bring the object to top layer