My Top 3 Intriguing Features in Figma (a.k.a my Figma Superpowers)
I don’t know about you, but Figma is by far my best design tool and I get mind-blown almost every day by the possibilities of what I can achieve with it and also, by what I see fellow designers do with it.
In this article, I will be talking about 3 major features that intrigue me the most about Figma. Of course, it was really hard to choose from the long list of exceptional features that the tool has. But eventually, I chose the following features as my top 3:
- AUTO-LAYOUT
- INTERACTIVE COMPONENTS and
- COPYING AND PASTING OF PROPERTIES.
1. AUTO-LAYOUT
Auto Layout is by far one of the best features of Figma. This saves a huge amount of time spent on making our designs flexible, responsive and consistent. Auto Layout removes all the nuisances that are caused anytime you make changes to your layout.
In brief, it allows you to structure components and frames in a way that can automatically grow, making the container adapt to the size of its contents, or the other way around.
Being such a flexible feature, it also has its complexity and limitations. It can be a bit hard to understand how it works, especially at the beginning. It’s also difficult, initially, to get predictable results without so many attempts, and trial and error.
The more you become familiar with the shortcuts for auto-layout, the quicker they’ll quickly become second nature.
You can access this feature with the following keyboard shortcuts:
- SHIFT + A = add auto layout
- SHIFT + ALT + A = turn auto-layout frame into a regular frame
- CMD / CTRL + SHIFT + G = remove auto layout
- CMD / CTRL + D = duplicate items in an auto-layout
Here are a few examples of what you can achieve with this superpower
2. INTERACTIVE COMPONENTS
Interactive components allow you to create prototype interactions between variants in a component set. Any time you add an instance to your designs, those interactions are set up and ready to go. This saves you time when creating prototypes and prevents unnecessary repetition and duplication of frames. (I have done this in the past and I know how tiring it can be).
So, basically, this feature allows you to:
- Create interactive elements that automatically switch between variants, like buttons that change from hover to pressed states.
- Set default interactions at a component level and remove the guesswork when it comes to building prototypes.
- Reduce the number of frames and connections needed to prototype input fields, like a set of checkboxes or toggles.
Here is an example of what you can achieve with this superpower
3. COPYING AND PASTING OF PROPERTIES
If you want to reuse properties you’ve applied to a layer, you can copy and paste them between layers. You can use this feature to copy fill, stroke, text and EVEN AUTO-LAYOUT properties.
You can access this feature with the following keyboard shortcuts:
Mac
- Copy properties: ⌥Option + ⌘Command + C
- Paste properties: ⌥Option + ⌘Command + V
Windows
- Ctrl + Alt + C to Copy properties
- Ctrl + Alt + V to Paste properties
Right-click menu
- Right-click on the layer in the canvas.
- Select Copy properties from the options.
- Right-click on the layer to which you want to add the properties.
- Select Paste properties.
- Figma will apply any properties that are supported by that layer.
Here is an example of what you can achieve with this superpower
I hope you enjoyed my brief explanation and show-off of why I think Figma is THE BEST DESIGN TOOL YET.
There are lot more features that make Figma a really awesome design tool.
If you use Figma, let me know your favourite features in the comment section.
Anyway, feel free to read (or watch) to learn more about the features discussed in this article via the links below:
Auto-Layout
Figma tutorial: Auto layout button
Interactive Components
Copying and Pasting of Properties
