Login

Create Interactive Infographics in SharePoint Online

    If you’ve ever been handed a diagram or infographic and told, “Make this look cool on the intranet,” you’re not alone. In this post, I’ll walk you through three powerful, no-code ways to create interactive, engaging infographics in SharePoint Online, using nothing but built-in tools and a little creativity with Figma.

    Whether you're working with company strategy diagrams, visual workflows, or explainer graphics, these approaches will help you turn static content into engaging, interactive experiences.

    🔧 Approach 1: Use Images and Text (But Smarter)

    The most straightforward way to build infographic-style pages is to combine images and text blocks on your SharePoint page. But a few tricks can take this from boring to brilliant:

    🖼 Use Markdown for Decorative Images

    Instead of the default Image web part (which adds pop-ups), use the Markdown web part to place non-clickable images. Here's how:

    • Upload images to Site Assets > Images

    • Copy the image path

    • Use the Markdown web part to embed the image with ![](image-link)

    • Resize and align using white space within the image

    🔥UPDATE!

    While the Markdown approach works and is great, you can always use the 'Image' webpart for these images BUT, be sure to toggle the 'Mark as decorative' option to prevent the image from being clickable!

    🎨 Style Text for Maximum Engagement

    • Use custom theme colors (see the video on how to add brand colors)

    • Apply Heading styles with strong contrast and bolding

    • Combine symbols and emojis for icon-like text elements

    • Use superscript to align symbols with text perfectly

    💡 Pro tip: Use websites like copyandpastesymbols.net to grab stylish characters for lists and navigation.

    This method is quick, clean, and requires zero third-party tools.

    🔗 Approach 2: Make Images Clickable with Figma Prototypes

    Got an infographic you want to turn into a clickable navigation hub? This approach lets you do just that with Figma:

    🛠 Step-by-Step

    1. Open Figma, create a frame, and insert your image.

    2. Use rectangles with 1% opacity over areas you want clickable.

    3. In Prototype mode, set those shapes to "On Click > Open Link".

    4. Share the prototype and copy the embed code.

    5. In SharePoint:

      • Go to HTML Field Security and allow figma.com

      • Add an Embed web part and paste the code

      • Remove borders and captions for a cleaner look

    Now you have a fully clickable image that links to other pages or resources, turning any visual into a smart, intuitive site navigation tool.

    🧩 Approach 3: Build Fully Interactive Overlays (Figma Magic)

    Ready to wow your users? This final method takes your diagram and makes it truly immersive:

    💡 Example:

    Instead of clicking "Learn More" and navigating away, users click a button and get a slide-in overlay with custom content – all inside the same page.

    🔄 How It Works

    • Design a base frame (your infographic)

    • Create overlay frames for each clickable section

    • Use Figma's "Open Overlay" interaction on click

    • Embed as before using the Embed web part

    You can style overlays with images, text, number badges, and even drop shadows to create a smooth and modern feel. It’s like building a mini app inside your SharePoint page.

    ⚠️ Things to Keep in Mind

    • Figma cookies warning: Some users may see a cookie prompt when accessing embedded prototypes

    • Responsiveness: Use the "Fit to Width" option in Figma to optimize for various screen sizes

    • Image dimensions: Plan for a larger canvas (e.g., 2406px x 1627px) to ensure clarity and layout flexibility

    🎯 Final Thoughts

    These three approaches let you create interactive infographics in SharePoint Online without writing a single line of code. Whether you're using images and text, clickable diagrams, or full-blown overlays, the result is a site that's visually engaging and fun to use.

    With a bit of Figma magic and clever SharePoint techniques, you can:

    • Improve user engagement

    • Simplify content navigation

    • Deliver wow-factor experiences

    🎥 Watch the Full Walkthrough

    Each step is shown in detail in the video, including bonus tricks, tips, and my thoughts on when to use each method.