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

First try: 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 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!