Diagramming
Diagramming bridges the gap between ideation and implementation. It helps you get organized before you get going. While it might be tempting to skip this step, seeing everything laid out in a single place with connections and interactions can make the entire design process smoother.
To build a diagram in FigJam, drag in a few shapes from the toolbar, click the connector tool, and draw the connections between them. From there, customize your diagrams with different shapes, colors, strokes, and text. Once you have the hang of it, you can speed up the process by using the “+” icon to add more nodes with pre-built connectors.
Now that we’ve covered the basics, let’s dive into some specific use cases: sitemaps and user flows.
Sitemap diagrams
Sitemaps allow designers to think through the information architecture of a product at the highest level. This includes the priority and organization of your content, as well as the links that support user journeys (more on that below). A solid sitemap ensures that navigating your product is intuitive and that all of your content aligns with the product’s main goals.
Many designers are already familiar with building sitemaps, but what makes this process great in FigJam is that it’s built for collaboration. You can create sitemaps in real time alongside your product partners to investigate a new feature, think through high-level architecture, and map out specific feature interactions. Having your sitemaps so close to your designs has the added benefit of providing guidance as you develop your final screens in Figma. As your designs evolve, you can continue to update the sitemap diagram with your updates, linking specific Figma frames to nodes in your diagram. Alternatively, you can also export your sitemap as a JPG, PNG, or PDF to use in slides or documentation.
User flows
FigJam is also a great place to develop and test user flows, which map out the specific steps a user will take to navigate through your product. When building a new flow in FigJam, use shapes to represent individual product screens and connectors to represent user actions. You can further organize your diagram by color coding your shapes and connectors—like using color to indicate a screen’s depth in the site or a related feature. Similarly, you can use shapes to group your nodes and communicate their relationship with each other. Make sure you include a legend for your diagram to clarify what different colors and shapes signify.
After building out your diagram, you can also use FigJam’s text, stamps, and stickers to highlight specific parts of the user’s journey—for example, pain points, moments of success, or places where further design work is needed.
