Designing

In this designing guide, we explain the characteristics of the shapes in Frame0 and how to edit and combine them to create wireframes.

Adding shapes

You can create a wireframe by adding specially designed UI shapes and icons from the library or by adding primitive shapes.

Adding from libraries

To add a shape from the libraries:

1. Find the shape you want to add in the Shapes View (you can select a category or search using keywords).
2. Click on the shape you want to add, or drag and drop it onto the canvas.

Adding primitive shapes

To add a primitive shape:

1. Select a shape tool (Rectangle, Ellipse, Text, Image, Connector, Line, Freehand, or Highlighter) from the Toolbar
2. Click and drag on the canvas.

For detailed information about each primitive shape, please refer to Primitive shapes.

Adding icons

To add an icon,

1. Find the icon you want to add in the Icons View (you can search using keywords).
2. Click on the icon you want to add, or drag and drop it onto the canvas.

Editing shapes

This section introduces various methods for editing shapes.

Selecting shapes

To select shapes, press ESC or select Select from the Toolbar, then click to select a specific shape or drag an area to select multiple shapes.

Moving shapes

You can move the selected shapes by dragging them with the mouse. To move shapes horizontally or vertically, mouse click and drag while pressing Shift key. If you move first horizontally the shape will only move horizontally and vice versa.

You can also move selected shapes using the keyboard.

• Pressing the arrow keys (↑, ↓, ←, →) moves them by 1px,
• Pressing the arrow keys with shift key (Shift ↑, Shift ↓, Shift ←, Shift →) moves them by the grid size.

Deleting shapes

To delete the selected shapes, simply press Delete key.

You can also delete shapes using eraser tool:

1. Select Eraser tool in the Toolbar.
2. While clicking and dragging on the canvas, pass over the shapes you want to erase.

Duplicating shapes

To duplicate the selected shape, press Cmd/Ctrl D.

Or, mouse click on the shape to duplicate and drag while pressing Opt/Alt key.

Primitive shapes

In Frame0, wireframes are designed based on composing 11 types of primitive shapes:

• Rectangle
• Ellipse (Oval)
• Text
• Image
• Line
• Connector
• Freehand
• Highlighter
• Frame
• Icon
• Mirror

If you want to add a specific primitive shape continuously, lock the shape tool in the Toolbar. To unlock it, select the Select tool or press ESC.

If you want to continuously add a specific primitive shape, click the shape tool again in the Toolbar or click the Lock button that appears on the far left of the Toolbar to enable lock. To unlock, click the Lock button again, select the Select tool, or press ESC.

Rectangle

A Rectangle represents a rectangular shape.

To add a rectangle, press R or select Rectangle from the Toolbar, then click and drag on the canvas to the desired size.

Ellipse (Oval)

A Ellipse represents a elliptical shape.

To add an ellipse, press O or select Ellipse (Oval) from the Toolbar, then click and drag on the canvas to the desired size.

Text

A Text is a shape that represents text. It supports rich text, allowing decorations, styles, and colors to be applied to the text.

To add a text, press T or select Text from the Toolbar, then click on the canvas where you want to place.

Or, you can add a text quickly by double clicking on blank area of the canvas.

To edit the text, double click the text shape or press Enter if the text is selected.

You can attach a text shape to a Line shape so that it moves together with the line shape. To create an attached text, double-click on any point of the line shape. The attached point can be moved later with the mouse.

Image

An Image represents a bitmap (PNG, JPEG) or a vector shape (SVG).

To add an image, press I or select Image from the Toolbar, then select an image file in the open dialog.

Or, you can add an image by drag an image file and drop on the canvas.

Line

A Line is a shape that connects two or more points. When the starting point and endpoint are connected, it forms a closed polygon.

To add a line, press L or select Line from the Toolbar, then click and drag on the canvas.

Or, if you want add a polyline (or polygon), click on multiple points on the canvas and press ESC to finish adding points. If you finish adding points by clicking on the first point, the points will form a closed polygon.

A Line shape has one of two route types: straight or curve. This can be set in the Line tool of the Inspector Sidebar.

The two endpoints of a Line shape can have various arrowheads. This can be set in the Line tool of the Inspector Sidebar or the Floating Toolbar.

Connector

A Connector is a specialized line shape used to link two shapes. Its endpoints can be attached to specific shapes, and the connection remains intact even if the linked shapes are moved.

To add a connector, press C or select Connector from the Toolbar, then click and drag on the first shape to a second shape to connect. You can also add a connector with no connections by click and drag on blink area on the canvas.

The endpoints of the connector are connected by being located inside a specific shape. The endpoints can be freely moved via drag-and-drop and can also be connected to other shapes.

The endpoints are connected to the outline of the shape, and if you want to add connection margins, you can adjust it in the Line tool of the Inspector Sidebar.

A Connector is a type of Line, so its route type and arrowheads can be configured.

Freehand

A Freehand is a shape that allows you to freely draw curves using a pointing device.

To add a freehand curve line, press F or select Freehand from the Toolbar, then click and drag on the canvas. A freehand curve is generated following the trajectory of your mouse movement.

