Three tricks on Figma (I wish someone told me)
If you’re like me, you like to learn by doing when trying a new program. I’ll click around on everything and progressively learn all the cool features. Some things take longer to figure out and are not as intuitive, but can be really useful. I’m happy to share a few hidden gems that are now essential in my workflow.
1. Auto-Layout
As a UI designer, you will probably design a button at some point. Trying to layer a rectangle, make the padding perfect, and centering the text can be tedious. Now with the Auto Layout settings, you can automate the padding for any text box. This can work for elements other than text, but so far that’s where I find this most useful.
Note: Sketch also has this feature, but it’s called Smart Layout.
All you have to do is right-click on the text box to find the add Auto Layout setting and it’ll appear on your right tool menu. From there you can change the dimensions as you please.
2. Measurement Hover
Another quick trick that I learned midway through designing a responsive website was how to find the measurements of objects and in-between objects. You can always check the width or height from the tool panel and distances sometimes appear as you move an object automatically, but that’s not enough detail to check if you have a consistent design. How do you check the padding or distances between objects? Simple, click on an element then you hold (CMD + Option) or (Windows + Alt) while hovering other objects with your cursor.
3. Built-in Calculator
Last, but not least — did you know that every numeric input box works as a calculator? Silly me, I have been doing basic math in my head every time. It’s helped me to know this exists, especially when trying to build with exact conversions between your desktop and mobile versions of a design. Other design programs may have this as a standard, but I’m just realizing this from the first learning it works on Figma. (Works on Photoshop and Sketch too!)
Conclusion
I’m sure there’s a lot more to be explored to enhance my workflow on Figma. I just wanted to share a few quick tricks that aren’t obvious to a first-time user. Let me know of any additional tricks you know or cool plug-ins in the comments!
