- Anima for Adobe XD
- Install Plugin
- Create a Project
- Preview & Sync Project
- Upgrade Teams
- Sample File & Tutorials
- Anima for Adobe XD
- Links
- Breakpoints
- Responsive Design
- 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 artboards where each of the artboards represents the same webpage but for different screen size, for example, Home Desktop, Home Tablet, Home Mobile.
To mark different screen size artboard as the same webpage:
- Click Breakpoints under the Flow section
- Holding Shift, select all artboards that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile
- Click Done to apply the Breakpoints
To Edit Breakpoints:
- Select any artboard that has the breakpoint you want to edit
- Uncheck the box next to the breakpoint you want to edit
- If you want to replace it with a different breakpoint, select all artboards that you want to connect with breakpoints again
- Click Done to apply the Breakpoints
Caught a mistake or want to contribute to the documentation?
Edit this page on Github!