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
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.
To undo/redo changes, press
CMD + Z (undo) or
CMD + SHIFT + Z (redo.) Alternatively, click the Undo/Redo buttons on the toolbar.
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.