Freehand’s thinning and the tapering of its start and end can be adjusted in the Line tool of the Inspector Sidebar.

Highlighter

A Highlighter is similar to Freehand but is primarily used to emphasize specific parts.

To add a highlighter curve line, press G or select Highlighter from the Toolbar, then click and drag on the canvas. A highlighter curve is generated following the trajectory of your mouse movement.

Frame

A Frame represents a single screen, such as a smartphone, web browser, or desktop window, and can contain other UI shapes within it.

To add a frame, find the frame you want to add in the Frame category in the Shape View, then click on the frame you want to add, or drag and drop it onto the canvas.

Icon

An Icon represents a small icon shape composed of lines.

To add an icon, please refer to Adding icons.

Mirror

A Mirror is a shape that mirrors a specific frame shape exactly. Mirror is useful when the same frame design is repeatedly used in multiple places. Additionally, placing mirrors of frames is very helpful when creating a screen flow diagram.

To add a mirror:

1. Open Layers View from the Navigator Sidebar.
2. Find a frame to mirror.
3. Drag and drop the frame onto the canvas.

Pages

A single document consists of one or more pages. On each page, multiple shapes can be arranged. For prototyping, it is recommended to include one screen (frame) per page. Additionally, it is advisable not to place too many shapes on a single page whenever possible. All pages can be managed in the Pages View.

To add a page:

• Press + button in the Pages View, or select Add page from the Context Menu on the Pages View.

To delete a page:

• Select Delete page from the Context Menu on the Pages View.

To duplicate a page:

• Select Duplicate page from the Context Menu on the Pages View.

To adjust the order of page:

• Simply drag and drop the pages with the mouse from the Pages View.

Grouping

Two or more shapes can be grouped into a single shape.

To group shapes:

1. Select two or more shapes to group.
2. Press Cmd/Ctrl G, or select the Group from the Context Menu on the canvas.

To ungroup:

1. Select a group to ungroup.
2. Press Cmd/Ctrl Shift G, or select the Ungroup from the Context Menu on the canvas.

Locking

You can lock a shape to prevent it from being manipulated. This is useful when you need to work with a specific shape as a background.

To lock a shape:

1. Select a shape to lock
2. Press Cmd/Ctrl Shift L, or check the **Lock menu from the Context Menu on the canvas.

To unlock a shape:

1. Select a shape to unlock. A shape in the locked state cannot be selected with a left mouse click. You can select with a right mouse click, which will also bring up the Context Menu.
2. Press Cmd/Ctrl Shift L, or uncheck the **Lock menu from the Context Menu on the canvas.

Container

Shapes that can contain other shapes are called containers. For example, frame shapes are all containers. Users can set or unset specific shapes as containers.

Note

Unless absolutely necessary, it is recommended to use shapes like Frame or Panel from the library rather than manually setting a shape as a container.

To set shapes as containers:

1. Select shapes to set as containers.
2. Press Cmd/Ctrl Shift T, or check the Container menu from the Context Menu on the canvas.

To unset shapes as containers:

1. Select shapes to set as containers.
2. Press Cmd/Ctrl Shift T, or uncheck the Container menu from the Context Menu on the canvas.

States

Some specially designed UI shapes (e.g., Switch, Combobox, …) have states. These shapes render differently depending on their state changes.

To change the states with the Floating Toolbar:

1. Select a shape on the canvas.
2. Click States button from the Floating Toolbar.
3. Adjust the states of the shape.

To change the states with the Inspector Sidebar:

1. Select shapes on the canvas.
2. Adjust the states in the State tool on the Inspector Sidebar.

Table

A Table is a specially created shape composed of multiple combined shapes. A Table shape contains multiple Row shapes, and each Row contains multiple Cell shapes. Each Table, Row, and Cell can be individually selected and manipulated. To add or delete rows and columns in a table, you must use the Table tool in the Floating Toolbar.

To add a table:

1. Find Table shape in the Shapes View. (Search by “table” keywords or find in the Components category)
2. Click the table shape, or drag and drop on the canvas.

Align columns

Each cell can be resized independently. If you want to align all cells to match the columns in the first row:

1. Select a table.
2. Select Align columns of the Table tool from the Floating Toolbar.

Manage rows

To select a row:

• Select a row shape directly with pointing device. (Cells within a row are automatically aligned to the left, so selecting the empty space on the right makes it easier to select the row)
• Select a cell (in the row to select) and then select Select row of the Table tool from the Floating Toolbar.

To insert a row:

1. Select a table (or a row or cell).
2. Select Insert row above or Insert row below of the Table tool from the Floating Toolbar.

To delete a row:

1. Select the row (or the cell) to delete in a table.
2. Select Delete row of the Table tool from the Floating Toolbar.

To duplicate a row:

1. Select the row (or the cell) to duplicate in a table.
2. Select Duplicate row of the Table tool from the Floating Toolbar.

To move up or down a row:

