In this post, I will be talking about a few features that will help you save time and design faster using Figma.

1. Scaling: I never knew this feature existed until recently. Before then, If I would like to resize a group of items, I usually execute that one by one which can be really time-consuming. In today’s design world, clients want results faster and moving layers one by one can get really boring. The ‘scale’ tool in Figma can be activated by pressing the ‘K’ button on your laptop or just under the ‘Move’ tool. You can revert the tool back to the Move tool by pressing the ‘V’ button.

Typically, results are indicated in the image below. All contents within the frame or group are properly scaled and not shrank in any way. It is worthy to note that scaling works for frames, groups, component instances, and text objects.

• 2. Autolayout: This is a pretty new feature basically ‘nests’ items within your frame. For example, editing the text in a button can be really time-consuming as you’d have to resize the text and also resize the button itself. With auto-layout, the button size will automatically increase or reduce based on the addition or removal of text within it. This will enable you to create more responsive forms which are properly aligned.

• 3. Components: There are several items within your design that are re-usable/repeated. These include headers, logos, footers, etc. Instead of recreating these items, you can simply create them as components. As an example, if I create a red button, select it and press ‘Command+Option+K’ in MAC, it will make it a component, when I duplicate the red button several times or just one time, the new red boxes created will be what I call ‘Child Components’ while the first one I created them from will be called ‘Master Component’. Going forward, anytime I change features such as size, color in the Master Component, the Child Components will automatically update. This helps save countless hours of editing colors and sizes across a lot of frames.

• 4. Styles: You can create and save effect or text styles in Figma. For example if a particular shape has a drop shadow and I want another shape elsewhere to have it, I can simply apply the style I have saved for the previous shape to it. While saving styles, make sure to name it in a way you can easily remember to avoid confusion. For the effects style to work, make sure you have added some form of effect such as drop shadow to the shape.

• 5. Command+D: I have always been a fan of Command+D while copying a layer. If Command+C is a Toyota, I think Command+D is definitely a Benz. Command+D enables you to duplicate an item and every time you press command D, it duplicates it with an equal amount of spacing as you applied to the first copied layer. This generally makes your work neater and saves the time needed to drag items to their appropriate layers.

If you have other tips/advices, do not hesitate to commend below or contact us!