Figma quickly established itself as the essential tool for our UI/UX work within the agency. Thanks to its functionalities, it enables us to collaborate in real time on the same document, present designs effectively to our customers and share them instantly with the development team. In this article, Stéphane, UX designer at Be API, shares his expert advice on how to make the most of Figma's features.
Whether you're a seasoned designer or a passionate beginner, these valuable tips will help you streamline your production process.
1. Create your own components efficiently
Avoid repetitive tasks and gain in productivity by creating your own components with this key combination: ⌥ + ⌘ + K. For maximum efficiency, you can select multiple elements and create several components simultaneously, or even create a set of components from the dedicated menu. By using this feature, you'll save precious time.
2. Optimize the use of component properties
To simplify the management of component instances and reduce the number of variants required, take full advantage of Figma's properties. For example:
- Use the Boolean property to hide certain elements
- Use Instance swap to replace instances of internal components with others.
- Use the Text property to easily modify specific text within your components.
By taking advantage of these properties, you can reduce the complexity of your project and save time when customizing your components.
3. Turn your component sets into autolayouts
It may seem simple at first glance, but it's a real pleasure not to have to adjust elements to the nearest pixel. A great trick is to use autolayout for your component sets. And the icing on the cake is autolayout's wrap ⤶ option, which automatically passes elements to the line if they exceed the available width.
By adopting this approach, you'll gain enormous flexibility when laying out your designs, while avoiding tedious adjustments.
4. Use the "Paste to replace" function
Say goodbye to the repetitive tasks of re-positioning and deleting items you want to replace, using the "Paste to Replace" function. Simply use the key combination ⇧ + ⌘ + R
This feature lets you copy a new element and paste it directly onto an existing one, instantly replacing it while preserving its positioning and properties.
5. Display contours for better visibility
Never lose your hidden elements in Figma again. Simply press ⇧ + O to display the outlines of all elements, even (and especially!) those that are hidden. This handy trick will enable you to clearly visualize the layout of your elements and work more efficiently.
6. Organize your styles for easier management
Make it easy to manage your styles by using the "/" symbol in their names, to group them into semantic groups. For example, you can use names such as:
- "border/text/background for color styles
- "title/paragraph/label" for text styles
- "state/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.
Keyboard shortcuts are really Figma's cheat code: they allow you to achieve "pixel perfection" by spending less time in the menus.
Stéphane Godel, UX designer
7. Work from a Design System
Let's face it: starting from a blank page isn't always very inspiring. It's better to work with a guide, to benefit from pre-established best practices.
At Be API, we work with a UX template kit specially designed for Gutenberg designers.We 've made it available as open source on Figma, so don't hesitate to get it for your next WordPress project.
8. Copy a PNG for quick sharing
Need to quickly share an item? You can simply copy the image using the shortcut ⇧ + ⌘ + C, then paste it into your messengers or presentations. This lets you share it quickly, without having to export it first.
9. Share a link to a specific frame
When sharing a Figma link, it's best to share direct access to the specific item you're interested in. To do this, select the element, right-click and choose "Copy link" from the context menu. You can also paste a link onto text, which is particularly useful for creating quick-access links within a document.
10. Perform your calculations directly in Figma
You no longer need a calculator to determine exact dimensions or spacings in Figma. The tool lets you 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 classic operations such as +, -, /, *, as well as parentheses.
We hope these tips will help you boost your productivity and unleash your creativity. If you have any others in store, please don't hesitate to share them in return.
