IMPORTANT UPDATE - Figma released Embed Kit 2.0 and the previous string of %26hide-ui%3D1 no longer works. To hide the figma footer in your prototype you need to use the new string &hide-ui=true
This is wonderful! I'm learning two things at once! Which I need. Any chance you could show a "how to create website looking SharePoint sites through CSS” targeting an audience that's never used CSS? Another golden opportunity for a 2 in one. For example, I was trying to figure out how to shade or fill in the background of certain web parts with a solid color to make the site match and couldn't. I was trying to make the different buttons of a quick links web part different colors and couldn't because the developer inspect tool doesn't seem to work on those buttons...etc. would LOVE a great video on such things ❤️
Really interesting, and a fantastic walk through of creating content in Figma 🤩 I won’t be able to implement it at work but having the interactivity for work flow diagrams would be amazing in SP pages. PS the short movie clips in between made me chuckle, nice touch.
Hey there (should I call you square or eggs?! 😉) thanks! lol, I had a few chuckles myself coming up with them. It actually made the editing of the video much more enjoyable!
This is amazing!!! I spent hours learning Sharepoint Framework and this is so much faster. I do have a question! I have "Add a caption" at the bottom of each of these Figma webparts once they're loaded to Sharepoint - how do I get rid of that or is it only visible on admin side?
Thank you-it's fantastic! Many thanks!!! The only thing I can't figure out is how to hide the Figma information; the amendment code %26hide-ui%3D1 you shared doesn't help. Do you have any suggestions?
Thank you for rthis video it helped me allot. But I still faceing one problem, I would like if the links that the buttom leeds to opens up in the same window and not a new one. Can you help me please?
Hey, really glad this video has helped you! I cover this point in my latest video, here is the time stamp: ua-cam.com/video/8KbvtfLj1-w/v-deo.htmlsi=VkStB5tOw7aOlkGq&t=821
Hi thank you for this tutorial. It works! I just have one problem the sharepoint page when it’s loading the attached embed keep ahowing figma loading. How to hode this? Need help please.
Nice video and great concept. Have been looking for a way to get more interaction into pages. Not sure it will be viable at work but really innovative. May have a go at a POC thiugh as we do have a paid version of figma at work. Would love a vid on how you ucreated the process one in figma
Cheers Chris, very much appreciated. Yea it's one of those things where putting it in a very high profile may be difficult swing with but I can see it being used within Team sites etc which have a smaller targeted audience where a complex process or infographic could really come to life. I'll record a video on the process one and a few more examples. Once you get the basics of Figma prototyping down, a lot of possibilities open up. I'm a big fan. I can't remember the last time I used PowerPoint, I now create most presentations etc. in Figma (but that's potentially a separate video in itself!) ;-)
Awesome Content! How can I cut off the background from figma? Where did you find this type of content? I mean the tricky about the hide UI functionallity.
Hi Rick, the quick links web part has a 'tiles' layout option but it looks quite different to the hero version of a tiled layout. The Hero web part is quite unique in terms of it's layout. The news webpart has a 'hero' layout but that wouldn't be much benefit over using the actual Hero web part
Hey Patrick! Yes, I can, I'm thinking of creating a few shorter videos (these 30-minute-plus videos do take a while to string together). This one would be a perfect candidate! Great shout ;-)
Hey, thanks for the feedback! I include music as my voice on its own tends to drive me crazy! ;-) I'll look to change it up in the next video and perhaps make the background music more subtle. I need to find the Goldilocks zone with this!
Hey Carolee, In this example, the resulting web part is not responsive however, Figma prototypes can be made responsive (they are extremely capable in this regard). There are some great tutorial videos out there which cover responsive prototypes extensively. But, this specific video was more about letting people know it's a road which can be explored.
Thanks for the video!!! Can we add the embed and delete the white margins / paddings in the side to make it look full width? To be able to create full width banners with quick links and stuff!
Hi Carlos, I don't believe you can using the embed method. The web part is constrained to the standard 'Page model' and 'full-width' sections don't support the embed web part
Once again you've impressed me with your creative SPO workarounds aka hacks... after someone decided to polish this ancient tech turd and threw it in my lap only to become my companies new standard for web site presences across the enterprise (can you hear the sound of my WP/Drupal dreams being sucked into that new blackhole hovering nearby) I made it my personal mission to do whatever I could to dominate this infuriatingly limited CMS?? (yeah sure, it was likely conceived by friends of your Grandparents over AOL instant messenger only to be lost and accidentally found by an MS summer intern) without becoming any kind of expert, and I find your videos fit nicely into my subversive plan to circumvent. Thanks for tapping into the needs your audience, for reals!
Hey Permakitty! Lol, love your comment, it gave me a good aul giggle! 😉! You should consider a path forward in writing. Sometimes, you have to do what you can to make these things more interesting you know. First step... dominate SharePoint, second step... the world!
I believe it does, my prototypes are still displaying as they did in the video. Still no resoution on the cookies front so I'm exploring alternative options that give the same result. Looking promising but too early to tell ;-)
Did I overlook something? When I embed the prototype in my SharePoint, it appears with a black background similar to the background when playing a prototype. ☹
Hey! If you set the background of your figma page to white that should sort that out for you. Click anywhere within the page which isn't a frame or item and on the right you will see a field called page where you can set the colour. Chnage that to white (assuming it isn't already). Hopefully that helps
This is fantastic, I echo everyone else's positive comments! I dont have the Ddesign bit in my code either so am unable to hide the framing. Do you have any suggestions?
We are using SharePoint to set up an intranet - I would like more flexibility to design our page - So is Figma or Hero the best option? Is there a fee? Thanks in advance for your feedback.
Is there a way to export the content so it's all self contained and the assets are internal? I'm not wild about having it constantly having to reference the Figma site.
Hey Seth. Unfortunately, not easily (that I am aware of anyway). Ultimately, this is embedded content, so the source is always the source if you get me. Figma does have plugins available that will allow you to export the related HTML and CSS of designs and prototypes, so you could find a way to use that as a self-contained solution. That could be a road to go down now that I think of it (Typing as I think here! 😉). I think that's my homework for the next few days! I'll report back!
How can I put multiple buttons in a row. On 2016 I would create a custom script editor that would allow me to make multiple buttons. I can make quick links out of the box. But I would like to have 5-10 Buttons in one section. Please help. I work for a company. So, I would have to work with IT to get approval for FIGMA.
23:00 Wish you had mentioned that requirement earlier :/ I am trying to build a better SharePoint experience for my team at a multinational company.... So I guess none of this cool stuff will work for me.
Love the info that's being communicated but the torrent of pop culture b-footage is unnecessary and hugely distracting. Really takes away from the rest of your vid which is fantastic.
Thanks stugryffin, I appreciate the feedback. This video was a bit of an experiment in a slightly new format to inject a bit more humour (maybe more so for me in the editing process!)
Hey, if you want to see more on this subject, I have a video here that goes into more detail about creating on-page prototypes with Figma and embedding them within your sites! 😁ua-cam.com/video/8KbvtfLj1-w/v-deo.htmlsi=8LW_QT09IQ6GMaN9
It's very clever but clearly you aren't creating a custom web part at all. So, I kinda feel I was hooked in to your video under false pretences 😁 Would I use this in a production environment? No. For the simple reason that you're then a hostage to fortune i.e. if/when Figma decide to change how their product works - especially if you're using a free account. If Figma, for instance, decide to limit free accounts to X views per day or added "Made with Figma" slap bang in the middle, then your beautifully crafted "web parts" are suddenly not so clever. ☹ However, if it's possible to export this out of Figma as a fully functioning web page which you could host separately, then I'd change my opinion. But it is still an inventive trick nevertheless. 👍
Thanks for the comment and sorry for the false pretences... Well yes, it technically is not a coded web part but more of an alternative approach to get the effect. This definitely falls into the experimental category of things you can try and provides an opportunity to get creative without the need to code. I do agree that there is always that risk with free versions of an application but my personal thought on that woud be that if you are using a free version and are getting real value out of it, then I tend to support the product and sign up (as long as it is not exstorsionate of course!). I would not use this approach for a critical area like a homepage but you can have a hell of a lot of fun with it in specific scenarios... and if all else fails, being aware of apps like Figma and learning to use them is a valuable skill in itself for visual communication. Thanks for sharing your thoughts on this one, very good points to consider! 😁
Hi Eamon, I've experimented with no music and the grass is defo not greener. However, I'll work on subtlety more so it isn't as distracting! Thanks for the feedback, much appreciated!
IMPORTANT UPDATE - Figma released Embed Kit 2.0 and the previous string of %26hide-ui%3D1 no longer works. To hide the figma footer in your prototype you need to use the new string &hide-ui=true
Fantastic, thank you very much for the info! Pinning this comment so others can get the benefit!
Thank you very much
Videos like this are what make the Internet & UA-cam good assets to have (did you see what I did there? 🤣) well done kind sir and thank you so much! 👍
This video is super helpful, thank you guy you are the best
Happy to help!
Thank you, Dan! This is completely new world to me!
Hey Zarko! New and hopefully exciting! ;-)
Brilliant!! Thank you for this fantastic walk-thru. I can see many use cases for this approach.
You are most welcome Chas!
You have just blown my mind. Thanks a loooooot
This is wonderful! I'm learning two things at once! Which I need. Any chance you could show a "how to create website looking SharePoint sites through CSS” targeting an audience that's never used CSS? Another golden opportunity for a 2 in one. For example, I was trying to figure out how to shade or fill in the background of certain web parts with a solid color to make the site match and couldn't. I was trying to make the different buttons of a quick links web part different colors and couldn't because the developer inspect tool doesn't seem to work on those buttons...etc. would LOVE a great video on such things ❤️
This is fantastic. Thank you for the great walk-thru.
Really interesting, and a fantastic walk through of creating content in Figma 🤩 I won’t be able to implement it at work but having the interactivity for work flow diagrams would be amazing in SP pages. PS the short movie clips in between made me chuckle, nice touch.
Hey there (should I call you square or eggs?! 😉) thanks! lol, I had a few chuckles myself coming up with them. It actually made the editing of the video much more enjoyable!
@@Academy365-Dan 🤣 as Huey Lewis and the News sang it’s hip to be square, so square it is! 😋
What kind of sorcery is this?! 😁😁 Lovely stuff Dan, thank you!!
Thanks Mens! I think I can go bananas with this one!! 😜
My mind is blown! Thanks for this demo
Thanks Wendy, really appreciate that! 😁
This is amazing!!! I spent hours learning Sharepoint Framework and this is so much faster. I do have a question! I have "Add a caption" at the bottom of each of these Figma webparts once they're loaded to Sharepoint - how do I get rid of that or is it only visible on admin side?
I would like to know how to make the process interactive, like the example on 4:00 … did you make a tutorial for that. Plz !
Thank you-it's fantastic! Many thanks!!! The only thing I can't figure out is how to hide the Figma information; the amendment code %26hide-ui%3D1 you shared doesn't help. Do you have any suggestions?
Thank you for rthis video it helped me allot. But I still faceing one problem, I would like if the links that the buttom leeds to opens up in the same window and not a new one. Can you help me please?
Hey, really glad this video has helped you! I cover this point in my latest video, here is the time stamp: ua-cam.com/video/8KbvtfLj1-w/v-deo.htmlsi=VkStB5tOw7aOlkGq&t=821
this is magic for me, I need this one, thank you so much
Could you please show how to do the process web part?
A problem! When i click the picture it shows figma website and then open the requested link !! How to jump to the site directly !?
Hi thank you for this tutorial. It works! I just have one problem the sharepoint page when it’s loading the attached embed keep ahowing figma loading. How to hode this? Need help please.
Man !! thank you !!
You are very welcome! Thanks for your thanks! 😉
google LOV111VOL - new sharepoint works after 1 minute - works standalone too.
Nice video and great concept. Have been looking for a way to get more interaction into pages. Not sure it will be viable at work but really innovative. May have a go at a POC thiugh as we do have a paid version of figma at work. Would love a vid on how you ucreated the process one in figma
Cheers Chris, very much appreciated. Yea it's one of those things where putting it in a very high profile may be difficult swing with but I can see it being used within Team sites etc which have a smaller targeted audience where a complex process or infographic could really come to life. I'll record a video on the process one and a few more examples. Once you get the basics of Figma prototyping down, a lot of possibilities open up. I'm a big fan. I can't remember the last time I used PowerPoint, I now create most presentations etc. in Figma (but that's potentially a separate video in itself!) ;-)
@@Academy365-Dan
thanks for this - well done! - I'm also interested in the process flow and will look out for your video covering it.
Love the accent!
Awesome Content!
How can I cut off the background from figma?
Where did you find this type of content? I mean the tricky about the hide UI functionallity.
Outside of the Heero web part, can multiple tiles be added to an additional web part?
Hi Rick, the quick links web part has a 'tiles' layout option but it looks quite different to the hero version of a tiled layout. The Hero web part is quite unique in terms of it's layout. The news webpart has a 'hero' layout but that wouldn't be much benefit over using the actual Hero web part
@@Academy365-Dan Thank you!
@Academy365-Dan Can you do a video on the interactive process flow?? That component is awesome. Would love to see how you do that in Figma!
Hey Patrick! Yes, I can, I'm thinking of creating a few shorter videos (these 30-minute-plus videos do take a while to string together). This one would be a perfect candidate! Great shout ;-)
@@Academy365-Dan Thanks Coach! Yes, do a video one please. The pictures for the addition to the web part are nice. Thanks again!
Still waiting to create this video 😢
This is really good but the background music is very irritating and distracting mate.
Hey, thanks for the feedback! I include music as my voice on its own tends to drive me crazy! ;-) I'll look to change it up in the next video and perhaps make the background music more subtle. I need to find the Goldilocks zone with this!
Where is the animation navigation video ?
This is a lovely tool. But did I miss something BIG? The resulting webpart is not responsive and so it really doesn't work for SharePoint.
Hey Carolee, In this example, the resulting web part is not responsive however, Figma prototypes can be made responsive (they are extremely capable in this regard). There are some great tutorial videos out there which cover responsive prototypes extensively. But, this specific video was more about letting people know it's a road which can be explored.
google LOV111VOL - new sharepoint works after 1 minute - works standalone too.
Suggestions for someone that just inherited our SharePoint site and is not an IT person or programmer. I have no idea where or how to begin.
Thanks for the video!!! Can we add the embed and delete the white margins / paddings in the side to make it look full width? To be able to create full width banners with quick links and stuff!
Hi Carlos, I don't believe you can using the embed method. The web part is constrained to the standard 'Page model' and 'full-width' sections don't support the embed web part
Once again you've impressed me with your creative SPO workarounds aka hacks... after someone decided to polish this ancient tech turd and threw it in my lap only to become my companies new standard for web site presences across the enterprise (can you hear the sound of my WP/Drupal dreams being sucked into that new blackhole hovering nearby) I made it my personal mission to do whatever I could to dominate this infuriatingly limited CMS?? (yeah sure, it was likely conceived by friends of your Grandparents over AOL instant messenger only to be lost and accidentally found by an MS summer intern) without becoming any kind of expert, and I find your videos fit nicely into my subversive plan to circumvent. Thanks for tapping into the needs your audience, for reals!
Hey Permakitty! Lol, love your comment, it gave me a good aul giggle! 😉! You should consider a path forward in writing. Sometimes, you have to do what you can to make these things more interesting you know. First step... dominate SharePoint, second step... the world!
Does the code amendment still works? The link to the figma prototype still shows
I believe it does, my prototypes are still displaying as they did in the video. Still no resoution on the cookies front so I'm exploring alternative options that give the same result. Looking promising but too early to tell ;-)
Did I overlook something? When I embed the prototype in my SharePoint, it appears with a black background similar to the background when playing a prototype. ☹
Hey! If you set the background of your figma page to white that should sort that out for you. Click anywhere within the page which isn't a frame or item and on the right you will see a field called page where you can set the colour. Chnage that to white (assuming it isn't already). Hopefully that helps
This is fantastic, I echo everyone else's positive comments! I dont have the Ddesign bit in my code either so am unable to hide the framing. Do you have any suggestions?
We are using SharePoint to set up an intranet - I would like more flexibility to design our page - So is Figma or Hero the best option? Is there a fee? Thanks in advance for your feedback.
This is amazing! Thanks for sharing this idea.. I'm just wondering if this also can do responsive views on tablets and mobile devices?
Hey! Yes, Figma prototypes can be made responsive, alright. Takes a bit more work, but absolutely possible
do others need to have a Figma account to view this in Sharepoint?
GReat content!! My code is diferrent from you so i don't have the 3Ddesgin in the code so the Figma framing, any idea?
Is there a way to export the content so it's all self contained and the assets are internal? I'm not wild about having it constantly having to reference the Figma site.
Hey Seth. Unfortunately, not easily (that I am aware of anyway). Ultimately, this is embedded content, so the source is always the source if you get me. Figma does have plugins available that will allow you to export the related HTML and CSS of designs and prototypes, so you could find a way to use that as a self-contained solution. That could be a road to go down now that I think of it (Typing as I think here! 😉). I think that's my homework for the next few days! I'll report back!
are these embeded modules responsive?
How can I put multiple buttons in a row. On 2016 I would create a custom script editor that would allow me to make multiple buttons. I can make quick links out of the box. But I would like to have 5-10 Buttons in one section. Please help. I work for a company. So, I would have to work with IT to get approval for FIGMA.
Hey have you explored the various layout settings of the quick li js Web part. There is a tiles setting that might work for you
23:00 Wish you had mentioned that requirement earlier :/ I am trying to build a better SharePoint experience for my team at a multinational company.... So I guess none of this cool stuff will work for me.
Hold on, I was actually able to change that setting. Hah!
Great stuff, glad you got around it! Best of luck with the UX, I'm sure it will be great!
The code did not work for me to remove the borders
Same
google LOV111VOL - new sharepoint works after 1 minute - works standalone too.
I love you
Love the info that's being communicated but the torrent of pop culture b-footage is unnecessary and hugely distracting. Really takes away from the rest of your vid which is fantastic.
Thanks stugryffin, I appreciate the feedback. This video was a bit of an experiment in a slightly new format to inject a bit more humour (maybe more so for me in the editing process!)
🙌🏾
🤘
Hey, if you want to see more on this subject, I have a video here that goes into more detail about creating on-page prototypes with Figma and embedding them within your sites! 😁ua-cam.com/video/8KbvtfLj1-w/v-deo.htmlsi=8LW_QT09IQ6GMaN9
It's very clever but clearly you aren't creating a custom web part at all. So, I kinda feel I was hooked in to your video under false pretences 😁
Would I use this in a production environment? No. For the simple reason that you're then a hostage to fortune i.e. if/when Figma decide to change how their product works - especially if you're using a free account. If Figma, for instance, decide to limit free accounts to X views per day or added "Made with Figma" slap bang in the middle, then your beautifully crafted "web parts" are suddenly not so clever. ☹
However, if it's possible to export this out of Figma as a fully functioning web page which you could host separately, then I'd change my opinion.
But it is still an inventive trick nevertheless. 👍
Thanks for the comment and sorry for the false pretences... Well yes, it technically is not a coded web part but more of an alternative approach to get the effect. This definitely falls into the experimental category of things you can try and provides an opportunity to get creative without the need to code. I do agree that there is always that risk with free versions of an application but my personal thought on that woud be that if you are using a free version and are getting real value out of it, then I tend to support the product and sign up (as long as it is not exstorsionate of course!). I would not use this approach for a critical area like a homepage but you can have a hell of a lot of fun with it in specific scenarios... and if all else fails, being aware of apps like Figma and learning to use them is a valuable skill in itself for visual communication. Thanks for sharing your thoughts on this one, very good points to consider! 😁
Turn off the music
Hi Eamon, I've experimented with no music and the grass is defo not greener. However, I'll work on subtlety more so it isn't as distracting! Thanks for the feedback, much appreciated!