- Anima for Figma
- Install Plugin
- Create a Project
- Preview & Sync Project
- Upgrade Teams
- Sample File & Tutorials
- Anima for Figma
- Flow
- Responsive Design
- Smart Layers
- Links
- Breakpoints
- Set Homepage
- Hover Effects
- Entrance Animation
- Fixed Position
- Forms & Text Input
- Videos/GIF/Lottie
- Embed Code
- Play
- Breakpoints Viewport
- Comments
- Code
- Share Prototype
- Manage Access Levels
- Publish Website
- Custom Domains
- Analytics
- Project Settings
Getting Started
Prototype
Collaborate
Prototype Link
Project Settings
Built with ❤️   in NYC & TLV
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:
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:
- Click Breakpoints under the Flow section of the Anima plugin panel
- Holding Shift, select all frames that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile
- Click Done to apply the Breakpoints
Delete Breakpoints:
- Select any frames that has the breakpoint you want to edit
- On the Anima panel, Click on the minus ( – ) icon next to the breakpoint you want to delete
Caught a mistake or want to contribute to the documentation?
Edit this page on Github!