Skip to main content

Tutorial: Your first design

Build a small screen with a frame, a card, a circle, and a title. You use the drawing tools, the property panel, alignment, and the Layers panel.

The finished first design: a dark screen with a rounded card, an orange dot, and the text Hello Clate
The finished screen on the canvas.

You need a new project. On the Welcome page, click New Project. Clate creates a project called Untitled with one empty page.

1. Draw the screen​

  1. Press F and drag on the canvas to draw a frame. The frame is your screen.
  2. In the property editor, open Layout and set W to 480 and H to 320.
  3. In Fill, click the color swatch. In the color picker, type 1E1712 in the Hex field.
  4. A new frame has a thin black outline. In Stroke, set Width to 0 to remove it.
The screen frame on the canvas with its settings in the property editor
The screen: a 480 x 320 frame with the dark fill.

2. Add a card​

  1. Press R. Drag a rectangle inside the frame.
  2. In Position, set X to 24 and Y to 24. In Layout, set W to 432 and H to 140.
  3. In Appearance, set Corner Radius to 24.
  4. In Fill, set the color to 2A2018. In Stroke, set Width to 0.
The card inside the screen
The card.

3. Add a circle​

  1. In the tool palette, open the shape flyout and choose Ellipse. Click inside the frame below the card.
  2. Set W and H to 64, X to 48, and Y to 200.
  3. Set the fill color to E66B00 and the stroke Width to 0.
The orange circle below the card
The circle.

4. Add a title​

  1. Press T and click in the frame to the right of the circle.
  2. In Typography, type Hello Clate in the text field, set the size to 28, and the Weight to 600.
  3. In Layout, set W to 260 and H to 40, and in Position, set X to 140 and Y to 216.
  4. In Fill, set the text color to F5F6F7.
The title text next to the circle
The title.

5. Name your layers​

In the Layers panel, click the arrow next to the frame to show the objects inside it. Right-click each row, choose Rename, and give it a name that says what it is: Screen for the frame, Card, Dot and Title. Good names make longer projects much easier to work with. See Pages and layers.

The Layers panel with the layers named Screen, Card, Dot, and Title
Layers with clear names.

6. Line things up​

  1. In the Layers panel, click Dot, then hold Ctrl and click Title.
  2. In the Position section, click Align vertical center in the Alignment row (the fifth of the seven alignment buttons). The circle and the title now share the same center line.

See Aligning and distributing.

The circle and the title aligned on one center line
The circle and the title after Align vertical center.

7. Look at the result​

  • Choose Zoom to Fit from the zoom field to see the whole screen.
  • Select the frame and click Preview in the toolbar to see it running.
  • Press Ctrl + Z a few times to see how every change can be undone, then Ctrl + Y to redo it.

8. Export​

Open the main menu (the Clate button in the toolbar), choose Export to QML..., pick an empty folder, and Clate writes your screen as QML. See Export to QML.

What you learned​

  • Draw with the tools, then fine-tune in the property editor.
  • Frames contain objects, and each object has its own settings.
  • Use the Layers panel to select, rename, and organize objects.
  • Clate saves everything automatically, and you can undo any change.

Next, try the control panel tutorial to build a more polished design.