Web/App breakpoints in artboards for responsive design

[Mundstrøm]

First of all, I think the Constraints feature is excellent, every other design app is missing this feature (except SubForm but it's still in development).

Constraints needs to be taken a step further for affinity to really rule the web and app design community. What we need to add is breakpoints for element reflow. 

 

Programs like Photoshop and XD still require us to design separate artboards for each breakpoint, and while the constraints-feature is good, it doesn't solve the need for elements in the design to reflow according to the artboard's width. So, while I can make fewer artboards in Affinity, I still need to make at least 3 or 4 to demonstrate to my developers how I want the elements to reflow from 1080p down to mobile. Adobe Edge Reflow came close to tackling this, but it was scrapped and they don't seem to have included it in XD yet. 

 

I'm talking about elements on the screen behaving like justified text, so the artboard's width decides wether items will "jump" to the next row below or back to the row above according breakpoints set in the horizontal ruler and min/max widths set in the constraints for each item.

I imagine this means constraints need to be set on single elements that can be grouped, then those groups can have constraints added to respect columns (like the Bootstrap grid), and finally the groups can respect overall breakpoint constraints. My mind boggles a bit at how to solve this in the app UI, but I'm sure it's possible.