In the status bar on the left side of the editor, you will find the Assets section containing Widgets, Icons, Images, and Pages. You can open the corresponding panel and add the widgets you need.
Select a widget and click the Eye icon in the Appearance panel on the right to show or hide it.
You can also use the shortcut: Ctrl + Shift + H.
Note: Once a widget is hidden, you must select the element from the Layers list on the left to show it again.
After selecting a widget, click the Lock icon in the top toolbar of the canvas or in the Appearance panel on the right to lock or unlock the widget.
Select multiple widgets, then use the Group/Ungroup options in the top toolbar. You can also use shortcuts:
Cmd + G (Mac) / Ctrl + G (Windows)Cmd + Shift + G (Mac) / Ctrl + Shift + G (Windows)Use the Tidy Up feature to quickly arrange two or more elements. It automatically distributes them evenly and allows for one-click spacing adjustments. Elements in a smart arrangement do not need to be the same size. If the spacing between elements varies, you can use the Tidy Up function to reset them to a uniform distance.
The current Tidy logic adjusts the spacing of other elements based on the distance between the leftmost element and the next one. After selecting elements, hover your mouse over the selection, and a Tidy icon will appear. You can Tidy Horizontal Spacing, Tidy Vertical Spacing, or Tidy Both.
Once elements are tidied, you can drag the gaps between them to adjust vertical or horizontal spacing.
Up: Decreases vertical spacing; Down: Increases vertical spacing. Left: Decreases horizontal spacing; Right: Increases horizontal spacing.
Select a widget or a group, then hold Shift and drag the corner handles to scale proportionally.
Note: Text widgets do not support proportional scaling via dragging; you must change the font size separately.
Mockitt supports Smart Fill for text and image content. You don't need to manually collect or upload resources. Click to generate random content, effectively improving efficiency and enriching your prototype.
There are two ways to open the Smart Fill panel:
Once opened, the Smart Fill panel will stay in the workspace. You can close it via the top right corner of the panel.
Select a widget on the canvas that can hold text or images, then click the desired content category in the Smart Fill panel to generate random content.
If the initial content doesn't meet your needs, click the category repeatedly to switch content.
In the Text Fill section, click the More button to the right of a category to filter specific formats (e.g., under "Name", you can filter for "Chinese", "English", "Nickname", etc.). Your settings are automatically saved for future use based on your history.
For specific Mockitt built-in widgets (such as Dropdowns, Radio Buttons, Checkboxes, etc.), Smart Fill will automatically populate all option content randomly.
Tables (or selecting content within a table) also support Smart Fill.
Carousel Widgets will be randomly filled with N images (based on the current number of slides).
Without selecting any widget, double-click a resource category in the Smart Fill panel to directly insert text/image content as a new widget onto the page. Clicking again will switch the specific content.
The Paste Attributes function acts like a format painter, allowing you to quickly copy the properties of one element and paste them onto another.
For example, to copy the properties of a rectangle to a circle:
Ctrl + C (Mac: Cmd + C).Ctrl + Alt + V (Mac: Cmd + Option + V).Alternatively, right-click the element and select Copy Attributes, then right-click the target element and select Paste Attributes.
Use the Color Picker to set colors for various widgets.
There are three fill modes: Solid Fill, Linear Gradient, and Radial Gradient. Note that gradients are only supported for Shapes, Icons, and Card Annotations (Notes).
Switch fill modes at the top of the Color Picker.
Solid Fill supports a single color value. You can select a color from the palette, switch to Color Space in the top right for free selection, or use Hex codes. You can also adjust opacity.
Click the Eyedropper icon on the left to pick any color from the workspace.
Tip: You can press the shortcut I to activate the Eyedropper tool immediately for the selected element.
Linear Gradient creates a transition between multiple colors along a straight line.
Radial Gradient creates a transition that diffuses circularly from a center point. You can modify the radius, eccentricity, and center position.
On the canvas, three control points appear on the widget to adjust the gradient path (center, radius, and shape).
To reuse a color (including gradients), open the Color Picker, switch to My Favorites, and click the + button. These saved colors can be used across different files.
To adjust properties like blur, brightness, and saturation for an image: Select the image, and a settings bar will appear in the top right toolbar. Click to open the Filter settings.
Quick Duplicate:
Alt + DragOption + DragSelect All (Current Page):
Ctrl + ACmd + AMulti-select:
Shift + ClickS + Drag (Marquee selection)If a widget is covered by another layer: