Create interactive infographics in SharePoint Online

Introduction

This tutorial will guide you through creating interactive infographics in SharePoint Online using three unique approaches. Whether you want to present content engagingly, create clickable images for navigation, or build immersive experiences with Figma prototypes, this step-by-step guide will help you achieve that.

Step 1: Using Basic Web Parts for Engaging Content

To start displaying your infographic content, leverage SharePoint's basic web parts effectively.

Adding Images

1. Access your SharePoint Online site.
2. Edit the page where you want to add your infographic.
3. Add a web part by clicking the "+" icon.
4. Select the Image web part to upload or select images from your library.

Formatting Text

• Use the Text web part to add descriptions or titles.
• Keep text concise and relevant to the images.
• Use formatting options like headings, bullet points, and links to enhance readability.

Tips for Images and Text

• Choose high-quality images that are relevant to your content.
• Maintain a consistent style in colors and fonts to ensure a cohesive look.
• Preview your changes to see how they appear on the page.

Step 2: Creating Clickable Images

Enhance user navigation by creating clickable images that link to other pages or resources.

Steps to Create Clickable Images

1. Insert an Image web part as described in Step 1.
2. Click on the image to reveal the settings.
3. Add a link to the image:
   • Select the image, then click the link icon.
   • Enter the URL of the page you want the image to link to.
4. Save and publish your changes.

Practical Advice

• Use images that clearly indicate their purpose or destination.
• Test the links after publishing to ensure they work correctly.

Step 3: Embedding Figma Prototypes

For a more advanced approach, you can embed Figma prototypes directly into your SharePoint site.

Steps to Embed Figma Prototypes

1. Create your prototype in Figma.
2. Copy the embed code from Figma:
   • Go to the prototype tab and click on the "Share" button.
   • Select "Embed" and copy the provided code.
3. Return to SharePoint Online.
4. Edit the page and add a new web part.
5. Select the Embed web part and paste the Figma embed code.
6. Adjust the size and position as needed.

Common Pitfalls to Avoid

• Ensure your Figma prototype is public or accessible to users who will view it.
• Test the embedded prototype to confirm it functions as intended.

Conclusion

In this tutorial, you learned three effective methods to create interactive infographics in SharePoint Online. By using basic web parts creatively, making images clickable for navigation, and embedding Figma prototypes, you can enhance engagement on your SharePoint sites. As next steps, consider exploring more customization options or integrating other tools to further enrich your infographics. Happy creating!