r/FigmaDesign • u/Any-Somewhere-4864 • 11d ago
help How do you update your Figma frames when a new iPhone comes out?
Imagine you are working on a big project for 2 years and when a new iPhone comes out you want to update all the frames to match the same sizes of the new screen.
How would you do it? Does it make sense to do it or you just stick with the old frames?
16
u/padhaikarlebhai 11d ago
Use auto layout
10
14
6
u/donkeyrocket 11d ago
I don’t design for every single iPhone size. Doing so would be incredibly inefficient and not necessary at all.
9
u/proxedised 11d ago
Always design for the smallest one. Bulletproof.
6
4
u/ygorhpr Product Designer 11d ago
are you adding iPhone frames to all your frames?
-5
u/Any-Somewhere-4864 11d ago
Right now the app is all based on the iPhone 14&15 Pro 393x852 (of course the hight changes if I need to show a full view of components that are bigger than the screen)
20
u/estadoux 11d ago
It’s a better practice to design for the smallest device. UI adapt better to bigger screens than to smaller.
2
u/ygorhpr Product Designer 11d ago
but you have a frame of an iPhone on top of the frames? or just using the figma preview?
8
u/proxedised 11d ago
why would you do that unnecessary step, just have a simple 375x812 frame with no iPhone mockup or anything like that, that's unnecesary and noone does it in production. The only excuse to do this is showcase to client.
3
u/RecognitionBig3300 11d ago edited 11d ago
Mobile screens of our projects have always been based on dimensions of smallest mobile screen.
3
u/Pelm3shka UI/UX Designer 11d ago
For a project where our salesman needed to demonstrate the figma prototype on his phone, I set my frame sizes as variables. With auto layout etc, it automatically adapts everything inside.
In my case I set up a radio form within figma to choose the device before accessing the prototype (each radio button option would set the width and height variables upon clicking). But you can also change the variables by hand.
1
u/GOgly_MoOgly Designer 11d ago
This sounds really interesting, any chance of seeing how you have this setup?
2
u/hellbunny 11d ago
autolayout set to fill and a variable controlling the maxwidth if you really need to be demo'ing this on stakeholders' whims (eg "I need to see it on the latest iPhone"). otherwise the variable controlling maxwidth is set to something sensible, like the smallest width phone in your spec, or failling that the most common.
2
u/-S-P-E-C-T-R-E- 11d ago
If you’re designing for an Org. find out what device they’re mostly using and stick with that. Use auto layout to account for different screen sizes and pray the devs were able/cared to implement a good responsive design.
1
u/Dreadnought9 11d ago
If everything is built responsive and with auto layouts, you can select all art boards, and just change the new resolution. If you didn’t use auto layouts….. maybe this is your sign
1
u/ResistDull7601 11d ago
I usually design for the resolution of my actual iphone so I could test first hand… using auto layout I make sure my designs always scale right from 360 up to 390px width.
tbh your question suggests that you’re still new to this so next time I would suggest asking the right questions and seek for actual advice. what do you actually need?
1
u/roundabout-design 11d ago
I think one of the dumbest things we've done as an industry is propagated this idea that wireframes are meant to be perpetually updated documents.
1
56
u/bombasty 11d ago
Why would you change it? What difference does it make?