Segments & Mockups
Segments
Segments define specific portions of your animation that can be played independently. They're perfect for developer handoff—helping teams understand which frames to play for different interactions (e.g., hover states, loading sequences, button animations).
Creating Segments
- Click the Segments & Mockups icon on the right panel
- Click Add a segment
- Configure your segment:
- Name - Give it a descriptive name (e.g., "Hover State", "Loading Loop")
- Frame range - Enter start and end frame numbers
- Playback - Choose "Loop" or "Play once"
- Click + Add a segment to create additional segments
Managing Segments
- Preview - Click the play icon in any segment box
- Duplicate or delete - Click the ⋮ menu icon on the right
Sharing Segments with Developers
Share your animation with segments by:
- Creating a sharing link, or
- Inviting developers to view the animation
💡 Important: Segments are visual markers only and don't modify your JSON file. Developers reference the segment information on this page and implement them using the Lottie player code.
Mockups
Mockups let you visualize how your animation will look in context—on mobile apps, websites, or tablets. Perfect for product designers communicating with developers and stakeholders before development begins.
Key Features
- Custom template sizes (mobile, desktop, tablet)
- Upload background images
- Apply background colors
- Position and scale animations
- Play specific animation segments in context
Creating a Mockup
- Open your animation and click Segments & Mockups
- Click Add a Mockup
- Configure your mockup:
- Screen Name - Name your mockup (e.g., "iOS Home Screen")
- Template Size - Select mobile, desktop, or tablet
- Background Image - Upload a UI screenshot (optional)
- Background Color - Choose a color
- Segment - Select which animation segment to display
- Description - Add context or notes (optional)
- On the canvas, reposition and scale your animation as needed
- Click Add to save
Template Dimensions
Templates are scaled based on your screen's aspect ratio. Standard sizes:
| Template | Dimensions | Aspect Ratio |
|---|---|---|
| Mobile | 375 × 812 px | 9:19.5 |
| Desktop | 1920 × 1080 px | 16:9 |
| Tablet | 834 × 1194 px | 7:10 |
Managing Mockups
Click the ⋮ menu next to any mockup to:
- Duplicate mockup - Create a copy to modify
- Delete mockup - Remove it permanently
Sharing Mockups
Mockups are attached to the animation. Anyone with access to the animation can view all mockups. To share, simply share the animation.
💡 No limits: Create as many mockups as you need!