Skip to main content

Explore new horizons with a hero’s journey template

Place your users at the center of the action to understand their needs, then come to their rescue with more strategic planning tools from FigJam.

hero's journey diagram examplehero's journey diagram example

Hero’s journey template

Gather your fellow adventurers together before setting out on this editable hero’s journey map.

Every journey starts with a map

Whether you’re in a classroom or boardroom, the hero’s journey template allows you to pave the path and explore the actions of the main character through plot points, character development, and overall story structure.

Chart the course: Draw out your users’ paths from the call to adventure to their eventual return home—all in one clear, understandable diagram.

Tell their story: Use narrative strategies to bring your customers’ experiences to life.

See them through: Harness an established framework to create or explain a character’s arc in a story—fictional or otherwise.

section of a hero's journey diagram with the label "the ordinary world"section of a hero's journey diagram with the label "the ordinary world"
section of a hero's journey diagram with the upside down label "the special world"section of a hero's journey diagram with the upside down label "the special world"

Go from zero to hero

Become the hero of your group when you introduce them to FigJam’s interactive whiteboard features. Start with a blank hero’s journey template, then use existing icons and original drawings to tailor it to your needs. Ask for Anonymous Thoughts, leave Lil’ Notes to return to later, and Vote on your user’s next move.

Save the day with diagrams

Outline the entire user experience as a single epic saga and gain easy-to-implement insights. Next, browse more tools and templates to make your quest a breeze.


As a big-picture structure, the hero’s journey has three major story structures:

First, there’s the departure. In the beginning, the hero is no hero at all; they live a regular life in an ordinary world and can be a multitude of character archetypes. Soon, however, that world changes forever when they answer the call to adventure.

The second act is the initiation. These are the trials and tribulations the hero ventures through and must face—the tests of strength, the daring battles, the unknown territory, and, finally, the reward.

Finally, there’s the return. The hero heads for home—but not before one final test that symbolizes rebirth. Finally, the hero returns to their original world, though they are far from the person they were in the beginning.

These three “acts” are divided into 12 steps.

The hero’s journey steps are as follows:

1. The ordinary world

2. The call to adventure

3. The initial refusal of the call

4. Meeting the mentor

5. Crossing the threshold

6. Tests, allies, and enemies

7. Approaching the inevitable

8. The supreme ordeal

9. The reward

10. The road home

11. The resurrection

12. The return with the elixir

To create your own hero’s journey, start with a customizable FigJam template. Once you have your blank canvas, begin by briefly describing the hero. From there, all you have to do is fill out each step of the journey by thinking about which action or obstacle the hero takes throughout the “story.”

Remember that you can apply the hero’s journey outline to any scenario. Although the framework was initially developed to show similarities between fictional stories, it can also be used to explore how a user interacts with a product, website, virtual experience, and beyond.

Other templates you might like

Explore 1,000+ templates on the Figma community

Explore even more templates, widgets, and plugins—all built by the Figma community.

Figma communityFigma community