If you’ve been wireframing SharePoint pages, you know how slow it can be. SharePoint’s page editor isn’t the fastest interface in the world, and that’s something we’ve just come to accept… until now. 

There’s a new way to wireframe SharePoint pages, and it’s lightning fast. Often, you, as the SharePoint admin, will be working with users to build a new site for them. They typically only know what they want once they see it on the page, so traditionally, you’re building out a SharePoint page in the page editor. You’re swapping things around. You’re changing that kind of stuff and getting feedback from the user, hopefully getting close to a final product. Otherwise, they say, “No, this whole thing just doesn’t look right. Let’s start over”. 

That’s where Figma comes in. Figma is a wireframing tool, except it goes way beyond wireframing. In this case, Microsoft has released a UI Web Kit with an initial set of web parts and other components. That means you can drop a representation of different web parts on a page without the usual required setup. The initial set of webparts they’ve released correspond to the company and organization news site templates in the SharePoint Look Book. That being said, not all webparts are in this tool right now, but they will add more as time goes on. 

The Figma interface is a little bit odd if you’re not used to using that particular product or even wireframing tools in general. I’m new to this product myself, so let’s just jump into it and see how it works. 

Get Started with the Figma SharePoint UI Web Kit

To get started, you’re going to go to Figma.com/@microsoft. From here, you’re going to locate the SharePoint Web UI Kit, click on it, and on the right you’ll see an option to Open in Figma. 

It will take a little practice, but it will definitely reduce the time it takes to mock up a site and build one out with a user. You can even do this in an interactive call with them. You can do a screen share and start dragging and dropping things on here to get the look that that user wants on their site.

How do you deploy the SharePoint UI Web Kit to a site? 

Well, you can’t at the moment. It’s unfortunate, but you still will have to build out this page by hand. That may change in the future because I know PowerApps can import Figma templates, but for now, you’re stuck with manual building. But this will save you a lot of time usually spent going through iterations and iterations with the user for what webparts they want. 

All that time is saved because you could just have an interactive session in Figma with a user. Just share your screen and work through this together. Finalize the design, and then you’ll build out the page one time. Give it a try! 

Need expert guidance for your SharePoint initiatives?

We are a top Microsoft partner with over 1,000 successful Microsoft SharePoint implementations. Our SharePoint solutions drive productivity, foster collaboration, and engage users. Talk to our experts today.