An Immersive D&D Experience Using Figma

Like many in 2020, I missed playing games with friends and I signed up to Roll20 to escape the world of Covid. With an experienced game master to explain complicated character sheets and the rather unintuitive user interface, everything went swimmingly; but when I started running games myself for my family there was the game began to ‘drag on’ (painful pun intented).

Now, I wouldn’t describe my family as luddites, but they certainly spend more time outdoors than stuck in a dark room with their faces glued to a computer monitor. Despite my best attempts, we were spending more time explaining what to click on than actually playing the game. So I set out on an adventure to find a more simple D&D platform (for players at least).

I’d been using Figma to draw character art and maps and there have been many great attempts at multiplayer games inside Figma. So I thought I’d give it shot for D&D -how hard could it be?

Unlike most games on Figma, which give all players edit access to the board, I was struck by Chris Harrion’s RPG Star Trek Adventure using a mixture of Prototype mode for less-experienced players and Edit mode for advanced players. This allows less the tech-savvy to scroll the map and open character sheets without affecting anyone else’s view, while the braver adventurers could jump in to edit mode and move their own tokens around.

But for my game, it needed a few extras, dice rolling, fog of war, a DM layer… and on my way to building thiese I discovered just how powerful Figma can be with beatiful interactive immersive animations and even sound effects.

Before you read any further note that this is not what Figma is built for, I have tested the limits of what’s possible and for those who wish to follow in my footsteps, beware here there be dragons….

Character Creation

MesoAmerican style Kenku -made in Figma

A good place to start if you’re familiarising yourself with Figma is building your character. Here’s a community file I shared with some characters I created in Figma:

This is where Figma’s variants can be really handy for quickly switching over to a fighting stance token without affecting any prototype links that are associated with this token. To do this in Roll20 involves uploading new tokens, resizing them, and then fiddling with the settings to link character sheets up with each.

I like to keep all my character components in libraries so I can stay organised and share them between projects. I can quickly drag in a monster from the library on the sidebar, just like in Roll20. Except in Figma, I have to create them all myself.

You can associate notes with your NPCs by adding a variant with a visible card full of handy info.

Tile-based Map Making

Hex tiles for RPG maps

Thanks to Figma’s powerful component and variants features tile-based maps are a breeze to make. But having made some myself, here’s what I learned the hard way:

After I was happy with my basic tile designs, I saved them as images rather than svgs, and use the images to make my components (because if you render hundreds of copies of complex svg tiles, it will crash your browser). Then I added a few custom svg tiles.

If you’re thinking of following in my footsteps, I’d recommend square tiles, rather than hex tiles. Figma has great support for alligning to a square grid and trying to get pixel perfect alignment of hexagons is a nightmare.

Here’s a link to my tile-based maps.

Making Maps Interactive

Figma is fantastic for maps; you can allow users to pan a map by enabling horizontal and vertical scrolling but it doesn’t support pinch to zoom for nested objects in prototypes. You can work around it by using multiple frames, linked by smart animate, but zooming in/out will always recentre the map. You do the same for map rotation, but this involves a copy of the frame per angle and per zoom level -it can rapidly get out of hand. Plus, if you have a complex svg based map then the animation could crash your browser.

Animated Lighting

Squirming monsters, lights that flicker, rivers that flow… Figma supports repeating key frame animations viewable in prototype mode. In the above example I used fireflies to guide my party onwards and set the tone.

In my game it was important that night falls on the players and they are immersed in darkness with shadows occluding key areas. I used a variant of the map for night time, but I didn’t want an instant transition and I wanted to activate it myself during the game. The solution: adding the prototype link during the game and setting it to activate after a 1ms delay with a slow smart animation, allowed to give a smooth transition to night whenever I wanted. The shadows on the trees disappeared, lights turned on in the buildings and the accompanying ‘ooh’s and ‘aaahs’s from the players made all the effort worth it.

One thing I have not cracked is getting player’s token to dynamically cast a shadow in the correct direction depending on the light source.

Dice Rolls

If you are playing in edit mode, then there are a few great plugins in the Figma Community, but I want my players to play in prototype view, where they can have a more seamless experience. This meant creating my own dice roller. True randomness is not acheivable in figma, but you can get close enough by cycling through frames every millisecond, feel free to duplicate mine; it’s available here:

Secret DM map overlay

Often you will want to add a secret overlay to your map with notes only viewable by the DM, reminding you about traps, ambushes and key plot points. At first I thought this was impossible but with a little help from components, it’s actually very easy.

First enclose your map and any tokens in a frame and make that frame a component. Then create a separate page for the DM, add a copy of the component to the page and lock it. Now feel free to add any notes and secrets on top of the map. The tokens’ locations will update in real time as you move them on the main component

Sound Effects

One feature of Roll20, I miss is the music and sound effects. I didn’t expect this would be possible in Figma, so thanks to Design Xstream for this hack.

Keyboard Shortcuts Galore

Why give players an annoying heads up display over their map, when you can provide them with keyboard shortcuts? You can create shortcuts by setting a prototype link to activate on keypress. I made ‘d’ roll a d20, and set the first letter of each player’s character to toggle their character sheet. This is a really powerful feature and something I plan to use a lot more.

Final Thoughts

The resulting game has proven very smooth for non-techie players, I simply start a video call (handled outside Figma) and send them a URL -no login required. Having players be able to roll dice and view character sheets without them having to switch tabs made their life easier too. But I do think the experience would be better if they could move their own tokens.

This was a lot of work, but also a lot of fun. I wouldn’t recommend it if you aren’t familiar with Figma because getting complex prototypes to work how you want can be tricky, but if you’re up for a challenge it can be really rewarding. I was particularly happy with the ability to do trigger animations and expand the map mid-game, which made the whole experience much more immersive.

If you have questions or suggestions, please get in touch.

East & West; Personal Finance; Corporate Governance; Tech; Gratitude Living

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store