For all things to do with the Figma collaborative design tool www.figma.com. For commercial or other addons, please go to /r/FigmaAddOns
Is it possible to make responsive app prototype?
help
Hello, I'm wondering is it possible to make one prototype and make it pixel perfect on eg. iPhone 13 mini and Galaxy S23.
The main problem I'm having is the height of the frame and top and bottom nav which are both set to fixed position.
I have some decent knowledge in figma regarding auto layout, components, atomic design. This is my first app project which I'm doing for my finals.
Sort by:
Best
Open comment sort options
Best
Top
New
Controversial
Old
Q&A
This is one of the real strengths of using Variables, Components and Modes in Figma.
There are a lot of examples of using these to switch between Desktop and Mobile versions on YouTube etc.
Good luck on your journey!
Not that I know, but it would be cool if you could set the custom prototype size to auto for both width and height
I don't think u understood my question.
I'm aware of switching between desktop and mobile devices.
I'm wondering if it is possible for me to share the same prototype link that looks perfect on my device to someone else that obviously doesn't have the same phone as I do.
I see!
Figma prototypes are a static size, as far as I know, based on the Frame size.
The best you could do is duplicate your prototype and resize the frames for the other device.
To share just one link, you could add a landing page where the recipient can choose the device type. Each listed device would then link to the relevant prototype flow.
Not ideal, I know, but it's something!
Okay, thanks for the idea!
Figma prototypes have hardcoded width and height measures.
If you want pixel-perfect, you will have to make two different prototypes. One for each size.
Not on one prototype as Figma only allows you to show a prototype on a pre defined height and width. You can make your designs responsive so it’s easy to design on let’s say 360px width and also 475px width and show the 2 prototypes
Unfortunately not a great way to do this, especially with the bottom nav. You can set the prototype link to fill width, so that the prototype always goes from edge to edge on the screen it’s opened on, but it’s really just scaling and the bottom nav likely won’t align to the bottom of the screen.
Break points
Of course! Try playing around with ‘fixed widths’ and ‘fixed heights’ using the min/max width/height feature within figma. I’ve experimented with responsive layouts with these settings, but surely others here mast have better ideas :)
Also, there’s a plugin called ‘Breakpoints’ that can help you make your designs responsive. Again, I’m not entirely sure, I’ve seen my colleagues demo it during client meetings.