Segments & Mockups

Segments

Segments are used to define and play specific segments of your animation. You can create segments to indicate a specific frame and its interactions. This is ideal for sharing with a developer to implement in an app, website or any other platform.

You can go to the right side and click the Segments & Mockups icon. Click the Add a segment button, you can rename each segment as you create them. Find which frame you wish to play and stop, then type in specific frame numbers. There are two options for each segment - a loop or play once.

Click + Add a segment if you want to add more segments. You can duplicate a segment or delete it by clicking the kebab icon on the right of the box.

To preview a segment, you click the play icon in the segment boxes. Once you are happy with the segments and want to hand over it to a developer to implement it into an app or website, or any desired platforms. You can share it with them by creating a sharing link or inviting them to this animation.

Do not worry about whether the segments will affect the JSON file, it will not affect the file at all or make any modifications. The developer will refer to the segments on this page, then implement it inside the app or website using the player.

Mockups

A mockup is a design prototype that represents the visual design, layout, and content of a website or application. This helps you demonstrate the big picture and evaluate the design before moving to the development phase. If you are a product designer, this is a useful tool for communicating the desired look of the animation in the UI to developer and colleagues.

The main features of the mockup feature are that you can create the mockup with custom template sizes (mobile, desktop, tablet), upload a background image and select a background colour to replicate your visual design. You can resize and position your animation and background and play specific segments of the animation.

Here are simple instructions on how to create a mockup:

1. Open your animation and click the Segments & Mockups button.

2. In the Segments & Mockups panel, click the Add a Mockup button.

3. In the Add a Mockup panel, you can:

• enter the name for your mockup in the Screen Name field
• select the template size of the canvas
• upload a background image
• select a background colour
• select a segment to play
• enter any description in the Description field

4. On the canvas, you can reposition and scale the animation accordingly.

5. When you have added all the details and finalised the position, click the Add button.

The dimensions of each template are scaled based on the aspect ratio of your screen. Therefore, the exact dimensions may not be the same on all screens, but these guide will give you an idea of how the templates are normally displayed.

• Mobile : 375 x 812 px (9:19.5)
• Desktop : 1920 x 1080 px (19:6)
• Tablet : 834 x 1194 px (7:10)

You can also create a duplicate or delete the mockup from the Segments & Mockups panel. Click on the … button next to the mockup and you will see the options to Duplicate mockup or Delete mockup.

The mockup is linked to the animation itself. Anyone who has access to the animation can view the mockup. If you want to share the mockup, you just need to share the animation by following the steps here: Share animation

There is no limit to the number of mockups you can create, you can create as many as you want!

Updated January 30, 2023 09:27