UX Designers! If you work on Figma today i got you 5 of the best Figma tips that can help you increase you productivity.

In this article, I’m going to share five tricks of using Figma, which are very useful in design process. They are so underrated that not everyone is talking about them. Make sure to bookmark this page and for future reference, lets dive into it.

Best way of adding image from web to Figma –

The first trick is about how we can paste images and assets from any website on the internet into our design file.

In the past I used to download those images and then drag and drop them into my design file, or clicking on Shape tool drop down and place image/video.

Better option –

But now, the only thing we need to do is just open the website that we would like to select some images from inside the browser, right-click on the images that we would like to add in the design file, and copy them. Then, we get back to the Figma file and use the combination key Control V or Command V to paste those images into our design file directly.

A better way is to use the inspection mode of the browser, switch to the networking tab, and then refresh the page to have the list of all the assets in the website. Then, we can filter all the assets based on the format of the file, such as image in this case, and then we will have access to the list of all the images inside the website. I can open up the one that I would like to have in my design file, copy them, and then paste them inside the Figma file. This trick also works for other formats of files, such as video or SVG. This will save a lot of time for you.

Convert web page to editable Figma

If you like a particular element from a website or simply want full page for design purpose. Sometimes, you want to do a redesign clients website, or just to take the inspiration.

You can use inspection mode of the browser to extract all the details of the elements and then remake them inside the Figma, which is a bit long and tiring process.

Better option –

But now, I’m going to show you a better way. We can import the whole HTML page from the internet inside our design file using the HTML to Figma plugin. It’s very easy to use. Just open up the plugin, enter the URL of the webpage that you would like to have in your Figma file, then you can play a little bit with the settings and properties that exist inside this plugin, and then click on import. In less than a few seconds, you will have the whole design of that page inside the Figma file.

collaborating in Figma

When it comes to collaborating with different designers in one design file, Figma has many different features that make it one of the best collaborative design tools in the market.

I’m going to share three ways to communicate with your teammates inside Figma.

Commenting

The first way is commenting. You can use the shortcut key “C” on your keyboard to open comments panel, now you can click anywhere in the canvas, and then leave a comment for your teammates. You can mention them even in your comment, which will help the teammate to get access to those comments easier. In the filter panel, you have some other extra features like filtering and sorting your comments. This will make it easy for designers to find spacific comment easily.

Voice Chat in figma

The second way to communicate with your teammate in Figma is to use the voice chat. There’s this headphone icon in the toolbar next to the avatars of the users. Whenever you click on that, you will activate the voice chat room. The other users also can activate this feature, and then all the users can be able to talk and communicate with each other via voice, which is very cool. You can collaborate with the other teammates in a dynamic way.

Cursor chats

The last and coolest way to send a message to your teammate in the Figma file is that you use the cursor chat. Cursor chats are basically the chat bubbles that are appearing next to your cursor, and then you can write down some messages, which has a limited character but is still enough to send some message to your teammate.

You can right-click on your canvas and then activate the cursor chat, and then type your message.

Or you can click two times on the slash key of the keyboard. It’s a very nice way to send a message to your teammate.

Sometimes, we need to resize some element and component or a part of a design in our file. But in my personal experience, whenever I want to do this process using the move tool, due to the complexity of the layout and the design, I usually break the component. Some properties are not going to scale up using the move tool, such as the size of the text or when you use the auto layout, the spacing, and everything else are not going to be affected. So the results will be really messy.

However, there is another tool in the toolbar, the scale tool. You can scale all the elements without taking care of the details of that component or element. Even in the properties panel, you can accurately say how bigger or smaller you want to make the element that you selected. It’s very useful when you want to scale the element and component without taking care of the details.

Access file history in Figma

Every designers have this habit to save our files after any change that we are doing. This constant fear of loosing aur progress force us to press Crl + S after every small change we do in the file. But doing this, we loose project history. So we actually overwrite our current state on the previous one, and we lose all the file history. But Figma is saving all the history of our work.

We can click this arrow next to the name of the file, then open this menu, and from that, you can click on history. Then you will open the history panel in the right side. You can create your own checkpoint or the version of the file by just clicking on that plus button. And you can also switch between different versions just by clicking on the version name, which is very handy when it comes to having the complex design system and design file.

Conclusion

These were the five features and tricks that I wanted to share with you . Personally, I’m using these features a lot in my work process, and I believe it can have some impact on your process as well. If you liked this blog make sure you bookmark this for your future reference.

Share this on LinkedIn and tag me!