Figma is a great tool for UI/UX designers and web designers. If you’re new to the world of Figma design, we’ve compiled some helpful lesser known tips and tricks that can help you ace Figma.
Figma has come a very long way since its launch in 2016. This cloud-based, easy to use application lets you design apps, websites and other UI components that can be integrated into other projects.
With these Figma tricks and hacks, you can increase your productivity and also make your web design tasks easier. As much as Figma speeds up your workflow, these features will make working on it even better.
So without wasting any more time let’s get right into it and talk about some of our favourite Figma tips.
1. Update auto layout
With this Figma tip you can update or add the new auto-layout feature for dynamic resizing of your designs. With this feature of auto layout, you can quickly create buttons, lists, models etc. with multiple margins and resizing rules that can easily accommodate more intricate components and eradicate the need for tedious spacing edits.
Update auto layout2. Update the nudge amount to 8px
8px is the recommended nudge amount and must be used consistently for every sizing and spacing task. Make this easier by setting the nudge amount in Figma from 10px to 8px. This way, every time you will move or rise an object, it will be in increments of 8.
To do this, hold down the Shift + arrow key, and to adjust the nudge amount, navigate to Menu > Preferences > Nudge amount > 8.
3. Use the bar graph arc too
This tool is not that commonly known and it makes a minimalist Bar Graph arc and saves time to create arcs.
4. Manage base components
Use base components more efficiently by creating and managing components with multiple variants. Each variant will hold its individual nested base component overwritten to create a novel state. This makes bulk updates pretty easy and also ensures 100% consistency.
5. Use true/false logic
Use “true/false” or “on/off” label to switch between two distinct properties. This little trick will make switching variants quicker and closely match how different components work in the code.
6. Organise the grid or swap position
After selecting multiple objects in the table, click the grid icon in the corner to organise your design. This equalises all distances between objects, allowing you to drag and rearrange objects and adjust their spacing.
7. Edit spacing in bulk
Aligning various objects and adjusting the spacing just right can get quite tedious and time consuming. Figma’s “smart selection” and “tidy” features enable you to do just that in bulk.
With Figma, similar objects can be auto-arranged into a neat list or grid, bulk spaced, and reordered.
- To bulk edit spacing, select similar objects > select list/grid icon > drag spacing right, left, up or down.
- To swap the object placement, select similar objects > select the dot inside a single object > drag and drop it into a new location.
8. Rename multiple layers at once
It’s essential to keep your file organised with a defined naming structure and hierarchy for all the layers. This task is made a lot quicker with Figma’s ‘Rename Layers” model enabling you to rename layers in bulk. With this tool you ca rename each layer to be the same, have a number suffix, add a prefix to distinct names, or rename only part of the layers name.
To access the Rename Layers model, navigate to Right-click layer > choose “Rename”.
9. Organise your file pages
Sometimes looking for a specific design or master component can be pretty time-consuming and could lead to a lot of miscommunication and duplicity.
By organising your file pages you can make navigating and maintaining them quick and easy. Make sure that each page has a well-defined name for various design and documentation purposes.
10. Use keyboard shortcuts
Using keyboard shortcuts is much quicker than using a mouse. Almost every action can simply be initiated with a keyboard shortcut to make working in Figma seem much faster and efficient.
11. Use the scale tool
Keep your design pixel perfect with the help of a scale tool, simply select all the objects that you want to scale, then hold K on your keyboard and drag. With the scale tool all your artwork scales perfectly and maintains the propositions and you won’t need to re-work on the artwork.
12. CMD (CTRL) + to unlock the lock objects
CMD (CTRL) + / has many practical quick applications that can save you a lot of time in your workflow. If you are not using it, many experts that you check what is available on the menu. Unlock all items and change the font.CMD (CTRL) + / has many practical quick applications that can save you a lot of time in your workflow. If you are not using it, many experts that you check what is available on the menu. Unlock all items and change the font.
13. More time-spacing tricks with the spacebar
Drag the selection box and then hold down the spacebar to increase the size of the cursor selection. The space bar also has a lot more handy tips to save time. If you’re drawing a shape you can also reserve space to move the object as you draw.
Conclusion
Whether you are looking for design templates, icons, high-performance tools, a better way to manage design operations, responsive and chic designs, easy access to developer tools and a strong community, these Figma tools have it all.