MockApp Wireframe allows you to transform your blank canvas into a functional and interactive screen mockup. Here’s how you can start mocking your screen:
Toolbar Tools
Located on the top
- Pointer Tool (Hand Icon): This tool allows you to select, move, and manipulate views on your screen. You can also delete elements by selecting them and pressing the delete option.
- Pencil Tool (Pencil Icon): Activates the drawing mode, enabling you to sketch directly on the screen using either your finger or Apple Pencil.
- Eraser Tool (Eraser Icon): Allows you to erase any drawn elements on the screen.
- Undo/Redo: Use these buttons to revert or reapply your latest changes.
Properties Panel
On iPad and Mac, the properties panel is located on the right side and is divided into two main sections
- Design: Displays the properties of the selected view. If no view is selected, it shows the properties of the screen itself, such as background color, grid settings, and opacity.
- Layers: Lists all the elements present on the screen. You can use this section to organize, select, and manage each layer individually.
On iPhone, the properties panel appears as a sheet at the bottom of the screen, as shown in the image. This sheet provides easy access to the Design and Layers sections while making it convenient to interact on smaller displays.
Tool-Specific Properties
When you select a tool like the pencil or eraser, the properties panel (or sheet on iPhone) will adapt to show specific settings for that tool. For example:
- Pencil Tool: Adjust the color, width, and type of the pencil (e.g., pen or brush).