⚡️ What is an Excalidraw?

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

🤔 Why Excalidraw?

Using this tool we can make very handwritten like:-

• Graphs
• Diagrams
• Text

Suppose you want to explain some project/topic, Instead of writing code and text-only you can use pictures because 'A picture is worth a thousand words.'

See the example of the Excalidraw drawing.

There are many tools available for drawing but Excalidraw is one of the best tools.

🎨 Basic Shapes:-

We can draw basic shapes like rectangles, Diamond, Ellipse, Arrows, and Lines.

✍️ Freehand drawing:-

We can also draw handwriting using Excalidraw.

💾 Exporting and Sharing:-

This is a pretty important and basic feature for any drawing tool - the ability to export and download the drawing you drew.

📂 Exporting and Importing full scene in Excalidraw format:-

Apart from saving it as a simple image, we can also export it in Excalidraw’s format which we can use again.

📚 Excalidraw Libraries:-

Excaldiraw has many libraries that we can use in our project.

Link to libraries :- Excalidraw Libraries

⭐️ Let's use the Excalidraw drawing in Figma .

We will take the following example that is designed in Figma.

We will go step by step :-

Step 1

After making our drawing in Excalidraw, we will import the drawing.

How to export Drawing? First, select the drawing, then go to save the image as seen in the example attached below 👇

Step 2

After clicking on the save image icon one pop-up window will appear. See the below image for easy reference 👇

We have many options in this pop-up window.

• 1x, 2x and 3x:- These are scales of quality. where 3x has more quality of image than 1x and 2x.
• Background:- It means that If we want to include background color in the image that we are exporting.
• Only Selected:- As the name is suggesting exporting the selected part.
• PNG, SVG and Copy to clipboard:- We have three options i.e we can download the drawing in PNG or SVG format and we can also copy it to the clipboard.

Note - copy to clipboard option is showing in google chrome but not in Mozilla Firefox Edition.

• Embed Scene:-The scene is exported with the Excalidraw file which can be used directly in Excalidraw to edit the scene.

In our example, We have chosen 2x, Background - Uncheck, Only Selected - Check, Embed Scene - unchecked, and selected Copy to Clipboard.

Step 3

Open your design tool. In our case, we are going to use Figma.

Steps in Figma:-

• Select a new file or use an already existing file. In our case, we are using a new file.

• Select a frame of any size, In our example, we will choose a 1024 X 512 size frame.

• Now paste the part that we have copied from Excalidraw.

• Adjust the Image from Excalidraw in Figma so that it fits well inside the frame.

• Now we can export that image from Figma 🎉.

Note:- We can also use Canva to edit(resize, crop) the Excalidraw drawing.

That's all about this article.😀

If you enjoyed this article and want to see more content about development, design, creativity, and learning, then follow me on

• Hashnode
• Twitter
• See my work at Codepen
• Github

If you'd like to support me to make more content, check out my BuyMeACoffee page.