Create interactive infographics in SharePoint Online

In this video, we will look at 3 approaches to displaying infographic or diagrams within SharePoint Online sites (that I bet nobody else does!) 😁🔥
In approach ❶, we look at how we look at how we can use some of the most basic web parts to present our content in an engaging manner and I share my top tips for images and text. 🎯
In approach ❷ we look at how you can create clickable images so that you can use your graphics as a new for of interactive navigation. 🪧
In approach ❸ we go all out and build a totally immersive user experience using Figma prototypes! 🤘👊
Each approach is walked through step by step so follow along and create some SharePoint Online magic! 🪄
✅ Video Chapters
00:00 Video Introduction
00:24 Approach 1,2,3 overview
02:05 Approach 1
03:06 How to add images using the markdown web part in SharePoint Online
06:18 Tips for formatting text in SharePoint Online
10:00 Approach 2
11:40 How to create clickable images in SharePoint Online and Figma
15:10 How to embed Figma prototypes within SharePoint Online sites
18:58 Approach 3
20:00 Step by step Figma prototype build
🎓 Intranet Site Builders Master Class here: www.academy365.io/course/shar...
🎉🎉🎉 Use coupon code FLASH25 for 25% off (limited availability) 😁 Just enter at the checkout!

[@andrewamina]

That superscript tip 🤯 CLEVER

[@mamelaaa]

Great job! Many thanks for the tips.

[@squareggs]

Finally indeed, so many use cases for interactive images, great insight and examples thank you 🤩

[@Academy365-Dan]

Hello again! 👋 Thanks so much for the kind words 🤘😁

[@Mariano0918]

Amazing! Thank you for these videos

[@gracenwaka9994]

This is sooo good. Thank you!

[@luisgabrielarcilla3057]

This is awesome! Thanks for sharing

[@markuskaeding]

I found it useful. thanks man

[@anthonytur8762]

This is awesome

[@mensrea2686]

Absolutely awesome stuff 👍 quick tip for removing the "Add caption" instead of the dash, type ALT + 255, supposedly it should give you an invisible character 😁 works for files and folders

[@Academy365-Dan]

Awesome! Super tip ❤️

[@a.thompson6367]

OH MY LORD IT WORKED Thank you!!

[@Sabine-lg6jv]

Great tutorial, as always! I'm fairly new to Sharepoint and am already a fan of your tips and tricks. I use the image web part and mark the image as decorative. That way, users can't interact with it, but it gives me the flexibility of resizing and aligning it the way I want. 🤭

[@dinamichel711]

Hey, great video and tips - as usual. ;-) I love the Prince Love Symbol. 👍👍 ... but cannot find it 😱😱

[@Academy365-Dan]

Haha, I cheated on that one I must say. I created that icon myself in Figma as I was trying to create a visual for 'Symbol' to put in the video. That was the first thing that came to mind! Would love to see it as an actual emoji/symbol myself!

[@chrisundery6132]

Only 9 mins in and great already. Always wondered what those markup web part was. Love the innovative use of sharepoint. Will definitely be trying it out. What width was the image you created for the arrows?

[@Academy365-Dan]

Hey, really glad you liked the video. The dimensions of the image I created was W:958 H:140. I know that's quite large for the space but I wanted to make sure it rendered crisp! 😁

[@andrewgaskell105]

The main issue with this approach is that you are embedding content from a third party. Is there any way to export the prototype and host the assets on the sp site itself?

[@Rapoygalebra]

True! And also I have tried and creates a small delay while SharePoint charge the connection with the third party it doesn’t takes a lot of time but you can noticed and in my opinion doesn’t looks good.

[@andrewgaskell105]

​@@Rapoygalebrahave you tried exporting the assets from figma and then hosting in o365 or CDN? I have no idea if this is possible but I was going to do a simple poc on Monday to check. If not possible then this approach is a non starter.

[@philippvanderheide7494]

thats is whats bothering me too - thanks for this comment :) - will also try around to get this away from the 3rd party.

[@FaaBioo972]

For approach 2 : There is no need of using a third party to make an *imagemap*... it's a standard html component. There are a lot of Imagemap Makers online that give you the html code for the picture you put on your sharepoint site. really no need of Figma to do this and you picture and your code stay inside your sharepoint site 😊 Maybe you could use the Figma code and Just change the picture URL...

[@riaanthiart1173]

Excellent! Do you think one can create the Figma experience in Canva?

[@Academy365-Dan]

Now, there's a question. To be honest, I've never used Canva before! I'll look into it though 👍

[@TheMarcstamper]

Some great ideas here - thanks! only issue I have is that it doesn't seem to be possible to modify the image size when using the markdown webpart, the standard markdown syntax for image sizing doesn't seem to be implemented.

[@Academy365-Dan]

Hey, yes you are spot on there. You need to create the image to suit where you will place it. That's why in my example, my icon was quite small but I made the image wider with a white background to ensure proportion within the section

[@GH-yk6zd]

In my case the links work when using the preview feature in the online editor but when I embed the graphic to a sp page or an embed code testing website I can’t click on anything.

[@a.thompson6367]

⭐⭐⭐⭐⭐

[@AscellaSphynx]

Live this! I cnat use Figma at work. Do you know if I could design a similar prototype in Adobe XD and embed on Shareapoint? That will be my bext big project. 😊

[@Academy365-Dan]

Hey! Sorry for the delay. Yep , works perfect with adobe xd prototypes 😁 Be sure to add 'xd.adobe.com' to the 'Allow s from this domain:' located within 'Site Settings>HTML Field Security'. Good luck with the project!!

[@elitetech533]

how did you get the letters in the site name to look like that?? LOVE it

[@Academy365-Dan]

Thank you very much! That site title is an image. When you go to the 'Change the look' settings, then 'Header, you have the option to upload a 'Site Logo'. That's all I did. If you upload a site logo which contains the site name, you can toggle the 'Hide site title' option ;-)

[@kkatara209]

@@Academy365-Dan When I do it, I get a small image next to the navigation pages. Can you tell me how to do that?

[@mohamedSuhan]

is there a way to add a GIF to markdown?

[@Academy365-Dan]

You can add gifs the same way you add images with the markdown web part. Should work the exact same way