What is an Excalidraw? How to use the Excalidraw drawing in Figma?

What is an Excalidraw? How to use the Excalidraw drawing in Figma?

We will discuss it by taking examples.

ยท

3 min read

โšก๏ธ 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.

Excildraw_charts.png

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.

Screenshot 2022-06-29 at 9.06.03 PM.png

โœ๏ธ Freehand drawing:-

We can also draw handwriting using Excalidraw.

Screenshot 2022-06-29 at 9.07.10 PM.png

๐Ÿ’พ 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.

Screenshot 2022-06-29 at 9.07.56 PM.png

๐Ÿ“‚ 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.

Window editing4.png 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 ๐Ÿ‘‡

Screenshot 2022-06-27 at 10.33.05 PM.png

Step 2

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

Screenshot 2022-06-27 at 10.38.46 PM.png

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.

1.png

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

2.png

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

3.png

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

4.png

  • Now we can export that image from Figma ๐ŸŽ‰.

5.png

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

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

bmc-button-small.png

Did you find this article valuable?

Support Tejinder Sharma by becoming a sponsor. Any amount is appreciated!

ย