How to use FigJam to make diagrams

Video transcription

Hey everyone. I'm Wayne, one of the product marketers at Figma. I'll be going over how you can use FigJam to make diagrams and map out user flows. You can either start making diagrams from scratch or you can browse through the Figma community and use one of the templates published here, like this one (Flow Chart Primers).

Shapes

Here, we've laid out a basic checkout flow with a couple of simple wireframe screens (these were copied over from the Figma file). When you're in a FigJam file, you can select and add a shape from the toolbar or you can use the shortcuts “O” for a circle or “R” for a square. Once you've added it your flow chart template, you can add text, you can change the size, you can swap between different shapes and different colors and even make adjustments to the fill.

Connectors

As you're mapping out a flow, if you hover over your shape, you'll see these plus buttons. If you click on them, you'll add a new shape that's automatically joined, even if you move it around. These connector lines are adjustable, so I can change the color of it, make it a thinner line or a thicker line and even make it a dotted line. If I want, I can also edit the end points and add an arrow, and I can move it around with these sliders. If I click on this text button, or I double click on the line, I can add a label and I can have a background if I want. You can also add connectors by pressing “shift+C” together or by pressing the icon at the bottom of the screen.

Once you've picked between using an arrow or a straight line, you can join two objects together. The way you do that is by hovering over one of these four points, pressing on it and dragging it over to another object and you can connect it at any of these other four points. These connectors can also attach to other objects on your board like these wireframes that I've copied over from the Figma file.

Copying and pasting between FigJam and Figma

Once you've created your diagram in FigJam, you can actually copy it over and paste it into a Figma file. This is really helpful if you need to reference a flowchart or a diagram as you're building out a prototype like this one down here. One thing that I found is super helpful, is that you're actually able to retain the ability to make edits to your diagram even once it's copied over and pasted into a Figma file. You can even make adjustments to the color and change the text.

Copying and pasting works both ways between FigJam and Figma. So, if I don't want people to make edits to these texts I can actually lock it and, once I've copied it over and pasted it into the FigJam file, I won't be able to make edits to this unless I unlock it. Because it's in FigJam, my team can share feedback by adding a sticky note and leaving feedback and annotating the file with the marker tool.

Other examples

I've also included some examples of other charts and diagrams that can be made in FigJam. These were made by my colleague Tom and they use the same connector lines and arrows that I just showed you. With FigJam you can quickly create diagrams that look great and are really easy to understand. So, try it out with your team, create user flows, map out systems, diagram processes and let us know what you think.