Make Click Targets Large - Framer

Make Click Targets Large in Framer

1. Open your project in Framer and navigate to the page containing the interactive elements you want to adjust.
2. Select the first interactive element (button, link, icon, image link, component with click interaction). The right-hand properties panel will appear.
3. Check the element’s Frame Size in the Layout section:
   • Ensure the width and height meet the recommended minimum target size of 44px × 44px.
4. For Buttons:
   • Select the button → open Design,
   • Increase Padding around the text to enlarge the clickable area,
   • Ensure the button remains at least 44px tall.
5. For Text Links:
   • If the link is very small, wrap it inside a Frame with padding,
   • Or convert the link into a Button component for reliable sizing.
6. For Icon Buttons (hamburger menus, close icons, arrows):
   • Select the icon → open Layout,
   • Increase width/height or add padding to reach 44px × 44px minimum,
   • Ensure the icon’s hit area expands even if the icon graphic stays small.
7. For Image Links:
   • Select the linked image → resize using the bounding box,
   • If keeping the image small, wrap it in a Frame and increase padding so the click area is larger.
8. For Custom Frames acting as controls:
   • Select the Frame → adjust Padding and Min Height until it meets the tap-size minimum,
   • Open Accessibility to ensure it is Focusable and has a descriptive ARIA label.
9. For Navigation Menus:
   • Select each nav item within the menu component,
   • Increase padding and spacing so links are large enough to tap comfortably,
   • Check mobile menu layouts specifically to ensure touch-friendly sizing.
10. For Carousels or Sliders:
    • Select next/previous arrows → increase size or add padding,
    • Ensure users can easily tap the arrows on mobile screens.
11. Switch to Tablet and Mobile breakpoints:
    • Verify that all controls remain at least 44px in height/width,
    • Increase tap targets further if mobile spacing is tight.
12. Enter Preview mode and test clicking/tapping with both mouse and keyboard. Confirm that each control is easy to activate without precision.
13. Publish or update your project after all click targets meet accessibility size requirements.