The Grid Panel lets you configure layout grids on frames for consistent spacing and alignment. Create column grids, row grids, and uniform grids for different design needs.
Grid Types
Column Grid
Vertical columns for layout:
- Count - Number of columns (e.g., 12)
- Gutter - Space between columns
- Margin - Space from frame edges
- Type - Stretch, Center, or Left/Right
Row Grid
Horizontal rows for layout:
- Count - Number of rows
- Gutter - Space between rows
- Margin - Space from frame edges
- Height - Fixed row height or auto
Uniform Grid
Square grid for icon and illustration design:
- Size - Grid cell size in pixels
- Color - Grid line color
- Opacity - Grid visibility
Adding Grids
- Select a frame
- Open Grid Panel or use Properties panel
- Click + to add a grid
- Choose grid type
- Configure settings
Grid Configuration
Column Settings
| Setting | Description |
|---|---|
| Count | Number of columns |
| Width | Column width (or Auto) |
| Gutter | Space between columns |
| Margin | Outer spacing |
| Offset | Starting position |
Grid Presets
Common grid configurations:
- 12 Column - Standard web layout
- 8 Column - Tablet layouts
- 4 Column - Mobile layouts
- 8px Grid - Material Design spacing
- 4px Grid - Fine alignment
Grid Colors
Customize grid appearance:
- Click color swatch to change
- Preset colors available
- Adjust opacity for visibility
- Different colors for different grids
Multiple Grids
Combine grids on a single frame:
- Column grid + row grid = complete layout
- Uniform grid overlay for fine alignment
- Toggle individual grids on/off
Grid Visibility
Toggle All Grids
- Keyboard:
Ctrl/Cmd + ' - Or use the Grid Panel visibility toggle
Toggle Individual
- Eye icon next to each grid
- Grid remains configured when hidden
Snapping to Grid
- Elements snap to grid lines when dragging
- Hold Ctrl/Cmd to temporarily disable
- Configure snap threshold in preferences
Grid Styles
Save grid configurations as styles:
- Configure grid as desired
- Click the style icon
- Choose "Create Grid Style"
- Name the style
- Apply to other frames
Best Practices
- Use 12-column grids for responsive web
- Keep consistent gutters across designs
- Use 8px uniform grid for icons
- Create grid styles for reuse
- Match grids to development framework