Using Figma for Online Dungeons and Dragons

I recently started dungeon mastering for a group. we tried to video chat but being spread across the world; video isn't great all the time, so we started looking for different solutions

Google Sheets

while it was functional, it was hard to find good colors to represent the players and enemies and got confusing.

I'm the pink one

Figma

is a free, easy to use vector editing tool in the browser.

Figma has a built-in layout grid system so you can overlay it on top of your dnd map for the distance the free dnd maps I used are here

The grid lines work for you but they don't work for people viewing an embed. There is a great Figma plugin called Layout Grid Visualiser that creates a copy of your grid as a layer and boom, you have a great grid.

To allow people to call out the number I used a mono spaces font and set the spacing to 60% so one character per square.

People can then say Pink A Green 1 or PAG1

this looks great but I didn't want everyone to have to sign up and they could see all the maps and layers for the campaign and spoil it for themselves;

Sidenote: I also made some hero markers using just a circle and clipping mask. Artwork by E.M. Engel's

Glitch

this web app lets you whip up experiments of HTML and js so I made a very basic landing page.

I added links to an HTML page with full-screen single Figma embed limited to 1 frame.

Now I can plan out all my maps in secret for the campaign, list them on the page and hide and show them when needed!

When I move a character on the embed figma, it will move in real-time without video streaming.

Finally, for voice, we are using discord but you could use anything, you could even just type it!