In Studio mode the top bar holds the element creators: add shapes, vector paths, text, and media (image/video/audio/iframe), insert interactive elements, and combine vectors with boolean ops.
Where: Top bar (Studio mode) → creator menus — Open a creator dropdown
Before you start
- Open an editable page in Studio mode.
Key ideas
- Drag-created elements: Frames, rectangles, triangles, circles, stars, vector paths, pencil strokes, and most media enter a placement tool so you can draw their bounds.
- Immediate elements: Code inserts an interactive element at the page root and selects it immediately rather than waiting for a drag gesture.
- Selection operations: Boolean union, subtract, intersect, and exclude operate on compatible selected vector geometry instead of creating a new primitive from scratch.
Steps
- Switch to Studio and open the relevant creator dropdown.
- Choose Frame, Rectangle, Triangle, Circle, Star, Path, Pencil, Code, or a supported media type.
- For a drag-created item, draw its bounds on the intended parent; for Code, inspect the immediately inserted root element.
- For media, choose/upload the source when prompted, then place Image, Video, Lottie, Spline, or Image Sequence.
- Select compatible vectors before applying Union, Subtract, Intersect, or Exclude, then inspect the resulting path and layer order.
Creator map
- Shapes: Frame (F), Rectangle (R), Triangle, Circle, Star, and Code.
- Paths: Path (P) and Pencil (Shift+P).
- Media: Image (I), Video (Shift+I), Lottie, Spline (3D), and Image Sequence.
- Text uses its own top-bar creator.
- Boolean operations combine compatible selected vectors.
Media defaults
Lottie, Spline, and Image Sequence start with a valid element contract and placeholder/default source so their dedicated inspector can refine autoplay, loop, renderer, scene URL, frames, FPS, fit, and related properties.
Tips
- Draw inside the intended container so layout and responsive behavior start with the correct parent.
- Use components/instances when repeated elements should stay structurally linked.
Troubleshooting
The new element appears in the wrong hierarchy
Undo, select or enter the intended parent, and create it again; use Layers to verify the parent before styling.