How can I achieve breakpoints in Invision Studio? I would like to have single screen for desktop and mobile, while rearranging elements. While on desktop some elements are next to each other, in mobile version I would like them to lined up vertically. If not possible directly, what is the closest way to simulate it? If not possible even to simulate, what other similar tools are able to handle responsive design prototyping? I have checked Figma and it's also not able to do it.
Add a comment
|
1 Answer
I don't think it's possible natively with Invision, Sketch or Figma.
While these tools have responsive resizing of elements, the layout of the elements doesn't change.
The solution is to create an Artboard for each breaking point. Apparently there's a Sketch plugin called Protowire that you can use to simulate it.
Other tools able to handle responsive design prototyping:
- HTML + CSS.
- Protopie
There might be others.
-
Basically I have to duplicate elements from one Artboard to another as for Invision or there is better way to share elements, while slightly resizing and repositioning?– MichaelJul 1, 2019 at 13:08
-
I haven't used invision for a while, but I guess you can just create components and duplicate them. I usually duplicate the whole artboard with the elements already on it, then resize / rearrange. Components help if I need to change something later.– LucianoJul 1, 2019 at 13:17