Figma quickly became the essential tool for our UI/UX work within the agency. Thanks to its features, it allows us to collaborate in real time on the same document, to effectively present the designs to our customers and to share them instantly with the development team. In this article, Stéphane, UX designer at Be API, shares his expert advice to fully exploit the features offered by Figma.
Whether you're an experienced designer or a passionate beginner, these valuable tips will help you smooth your production process.
1. Create your own components efficiently
Avoid repetitive tasks and gain productivity by creating your own components with this combination of keys: + + + + K. For maximum efficiency, you can select multiple items and create multiple components simultaneously, or even create a set of components from the dedicated menu. Using this feature will save you valuable time.
2. Optimize the use of component properties
To simplify the management of component instances and reduce the number of variants required, fully exploit Figma's properties. For example:
- Use the property Boolean to hide certain elements
- Use the feature Swap instance to replace instances of internal components with others.
- Use the property Text to easily modify a specific text within your components.
By taking advantage of these properties, you reduce the complexity of your project and save time when customizing your components.
3. Turn your component sets into autolayout
This may seem simple at first glance, but it's a real pleasure not to have to adjust the elements to the pixel. A great tip is to use autolayout for your component sets. And the cherry on the cake is the option wrap from the autolayout, which allows the elements to pass automatically to the line if they exceed the available width.
By adopting this approach, you'll gain a lot of flexibility when designing your designs, while avoiding tedious adjustments.
4. Use the function « Paste to replace »
Say goodbye to the repetitive tasks of repositioning and deleting items you want to replace, using the function « Paste to replace ». Just use the key combination ⇧ + ⌘ + R
This feature allows you to copy a new element and paste it directly onto an existing element, instantly replacing it while preserving its positioning and properties.
5. Display contours for better visibility
Don't lose your hidden items in Figma anymore. Just press + O to display the contours of all elements, even (and especially!) those that are hidden. This practical trick will allow you to clearly visualize the layout of your elements and work more effectively.
6. Organize your styles for simplified management
Facilitate the management of your styles using the symbol « / » in their names, to group them into semantic groups. For example, you can use names such as:
- « border/text/background » for colour styles
- « title/paragraph/label » for text styles
- « Status/elevation » for effect styles
In addition, you can select several styles and group them together using the shortcut + G. This technique will allow you to associate your styles according to their use.
The keyboard shortcuts are really Figma's cheatcode: it makes it possible to make « perfect pixel » spending less time in the menus.
Stéphane Godel, UX designer
7. Work from a Design System
Let's say: starting from a white page is not always very inspiring. Better to be accompanied by a guide, to benefit from pre-established good practices.
At Be API, we work from a UX template kit, specially designed for designers on Gutenberg. This tool allows us tooptimize our design phase Every day. We gave it back. available in open source on Figma, so don't hesitate to get it for your next WordPress projects.
8. Copy a PNG for quick sharing
Need to quickly share an item? You can just copy the image using the shortcut C, then paste it into your emails or presentations. This allows you to share it quickly, without having to export beforehand.
9. Share a link to a specific frame
When sharing a Figma link, the ideal is to share direct access to the specific element that interests you. To do this, select the item, right click, then choose « Copy Link » in the context menu. You can also paste a link to a text, which is particularly convenient to create quick access links within a document.
10. Perform your calculations directly in Figma
No need for calculator to determine exact dimensions or spacings in Figma. The tool allows you to perform these calculations directly in the dimension field. For example, you can add « +42 » to your current dimensions or divide them into four directly. Figma supports conventional operations such as +, -, /, *and parentheses.
It is hoped that these tips will help you boost your productivity and free your creativity. If you have more in reserve, don't hesitate to share them in return.
