Such big changes in frame size is pretty drastic and not really how Figma is intended to work. You should instead create variants of the frame and design for different sizes, instead of doing one frame fits all kind of deal (that’s the coder’s job).
Nevertheless, here are some tips to tidy up your design:
The width of the Search Bar, Search Buttons and Language layers have to be set to fill container in order to not go beyond the Center Frame (same goes for the Top Nav and the Footer).
To fix the search icons going outside the Search Bar, set spacing between items to 0 and the spacing mode to space between, like so:
Now you can decide how far the icons should be from the edges by adding horizontal padding instead.
You can scale the Google logo by setting it to fill container as well, but you’ll notice that the logo will stretch when you scale the frame, unless you set the vectors to center instead of scale. Currently, there is no way to scale elements while keeping their aspect ratio unless you do some tricky workarounds. You’ll have to search that up if you want to do that.
Seriously, thank you very much for taking your time out to help me out with this. Let me ask you a question. Did this field, especially utilizing Figma and other design software, come innately easy for you to understand? I have been contemplating a transition into the field, including going back to school (I learn better making mistakes and asking questions). I am constantly reading articles on Medium and have begun reading recommended books, and I believe I am grasping the theories and laws of design. My concern is that I have been having trouble fully comprehending the design tools. Granted, I have not been using Figma long at all, but I am wondering if the skills will eventual come or is it like being a good athlete, just something you are born with.
As far as your design help, I made the suggested changes. The problem I am running into now is that the search bar extends past the frame and the text reverses when I switch to an iphone 13 frame …but you are saying I am just thinking about Figma the wrong way and should be doing different iterations for the different devices … why worry about a responsive design then, just to save time when creating the different versions?
Of course you will learn the software given enough time. I’ve spent most of my life doing UX design, and Figma uses very familiar concepts if you’ve done any web design before, so it was easy for me to pick up. I do think Figma is a great place to start if you eventually are going that route. You know how you learn most efficiently, so if that means going to school or picking up an online course, then go for it!
You could also check out if there’s a community near you: https://friends.figma.com/
Auto layout is great for keeping your design tidy (with paddings, spacings and sorting) and improves iteration time drastically, rather than having to resize and reposition everything manually for every new change.
You cannot make fully responsive frames at this point, but hopefully breakpoints will come natively to Figma in the near future. In the meantime, you can try this plugin if you want to achieve that: Breakpoints | Figma Community
You will still have to design multiple versions for different breakpoints, even with that plugin, and I assume it will work similarly if implemented natively in Figma. That’s just how UI design works, and will work when you want to convert your design to code or use an online web design tool.
Components in Figma will help you reuse a lot of your designs to make the process quicker, but you can only get so far until you have to create component variants for different sizes.
This topic was automatically closed after 30 days. New replies are no longer allowed.