Frames
Use frames as containers for layouts, screens, and sections.
What frames are
Frames are the primary container layer in Lovision. Unlike groups, frames have their own size, background, padding, and layout settings. Use them for:
- App screens and mobile views
- Cards, panels, and sections
- Artboards and page areas
- Any content that needs clipping or auto-layout
How to create a frame
- Press F to activate the Frame tool, then drag on the canvas to draw a frame.
- Press ⇧A (Mac) or Shift+A (Windows) to wrap the current selection in a new frame sized to fit.
- Press ⌘⌥G (Mac) or Ctrl+Alt+G (Windows) to wrap the selection in a frame in place.
Frame vs. group
| Frame | Group | |
|---|---|---|
| Has its own size | Yes | Sized to children |
| Clips content | Yes (optional) | No |
| Supports layout | Yes | No |
| Has background fill | Yes | No |
Clipping
By default, frames clip their children — content that extends beyond the frame boundary is hidden. You can disable clipping from the node settings panel to allow children to overflow.
Layout
Frames support auto-layout. When enabled, children stack or wrap automatically based on direction, gap, and padding settings. See Frame layout for details.
Tips
- Name frames clearly — their names appear in the layers panel and export dialogs.
- Double-click a frame on the canvas to enter it and select a child layer.
- Use Esc to exit the frame and select the frame itself.