Intermediate
How to set up responsive design on Framer
Quick Answer
Set up responsive design in Framer by configuring breakpoints in the canvas settings, adjusting layouts for different screen sizes, and using responsive constraints on elements. Framer's built-in responsive system automatically adapts your designs across desktop, tablet, and mobile viewports.
Prerequisites
- Basic familiarity with Framer interface
- Understanding of responsive design principles
- Knowledge of breakpoints and viewport sizes
- Experience with Framer components and frames
1
Create a new project and set up canvas breakpoints
Open Framer and create a new project. In the canvas, click the Canvas Settings icon in the top toolbar. Enable Responsive Design and configure your breakpoints by clicking Add Breakpoint. Set up the standard breakpoints: Desktop (1440px), Tablet (768px), and Mobile (375px). Click Apply to save your breakpoint configuration.
Tip
Start designing with the desktop breakpoint first, then work your way down to smaller screens for better design consistency.
2
Design your desktop layout
Select the Desktop breakpoint from the breakpoint selector in the top toolbar. Create your main layout using frames and components. Add navigation, content sections, and footer elements. Use Framer's Auto Layout feature by selecting elements and clicking Auto Layout in the properties panel to create flexible containers that adapt to content changes.
Tip
Use consistent spacing and grid systems that will translate well to smaller breakpoints.
3
Configure responsive constraints
Select elements in your design and open the Layout section in the properties panel. Set Constraints for each element by choosing how they should behave when the screen size changes. Options include Left & Right for full-width elements, Left & Width for fixed-width elements, or Center for centered content. Configure Vertical Constraints similarly using Top, Bottom, or Center options.
Tip
Use Left & Right constraints for headers and footers to make them stretch across the full width of any screen size.
4
Adapt your design for tablet breakpoint
Switch to the Tablet breakpoint using the breakpoint selector. Framer will show your design adapted to the tablet size based on your constraints. Make manual adjustments by modifying element sizes, spacing, and positioning as needed. Adjust Text Size and Padding values in the properties panel to optimize for tablet viewing. Hide or show specific elements by toggling Visibility if needed for this breakpoint.
Tip
Consider changing multi-column layouts to single columns on tablet for better readability.
5
Optimize for mobile breakpoint
Select the Mobile breakpoint and review how your design appears. Make necessary adjustments for mobile optimization including: reducing text sizes, increasing touch target sizes to minimum 44px, stacking horizontal elements vertically, and adjusting navigation to a mobile-friendly format like a hamburger menu. Use the Stack direction in Auto Layout to change from horizontal to vertical layouts.
Tip
Ensure all interactive elements are easily tappable with adequate spacing between them on mobile devices.
6
Test responsive behavior
Click the Preview button in the top right corner to test your responsive design. In preview mode, use the Device Selector to switch between different screen sizes and orientations. Test the transitions between breakpoints by manually resizing the preview window. Check that all elements scale properly and maintain their intended layout across all breakpoints.
Tip
Test on actual devices when possible to ensure the responsive behavior works as expected in real-world scenarios.
7
Publish and deploy responsive site
Once satisfied with your responsive design, click Publish in the top right corner. Choose your publishing options in the publish dialog. Your Framer site will automatically be responsive and work across all device types. Copy the published URL and test it on different devices and browsers to ensure consistent responsive behavior across platforms.
Tip
Use browser developer tools to test additional breakpoints and device simulations beyond what you set up in Framer.
Troubleshooting
Elements overlap or break layout at certain screen sizes
Check your Constraints settings in the Layout panel. Ensure you're using appropriate constraint combinations like Left & Right for full-width elements and Center for fixed-width content. Also verify your Auto Layout settings are configured properly with correct direction and spacing.
Text becomes unreadable on smaller screens
Adjust text sizes for each breakpoint individually. Select your text elements and modify the Font Size in each breakpoint. Consider using Framer's Typography variants that automatically scale across breakpoints, or manually set different sizes for Mobile (14-16px), Tablet (16-18px), and Desktop (18-20px+).
Images don't scale properly across breakpoints
Set image constraints to Left & Right and enable Maintain Aspect Ratio in the image properties. If images appear stretched, use Fill or Fit options in the image settings. For background images, adjust the Background Size property to Cover or Contain as needed.
Navigation menu doesn't work well on mobile
Create a mobile-specific navigation component. Hide the desktop navigation on mobile breakpoint and show a Hamburger Menu instead. Use Framer's Overlay component to create a slide-out mobile menu. Set up Variants for open and closed states and add Transitions between them for smooth animations.
Ready to get started with Framer?
Put this tutorial into practice. Visit Framer and follow the steps above.
Visit Framer →