Figma Support Forum

Responsive design — Breakpoints

Product Ideas
#1

I guess Figma easily can implement responsive design feature. Literally it is just switching between frames on width changing of the “parent” frame. Everything else working totally fine right now with constraints and auto-layout.
Following plugins are a good proof: Breakpoints and Responsive

So what exactly we need in Figma:

  1. New type of frame (responsive frame).
  2. Possibility to “connect” all breakpoint frames to the responsive frame.
  3. Responsive frame should work in prototype mode.
  4. Breakpoints controls in prototype mode (similar to the top panel in Anima)

Also Framer already have this feature (with a custom plugin, but it is seamlessly working in prototype mode) :point_down:

3 Likes
#2

Multiple people made this suggestion a long time ago, here are the links to the most notable articles for reference:

The idea of a new tool in Figma.

An interactive prototype and an illustrated description of the Breakpoints tool that could be implemented in Figma.

Exploring a smart component concept in Figma

Isolated context-aware responsive child components

The concept of Breakpoints. Pain reliever in Figma.

So, the breakpoints. Despite being a headache for product designers since the early beginning of the profession, proper design for different breakpoints is a quality mark of a well-crafted unified design that really works, not just looks good…

3 Likes
#4

There is a brilliant, sometimes overlooked plugin that supports some of these behaviors: Figma - Responsive | Preview your responsive designs inside Figma! How to - Add all your layout frames part of a resp...

You set a frame to be the responsive frame, and you set up all the others frames you want to work within it.

(Doesnt work in prototype mode unfortunately, but does work in the editor like this)

For prototype I usually thumb back and forth with the responsive frames.

3 Likes
#5

The original post links to this plugin, and also I think Breakpoints plugin (also linked in the original post) is much better since it doesn’t have to be open in order to see the responsiveness. You simply configure your components with it and then it works without the plugin at all. It’s muuuuch better than having the plugin open and having it change everything inside the frame every time you resize the frame.

2 Likes