Skip to main content

Your first project

Create a project, draw a few shapes, adjust them in the property editor, and see the result running. This takes about five minutes.

Create a project​

  1. Click the home tab at the top left to open the Welcome page.
  2. Click New Project.

Clate creates a project called Untitled and opens it in a new tab. The project has one empty page, Page 1. The canvas is empty, and the property editor says Select an object to edit its properties.

The Welcome page with the New Project button and the project cards
Click New Project on the Welcome page.
A new empty page with the tool palette and the hint Select an object to edit its properties
A new page is empty. The property editor asks you to select an object.

Draw something​

  1. Press F to choose the Frame tool, then drag on the canvas to draw a frame. A frame is a container for other objects.
  2. Press R to choose the Rectangle tool, then drag inside the frame to draw a rectangle.
  3. Choose Ellipse from the shape flyout in the tool palette, then click inside the frame to place a circle.
  4. Press T to choose the Text tool, then click inside the frame to add some text.

Clate selects each new object right away. See Drawing tools.

Adjust it​

Select an object and change it in the property editor on the right:

  • Position and Layout set where the object is and how big it is.
  • Appearance sets the opacity and the corner radius.
  • Fill sets the color. New shapes also have a thin black outline, which you can remove in the Stroke section by setting Width to 0.
  • For text, type your own words in the Typography section.

See The property editor.

See the result​

  • Click Preview in the toolbar to see the selected layer running in its own window. See Preview.
  • Open the main menu (the Clate button in the toolbar) and choose Export to QML... to write the whole project to QML files. See Export to QML.

You do not need to save: Clate saves your work as you go. See Projects and saving.

A first design: a dark screen with a card, a dot, and a title
A first design.

Next steps​