Hi, new to Figma, but not new to UX design. I’m very competent with Sketch, JustinMind, Illustrator/Photoshop, and Axure and now my company is trying out Figma.
The question I have is about Presentation Mode.
I see all these great tutorials and functionality around responsiveness when INSIDE the Figma editor. Constrain the button to the parent frame for a variety of responsive behaviors… that’s cool.
But when I launch Presentation Mode I’m only given choices like “Shrink to fit frame” and “Fill to fit” etc.
I need to be able to make some UI that responds like HTML/CSS in Preview Mode.
Like, a responsive data grid where some cells shrink as the window gets less wide and some do not and eventually resulting in a horizontal scrollbar when the grid can get no smaller.
You know, web page style.
I guess I’m confused about why the “drag and watch the objects respond” behavior seems to be limited to only the editor view.
Am I missing something??? I can’t find any info about this. All the search results are about responsiveness in the Editor and none are about the Presentation Mode, at least none that I have found so far.
Unfortunately, in Presentation Mode you cannot change breakpoints to look at the responsiveness of the design.
I made a quick demo of a scrolling thumbnail viewer. It was easy to make and it looks great and works as intended. EXCEPT for one thing…
I can swipe left and see more images and I can tap to open an overlay. But… in an actual webpage there would be a horizontal scrollbar, either on the whole page or on the blue div/container… to indicate that there is content off-screen to the right.
And if I resized the browser widow to be horizontally smaller, the viewport would, or could if I set the sizing and responsive behavior correctly, respond by getting smaller up to a point where it would stop… again, potentially triggering a horizontal scrollbar.
I’m not seeing anyway to make anything like that happen in Presentation Mode?
In Presentation Mode you can see how your design looks on a certain device (static width), interact with design elements for which you have configured any actions on the “Prototype” tab (click, hover, horizontal and/or vertical scrolling, etc.) and test animations. Changing the size of the Presentation Mode window will not do anything, because the width of your design will be static, and in this mode there are no tools that could allow you to switch between breakpoints in your design, like in Chrome DevTools.
When you have horizontal and/or vertical scrolling in your design, Figma doesn’t display scrollbars in Presentation Mode, but you can still interact.
You can read the article from the help center: https://help.figma.com/hc/en-us/articles/360040318013-Preview-designs-and-prototypes-in-Presentation-View
This would be such a useful feature for Developers (Viewer Role). It would be easy for them to figure our which parts of the design is responsive and which aren’t.