Back
Back to academy

Insert

To create custom elements you need to use the left side toolbar where you can find 5 types of tools.

Select

Is a tool for manipulating with the elements by dragging, selecting and moving them.

The red lines indicate the binding to neighboring elements, as well as the binding in relation to the Artboard.

Hint: Hold Shift to fix the position of the element on the horizontal or vertical axis.

Select an element, hold down Alt/Option, hover over the neighboring element to see the distance between them.

Hint: you can move the elements with the arrows on the keyboard, step - 1px.

Frame

A container that allows you to create more complex structures by nesting one element into another or combining elements.

Creating elements:

Select the Frame tool, click anywhere on the Artboard, so that a 50*50 px square frame would be created.

You can also set the size yourself, just stretch the frame on the screen.

Select the created frame. In the right panel you will find:

  1. frame position in relation to the Art board
  2. frame position in pixels
  3. frame size
  4. corner rounding
  5. here you can set a different rounding for each individual corner of the frame
  6. layer visibility
  7. element scrolling condition

  1. Frame Fill
  2. Adding a shadow. In this version of the editor, only one shadow is available.
  3. Adding an outline
  4. The editor version has only one shadow available.
  5. Adding an outline

To group items, you need to use the same tool - frame. There is no Group tool in Sizze, there is only a Frame ;)

Select the elements you want to group (wrap in a frame) and press Ctrl/Command + G. In the layers, you will see that 2 elements are inside the frame.

For such imput, you can use autolayout to make it easy to manage internal frames. To do this, select an external frame in the layers and in the right panel specify the direction of the autolayout and set the margins.

Read more about autolayout here: link to autolayout.

Text

While selecting this tool a default text is inserted that you can customize later. Text properties can be found in the right sidebar.

Select the Text tool and click on the desired location on the screen. To edit the text, click 2 times on the preset.

In the right panel you will find the text settings.

  1. Font Size
  2. Font type
  3. Font style (normal | underlined| strikethrough)
  4. Text contrast
  5. Text line height
  6. Text alignment (left| center|right)
  7. Font outline
  8. The letter-to-letter distance.

Hand

The tool hand is used to move the page on the canvas area.

Image

You can insert any type of images like png, jpg, svg using this tool.

In the right panel you will find the Replace button (1) to replace the image without changing its size and other settings.

Do you still have questions?

Our team is more than happy to help you sort out or solve the problem you're having.
Request