1. Select the row (or the cell) to move in a table.
2. Select Move row up or Move row down of the Table tool from the Floating Toolbar.

Manage columns

To select a column:

• Select a cell (in the column to select) and then select Select column of the Table tool from the Floating Toolbar.

To insert a column:

1. Select a table (or a cell).
2. Select Insert column left or Insert column right of the Table tool from the Floating Toolbar.

To delete a column:

1. Select a cell (in the column to delete) in a table.
2. Select Delete column of the Table tool from the Floating Toolbar.

To duplicate a column:

1. Select a cell (in the column to duplicate) in a table.
2. Select Duplicate column of the Table tool from the Floating Toolbar.

To move left or right a column:

1. Select a cell (in the column to move) in a table.
2. Select Move column left or Move column right of the Table tool from the Floating Toolbar.

Layers

A single document contains multiple pages, each page contains multiple shapes, and shapes can also contain other shapes. This hierarchy can be viewed in the Layers View.

Aligning shapes

You can adjust the z-order of shapes or align them in a specific direction.

Z-ordering

To bring the selected shapes to front:

• Press Cmd/Ctrl [.
• Click Bring to front button in the Alignment tool from the Floating Toolbar.
• Click Bring to front button in the Alignment tool from the Inspector Sidebar.
• Select Bring to front in the Context Menu on the canvas.

To bring the selected shapes one-step forward:

• Press [.
• Click Bring forward button in the Alignment tool from the Floating Toolbar.
• Click Bring forward button in the Alignment tool from the Inspector Sidebar.

To send the selected shapes to back:

• Press Cmd/Ctrl ].
• Click Send to back button in the Alignment tool from the Floating Toolbar.
• Click Send to back button in the Alignment tool from the Inspector Sidebar.
• Select Send to back in the Context Menu on the canvas.

To send the selected shapes one-step backward:

• Press ].
• Click Send backward button in the Alignment tool from the Floating Toolbar.
• Click Send backward button in the Alignment tool from the Inspector Sidebar.

Aligning multiple shapes

To align the selected shapes to the left:

• Click Align left button in the Alignment tool from the Floating Toolbar.
• Click Align left button in the Alignment tool from the Inspector Sidebar.

To align the selected shapes to the (horizontal) center:

• Click Align center button in the Alignment tool from the Floating Toolbar.
• Click Align center button in the Alignment tool from the Inspector Sidebar.

To align the selected shapes to the right:

• Click Align right button in the Alignment tool from the Floating Toolbar.
• Click Align right button in the Alignment tool from the Inspector Sidebar.

To align the selected shapes to the top:

• Click Align top button in the Alignment tool from the Floating Toolbar.
• Click Align top button in the Alignment tool from the Inspector Sidebar.

To align the selected shapes to the (vertical) middle:

• Click Align middle button in the Alignment tool from the Floating Toolbar.
• Click Align middle button in the Alignment tool from the Inspector Sidebar.

To align the selected shapes to the bottom:

• Click Align bottom button in the Alignment tool from the Floating Toolbar.
• Click Align bottom button in the Alignment tool from the Inspector Sidebar.

To distribute the horizontal spacing of the selected shapes evenly:

• Click Align horizontal space around button in the Alignment tool from the Floating Toolbar.
• Click Align horizontal space around button in the Alignment tool from the Inspector Sidebar.

To distribute the vertical spacing of the selected shapes evenly:

• Click Align vertical space around button in the Alignment tool from the Floating Toolbar.
• Click Align vertical space around button in the Alignment tool from the Inspector Sidebar.

Exporting images

To export the selected shapes (all shapes if nothing selected) in the current page as an image, press Cmd/Ctrl E, or select File > Export image from the Main Menu. You can adjust the options of the image to be exported.

• Dark - Exports the image in dark mode if checked.
• Background - Fills the background if checked. (uncheck for a transparent background).
• Scale - Select the image scale (1x, 2x or 3x).
• Format - Choose the image format (PNG or SVG).
• Margin - Select the size of the margin to include in the image.
• Export - Save the image as a file.
• Copy to clipboard - Copy the image to the clipboard.

Dark mode

Dark mode allows that the background is dark and the shape is displayed in light colors.

To toggle dark mode:

• Press Cmd/Ctrl Shift D.
• Select Dark mode button from the Toolbar.
• Select View > Dark mode from the Main Menu.

Zooming

To zoom in the canvas, press Cmd/Ctrl +, or select Zoom in in the Zoom options dropdown menu from the Toolbar, or select View > Zoom in from the Main Menu.

To zoom out the canvas, press Cmd/Ctrl -, or select Zoom out in the Zoom options dropdown menu from the Toolbar, or select View > Zoom out from the Main Menu.

To zoom to 100% the canvas, press Cmd/Ctrl 0, or select Zoom to 100% in the Zoom options dropdown menu from the Toolbar, or select View > Zoom to 100% from the Main Menu.

To fit the canvas to the screen, press Cmd/Ctrl 9, or select Fit to screen in the Zoom options dropdown menu from the Toolbar, or select View > Fit to screen from the Main Menu.