Editing Elements on the Stage

You can use the Haiku stage to position and transform your design elements. The first step is to get your designs on the stage. Then you can use Haiku's familiar on-stage tools to position and transform them.


ADDING ELEMENTS TO THE STAGE

To get an item from the Library to the Stage, simply drag and drop from the Library. The new element will show up on the stage where you drop it, and a new row will show up in the Timeline representing the new element. To learn more about getting elements into the Library, see Sketch and Image Assets.


SELECTING, RESIZING, ROTATING, DELETING

To select an element on stage, simply click it.

To Resize, click and drag one of the control points around the selected object. Optionally, hold SHIFT to maintain aspect ratio and/or hold ALT to transform from the object's center.

To Rotate, hold CMD and hover outside any control point (similar behavior to Sketch). Optionally, you may hold down SHIFT to lock rotation to increments of 15 degrees.

To Delete, once an element is selected, press DELETE.


ZOOMING AND PANNING

For precise control over elements on the stage, you can zoom and pan.

To Zoom, hover over the stage with your mouse and press CMD + Plus (zoom in) or CMD + Minus (zoom out).

To Pan, hover over the stage with your mouse, hold the Space Bar and click and drag with the mouse.


RESIZING THE STAGE

You can resize the stage (and thus default size for your Haiku component) in two ways:

Visually, you can hover over the stage name until the stage is outlined in pink — then click and you will get a visual resizing tool.

Numerically, you can edit the Size X and Size Y of the top-most element in the timeline. This has the same effect as changing the size visually.


CHANGING STACKING ORDER (Z-INDEX)

To change the stacking order of an element on stage, right-click on it (or CTRL + click) and select Send Forward/Backward/To Front/To Back.


UNDO/REDO

To undo/redo changes, press CMD + Z (undo) or CMD + SHIFT + Z (redo.) Alternatively, click the Undo/Redo buttons on the toolbar.


CUT/COPY/PASTE

To Cut, press CMD + X. To Copy, press CMD + C. To paste, press CMD + V. Alternately, click the Cut/Copy/Paste buttons on the toolbar. You can also right-click any on-stage element and Cut/Paste via the context menu.


Next: Creating Animations with the Timeline

results matching ""

    No results matching ""