Breakpoints

Breakpoints are a way to make your design look great on Mobile, Tables or Desktops.

For example, in the following screenshot you can see the same webpage in three different screen sizes:

Desktop, Table, Mobile Screen Sizes

How to Create Breakpoints

First, design your website in multiple frames where each of the frames represents the same webpage but for different screen size, for example, Home Desktop, Home Tablet, Home Mobile.

To mark different screen size frames as the same webpage:

  1. Click Breakpoints under the Flow section of the Anima plugin panel
  2. Holding Shift, select all frames that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile
  3. Click Done to apply the Breakpoints

Breakpoints Interface

Delete Breakpoints:

  1. Select any frames that has the breakpoint you want to edit
  2. On the Anima panel, Click on the minus ( ) icon next to the breakpoint you want to delete