Groups and Frames are two ways to organize elements in Azyrom. Understanding when to use each is key to building well-structured designs.
Groups vs Frames
Groups
- No own dimensions—size from children
- Cannot clip content
- Cannot have fill or stroke
- Simple organization
- Best for: related shapes that move together
Frames
- Fixed dimensions
- Can clip overflow content
- Can have fill, stroke, effects
- Support auto layout
- Best for: UI components, layouts
Working with Groups
Creating Groups
- Select multiple elements
- Press
⌘/Ctrl + Gor right-click → Group - Elements are now grouped together
Ungrouping
- Select the group
- Press
⌘/Ctrl + Shift + Gor right-click → Ungroup
Editing Inside Groups
- Double-click - Enter the group to select children
- ⌘/Ctrl + Click - Select a child directly without entering
- Escape - Exit back to the group level
Groups resize based on their children. If you move or resize children, the group bounds update automatically.
Working with Frames
Creating Frames
Several ways to create frames:
- Frame tool - Press
Fand drag on canvas - Frame selection - Select elements and press
⌘/Ctrl + Alt + G - Convert group - Right-click a group → Frame Selection
Frame Properties
Frames have their own styling options:
- Fill - Background color or image
- Stroke - Border around the frame
- Corner radius - Rounded corners
- Effects - Shadows, blur
Clipping Content
Frames can hide content that extends beyond their bounds:
- Select the frame
- In Properties Panel, enable "Clip content"
- Children outside the frame bounds are now hidden
Use frames with clipping for image containers, scrollable areas mockups, and UI components with overflow.
Frame Presets
The Frame tool offers presets for common device sizes:
- Phone - iPhone, Android sizes
- Tablet - iPad, Android tablet
- Desktop - Various screen sizes
- Social - Instagram, Twitter, etc.
- Custom - Enter your own dimensions
Select a preset from the right panel after pressing F, or draw a custom size.
Custom Frame Presets (NEW)
Create, save, and manage your own custom frame size presets:
Creating Custom Presets
- Activate the Frame tool (
F) - Look for the + button in the frame presets panel header (right sidebar)
- Click the + button to open the "New Custom Preset" dialog
- Enter the following:
- Name - Descriptive label (e.g., "Blog Hero", "Email Banner")
- Width - Frame width in pixels
- Height - Frame height in pixels
- Category - Choose where to organize it (Phone, Tablet, Desktop, Social, Custom)
- Click Save to create the preset
Using Custom Presets
- Shown first - Custom presets appear at the top of their category
- Blue dot indicator - Distinguishes custom presets from built-in ones
- Badge counter - Each category shows "+N" badge for number of custom presets
- Click to use - Click any custom preset to create a frame with those dimensions
- Search compatible - Custom presets appear in search results
Managing Custom Presets
- Hover to delete - Hover over a custom preset to reveal the delete (X) button
- Click X - Remove the custom preset permanently
- Only custom presets deletable - Built-in presets cannot be removed
Persistence
- Saved across sessions - Custom presets are stored in SharedPreferences
- Survives app restart - Your presets are available every time you open Azyrom
- Per-user storage - Each user has their own set of custom presets
Common Use Cases
- Brand-specific sizes - Save your company's standard ad sizes
- Project templates - Create presets for recurring project dimensions
- Client requirements - Save client-specific frame sizes
- Print dimensions - Store common print layout sizes
- Custom devices - Add frames for niche devices or screens
Create custom presets for all your frequently-used frame sizes at the start of a project. This saves time and ensures consistency across all your designs. The search function makes finding your custom presets fast even with many saved.
Auto Layout
Frames support auto layout for responsive designs:
- Select a frame
- Click "Add auto layout" in Properties Panel (or
Shift + A) - Children automatically arrange in rows or columns
Auto Layout Settings
- Direction - Horizontal or vertical
- Spacing - Gap between items
- Padding - Space around edges
- Alignment - How items align
Nesting
Groups and frames can be nested inside each other:
- Frames inside frames - For complex layouts
- Groups inside frames - For organizing related shapes
- Frames inside groups - Less common but valid
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Group selection | ⌘/Ctrl + G |
| Ungroup | ⌘/Ctrl + Shift + G |
| Frame selection | ⌘/Ctrl + Alt + G |
| Frame tool | F |
| Add auto layout | Shift + A |
| Remove auto layout | Shift + Alt + A |
| Enter group/frame | Double-click or Enter |
| Exit group/frame | Escape |
Best Practices
When to Use Groups
- Simple collections of shapes (icons, illustrations)
- Elements that should move together but don't need clipping
- Temporary organization while working
When to Use Frames
- UI components (buttons, cards, modals)
- Page layouts and screens
- Anything needing background fill or clipping
- Components for reuse
Converting Between Types
- Group to Frame - Right-click → Frame Selection
- Frame to Group - Right-click → Unframe (removes frame properties)