Hi, hey, hello! 👋✨ Nice to see you here again! 💖✨
Today I’m gonna share with you other things that might be very useful when you are starting your journey with Figma and UI design. I hope that they will make your life easier. ✨ By the way, this is the second part of the series, here you can find part 1, where I focus on colors&typo styles and naming layers. If you missed them, it will be great if you will check them too. 🤗✨
3. Frame, frame and frame! Frame is everywhere!!!
One really useful shortcut you need to know is CTRL + G (most likely you know it already). It groups everything together and reduces the number of layers in your file structure. It's a common shortcut in other programs like Photoshop or Illustrator… But the first thing you need to learn while working in Figma is that you should use CTRL + ALT + G instead. Yes, Figma has the option to group everything but later on groups are not useful at all.
It’s better to frame everything. Why? Because later on you will be able to add an auto layout option that is a huge game changer and it's really helpful for devs. It will be similar to how it works in code. You can align everything inside as you want and also add padding on sides. In groups you can’t do that. And good design is always based on grid and spacing that are consistent. A good developer will never base himself 100% on the structure of design file to create his layout but as a designer if you provide an already great layout really close to the final implementation it remains a huge help for the development team and makes it faster to ship. Trust me it’s really appreciated in a team and will make you stand out from the crowd. ✨
4. Autolayout
Okay, you know now how to frame and why it’s important but what’s up with this auto layout? This option will help you to keep your design clean and consistent in spacing between elements (Btw this is one of the key features that distinguishes Figma from Adobe XD). You won’t have to manually count the space between elements. No more! All you have to do is tap the “+” button near the Auto Layout section (or use SHIFT + A shortcut) and then.. Magic! ✨ Here you can see an example - I added 16 px space between header and the text. I also added a 32 px frame on all sides.
There is also other way adding auto layout with using AI features, called “Suggest auto layout” with CTRL + ALT + SHIFT + A shortcut (honestly, I have no idea who came up with this shortcut, but whenever I’m using it I feel like my fingers will break of this crazy combination and break dance that they had to do… 😭).
I just love this memes from break dance competitions in Olympics, okay... 🙈
You can also add them right clicking on the object and go to “more layout options”. I feel like this might change in the future, since it’s not good to hide this option and a lot of people are complaining about this placing…
This feature will allow you to add auto layout on all layers that are in the frame and it automatically groups elements in the auto layout. I tested it and sometimes it’s working great and it really speeds my work, but sometimes it’s not something I wanted to achieve.
You will also notice that when you enable auto layout for your frame, new options under width and height are unlocked. You can choose three options from there:
Fill container - it makes all child elements (in this example it’s a text, but it can be image, shape etc.) of a container “fluid”, so if you resize the container (in the example the container is the frame with a white fill and a black border) the child elements are adjusting to the parent. Basically it’s filling the container. It’s useful when you work on something that will be responsive.
Hug contents - it makes everything cropped to the child elements width or height.
Fixed - this makes the size… fixed. So no matter what you add inside, the size will be the same. It might be useful when using the wrap option or when you want a specific element to have a particular size.
In this example you can see that all text inside is filled horizontally.
Let’s see what happens when I resize it a little bit…
I made another copy of the frame and resized it. You can see that the text is filling the container. Imagine now when you have a more complex project that you need to make responsive for different devices… By keeping the fill option and auto layout you are saving your precious time. 😇✨Here you can take a look how auto-layout works in our presentation website design. 😎✨https://www.loom.com/share/7c2d9249691f489d925a8ca1985c5be1
If you want to more know about auto layout, you can check this video: https://www.youtube.com/watch?v=To_ADCVSg5gToday you learned why it’s important to frame instead of group your elements and what is auto layout and how to use it. It's an important topic so please practice this and start using it in your projects. MORE PRACTICEEE, MOREEE ENERGYYY!!! This is something that recruiters can take into account when reviewing recruitment tasks, so remember about it. 🧐✨ And this also bring for you more understanding how it works in code. The next topics will be… hmmm, let’s see… Grids and accessibility! Really important topics, so follow us to stay up to date 🥳✨
Thank you for reading this article. Have a nice day and I hope we will see each other again! 🥰✨
Comments