Create interactive infographics in SharePoint Online

[@andrewamina]

That superscript tip 🤯 CLEVER

[@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 🤘😁

[@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! 😁

[@ashleylardy8449]

I love your videos! I have taken your master class for creating a site, and it helped me so much to create a site that is more interactive and user friendly. Keep making videos please!

[@liraspberry6966]

Not sure how I found you but I am so glad that I did. I have learned so much from your videos!! Thank you so much for sharing!! Just amazing!!

[@Academy365-Dan]

Thanks so much for commenting, I'm glad we found each other too 🥰 I really appreciate your comment!

[@MilicaLearning]

Super cool insights and very useful. One bit of a suggestion or impression it that it might be a tad bit too fast. Thank you so much for the video it is great!

[@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...

[@MariaTeresaPessoaGuerra]

Since the new figma update, the html codes are now different... Do you plan on doing an updated video on this?

[@emilyrybak1033]

When I’m embedding my figma prototype into Sharepoint, I am not seeing the Ddesign part. I still pasted the code at the end where it showed but it isn’t working. Is there a new way of doing it or did I do something wrong?

[@kirstink.1740]

I'm having the same issue

[@dustyarcher]

Great video and info buddy!Absolutely love it…Thank you!

[@Academy365-Dan]

Cheers! Really appreciate that! ✌️

[@luisgabrielarcilla3057]

This is awesome! Thanks for sharing

[@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

[@gracenwaka9994]

This is sooo good. Thank you!

[@abdullahabdulaziz807]

You are great! You deserve over millions of subscribers…. Keep going…. Our hero ❤

[@monicalindin1392]

This is great! Loved for the detailed walk-through in Figma. I did not know that I could use prototypes in SharePoint. Using markdown for images is a game changer, thanks for sharing your knowledge.❤

[@Academy365-Dan]

My pleasure 😁

[@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

[@zeeshanyshaikh]

markdown does not support png? i have image with transparent background but its displayed as white. Also extra white border visible around the section.

[@aimeewoodward2622]

What if I don't see the site settings and the HTML Field Security section? Is there a certain setting or permission needed?

[@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 👍

[@mamelaaa]

Great job! Many thanks for the tips.

[@maxsteel08]

Is this a communication site or a team site?

[@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.

[@Academy365-Dan]

That's strange. I'm not sure what the issue is without knowing more unfortunately. All I can say is that it works for me... (I am fully aware that is in no way helpful... I'm sorry! 😉)

[@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. 🤭

[@kirstenreid1723]

Exactly what I do too.

[@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?

[@princecudjoe5518]

Learning a lot from your content. Really

[@Academy365-Dan]

Excellent, that's really great to hear! 🙌

[@ellenragamat1731]

Hi thank you for this tutorial. It works! I just have one problem the sharepoint page when it’s loading the attached embed keep showing figma loading. How to hide this? Need help please.

[@Academy365-Dan]

Hey! I'm afraid you can't (or at least I've not figured that part out). It is certainly a compromise but hopefully the value of the prototype out weights the loading inconvenience!

[@markuskaeding]

I found it useful. thanks man

[@Mariano0918]

Amazing! Thank you for these videos

[@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!!

[@saltr2413]

This is excellent, and helps so much to elevate the boring SharePoint my company produced. Would Adobe XD work the same as Figma for your Approachs? I have access to XD and not Figma (Company IT restrictions).

[@Academy365-Dan]

Hey! Thanks for the kind words. Yes, XD will work the same for sure. I used to use XD myself! Very similar to Figma

[@anthonytur8762]

This is awesome

[@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!!

[@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!

[@a.thompson6367]

⭐⭐⭐⭐⭐