How to build AMAZING SharePoint custom web parts - NO CODE REQUIRED!
HTML-код
- Опубликовано: 17 июн 2024
- In this video, we are going to look at an innovative method to create any user experience imaginable within SharePoint Online!🔥
And the best part... you don't need to be a developer or understand a single line of code! 😁
And the second best part... it's free, and you can do it today! 🎉
We are going to use a tool called Figma, and its design and prototyping capabilities to create some SharePoint magic!
This video explains the method and provides a step-by-step guide on how to create your own variation of the beloved Hero Web Part with additional tiles.
Once you understand the method and follow the guide, you are going to unlock endless possibilities to make your SharePoint Intranet sites unbelievably engaging.
🎯 Embed Code amendment: %26hide-ui%3D1
✅ Video Chapters
0:00 - Introduction
2:00 - The Method Explanation
2:33 - What is Figma?
3:00 - Examples of custom web parts
5:14 - Step-by-step Hero web part build
26:28 - Where and how to use this method within your sites
🎓 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!
![Moneybagg Yo - WHISKEY WHISKEY [feat. Morgan Wallen] (Official Audio)](http://i.ytimg.com/vi/kJamyq0WplE/mqdefault.jpg)
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! 😁ruclips.net/video/8KbvtfLj1-w/видео.htmlsi=8LW_QT09IQ6GMaN9
This is fantastic. Thank you for the great walk-thru.
Brilliant!! Thank you for this fantastic walk-thru. I can see many use cases for this approach.
You are most welcome Chas!
Thank you, Dan! This is completely new world to me!
Hey Zarko! New and hopefully exciting! ;-)
This video is super helpful, thank you guy you are the best
Happy to help!
Videos like this are what make the Internet & RUclips good assets to have (did you see what I did there? 🤣) well done kind sir and thank you so much! 👍
My mind is blown! Thanks for this demo
Thanks Wendy, really appreciate that! 😁
What kind of sorcery is this?! 😁😁 Lovely stuff Dan, thank you!!
Thanks Mens! I think I can go bananas with this one!! 😜
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! 😋
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?
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.
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
GReat content!! My code is diferrent from you so i don't have the 3Ddesgin in the code so the Figma framing, any idea?
Could you please show how to do the process web part?
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: ruclips.net/video/8KbvtfLj1-w/видео.htmlsi=VkStB5tOw7aOlkGq&t=821
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
@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 ;-)
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!
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!
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.
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!
🙌🏾
🤘
I love you
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!
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.
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
The code did not work for me to remove the borders
Same
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!)
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!