- Anima for Figma
- Install Plugin
- Create a Project
- Preview & Sync Project
- Upgrade Teams
- Sample File & Tutorials
- Anima for Figma
- Responsive Design
- Smart Layers
- Set Homepage
- Hover Effects
- Entrance Animation
- Fixed Position
- Forms & Text Input
- Embed Code
- Breakpoints Viewport
- Share Prototype
- Manage Access Levels
- Publish Website
- Custom Domains
- Project Settings
Built with ❤️   in NYC & TLV
Figma’s responsive constraints make it easier to design for multiple screen sizes. You can create fully responsive designs that can be resized both in the browser preview and in the code.
An element’s responsive constraints are set in relation to its nearest parents. A parent can be a frame, a group, or a component.
- If we want the Purple Background layer in the example below to stretch full width when its parent, “Our Story-Mobile” frame, gets wider, we need to select Left and Right from the Constraints options.
IMPORTANT: Make sure that Layout Constraints are enabled in the Anima plugin
Constraints in Groups and Components
As mentioned, the constraints settings apply in relation to the element’s closest parent. This means that if the elements are inside a Group or a Component, these need to have responsive settings applied to them as well.
Inside this Announcement group below (Parent) we want:
- The Purple background to stretch full width and always touch the top
- The Announcement Text to always stay centered and 15px from the top
- The Close icon to always be 17 pixels from the left corner
- The entire Announcement Group (Parent) to stretch when its parent (Our Story frame) is stretched
Then, we need the following Constraints settings:
If you have more than one screen size, connecting them with Breakpoints and adding Constraints is a very powerful combo! They will create a very smooth transition between all your screen sizes. Try it out!
Click “Preview in Browser” in the Anima plugin to see it come to life.