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.❤
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?
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! 😁
markdown does not support png? i have image with transparent background but its displayed as white. Also extra white border visible around the section.
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?
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.
@@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.
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...
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
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!
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).
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.
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!
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. 🤭
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. 😊
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!!
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.
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! 😉)
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.
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
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!
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 ;-)
That superscript tip 🤯 CLEVER
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.❤
My pleasure 😁
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?
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! 😁
markdown does not support png? i have image with transparent background but its displayed as white. Also extra white border visible around the section.
What if I don't see the site settings and the HTML Field Security section? Is there a certain setting or permission needed?
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?
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.
@@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.
thats is whats bothering me too - thanks for this comment :) - will also try around to get this away from the 3rd party.
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...
You are great!
You deserve over millions of subscribers….
Keep going…. Our hero ❤
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!!
Thanks so much for commenting, I'm glad we found each other too 🥰 I really appreciate your comment!
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
Awesome! Super tip ❤️
OH MY LORD IT WORKED Thank you!!
Great video and info buddy!Absolutely love it…Thank you!
Cheers! Really appreciate that! ✌️
Excellent! Do you think one can create the Figma experience in Canva?
Now, there's a question. To be honest, I've never used Canva before! I'll look into it though 👍
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!
Finally indeed, so many use cases for interactive images, great insight and examples thank you 🤩
Hello again! 👋 Thanks so much for the kind words 🤘😁
is there a way to add a GIF to markdown?
You can add gifs the same way you add images with the markdown web part. Should work the exact same way
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).
Hey! Thanks for the kind words. Yes, XD will work the same for sure. I used to use XD myself! Very similar to Figma
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.
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!
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. 🤭
Exactly what I do too.
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. 😊
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!!
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.
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! 😉)
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.
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
Hey, great video and tips - as usual. ;-) I love the Prince Love Symbol. 👍👍 ... but cannot find it 😱😱
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!
Amazing! Thank you for these videos
Great job! Many thanks for the tips.
This is awesome! Thanks for sharing
I found it useful. thanks man
This is sooo good. Thank you!
Learning a lot from your content. Really
Excellent, that's really great to hear! 🙌
⭐⭐⭐⭐⭐
This is awesome
how did you get the letters in the site name to look like that?? LOVE it
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 ;-)
@@Academy365-Dan When I do it, I get a small image next to the navigation pages. Can you tell me how to do that?