I recently started dungeon mastering for a group. we tried to video but being spread across the world; video isn't great all the time so we started looking for different solutions
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
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
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.
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 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!