Figma’s Tips and Tricks for Every Designer in 2023
A list of tips and tricks that can help a newbie designer to achieve proficiency and accuracy using Figma to deliver visually stunning graphic designs.
1. Rename Quickly.
Naming the layers is essential when working with larger projects and collaborating with other designers or developers.
Many designers avoid naming the layers during deadlines, and some find naming to be boring. However, you can quickly change the names of several layers using this trick at the same time.
Select the layers or objects and press (CMD or CTRL + R). You have to see the Rename pop-up on the screen, To your element, you can add a “Match (optional) and Rename,”
As well as you can do “Number descending order or ascending order.”, With the use of the “Your Start From” feature, you can choose to begin your number ordering at any choice-able value.
2. Nudge Amount.
Nudge amount is a helpful feature when you are moving objects using the keyboard keys shift + arrows.
There are two different kinds of nudges: 1. Small nudge 2.Big nudge.
By default, the object moves 1px in a Small nudge and 10px in a Big nudge.
A nudge amount is helpful when you are following an 8pt or 4pt grid structure, even though you can use your adjustable amounts to simplify the design process.
You can change it from the menu: Preferences / Nudge Amount/ Small Nudge or Big Nudge, then a pop-up appears on the screen, now you can enter your number according to design usability.
3. Tidy up.
Every designer can keep their element organized by the “Tidy up” feature.
When some objects are in different positions, this feature can be applied, just select all of them now you can see a tiny icon appearing in the right-bottom corner click on and all elements will by default take equal spacing among them.
You can even apply this feature using the right sidebar which is upper in the Align bar located in the Right-top corner.
Moreover, you can adjust equal horizontal and vertical spacing by stretching the indicator.
4. Question Mark.
There is a floating button at the bottom right corner of Figma i.e. a question mark (?), you don’t know but it is the most essential and helpful feature for a beginner.
When you click on the “?” button, multiple features pop up in these categories.
1. Help Center
2. Support form
3. Youtube videos
4. Release Notes
5. Legal Summary
6. Submit Feedback
7. Ask the Community
8. Contact Support
9. Keyboard Shortcuts
10. Reset Onboarding
11. Change the Keyboard Layout
12. Change Language.
Among all of them, my favorite is
1. Youtube Videos — You can check out the Figma tutorial playlist for beginners.
2. Ask the community — Every designer asks queries and submits their feedback in the community so you can improve your knowledge.
5. Voice Memo.
Sometimes we work with different designers & developers, and they don’t have any idea about some modules even from notes and no buddy wants to write long notes on the side of every frame. We can use this widget to record and share audio notes with teammates, send a brief message to someone, or provide feedback that is difficult to capture on a sticky note.
In additional context, you can add up to 30 seconds of audio and a title to the recording. Your message is confirmed as having been heard when the listener’s name appears below the recording. You can even add comments on voice memos to easily filter out them.
How to find: Go to Resource (besides the text icon (T) on the top bar) / Widget / Search Voice Memo.
6. Hide-multiple cursors.
When working with multiple designers and developers simultaneously, few designers want to work with peace multiple courses distracting to work and not being the focus
You can change it: Edit / Multiplayer cursor (you can turn it On/Off)
Now you can work with a chill.
7. Export multiple objects in different formats.
Well, sometimes exporting the elements one by one in multiple formats is so boring and hectic. However, use this thing to export multiple things in a single click.
But the point is that sometimes you just want a specific format or element so you can follow this process.
1. Select multiple elements.
2. Add multiple export formats
3. Press Shift + Ctrl (CMD) + E, and now a popup appears on your screen select according to your need and Export them.
It’s tricky, but now you clearly show it in the video.
8. Multiple Prototyping.
Prototyping is an interesting part of designing, but when multiple elements connect in a single element some designers connect objects one by one, however using this thing you can do it in a single trick.
Select multiple elements which you need to connect to a single object and just connect them.
9. Remove Multiple prototyping in a single thing.
In some scenarios, we finish the whole prototyping and realize we applied the wrong prototyping in some things. It will be hectic to remove every connection.
On the other hand, just select this particular or whole screen, press the right click of the mouse and you can find the “REMOVE INTERACTION” menu, click on it and all the prototype interactions get cleared.
10 . Bulk Image Place.
Figma allows importing of multiple images at a time. Following that, you can decide exactly where to put each image.
You can add images to existing objects because Figma manages images as fills.
How to place the image:
1. Go to the Figma Top bar and you can see the “Shape” icon in the toolbar.
2. Select the “Place Image“ option or press [Shift + CMD (CTRL) + K ]
A window appears on your screen, from that choose multiple images and press the “Open” button on the window. Now you can place the images one by one on your selected Canvas.
11. Align multiple frames
1. Select multiple objects (They should be inside the frame)
2. Press [Shift + CMD (CTRL)] and hover the mouse over the “Align Tool” you can see the frame appear to align the tool with every icon just press according to your choice.
This modern approach to UI UX Design can be a time saver for some designers as it allows them to easily align multiple objects in a single click.
Written By : Ravi Desai
