Guide: Using SharePoint Content Creator Kit in Figma
SharePoint Online
Jan 18, 2023 5:15 PM

Guide: Using SharePoint Content Creator Kit in Figma

by HubSite 365 about 2toLead

Pro UserSharePoint OnlineM365 Hot News

Unlock creativity with SharePoint Content Creator Kit in Figma. Design engaging SharePoint sites with our web parts, styles, and templates for optimal user expe

The Use of SharePoint Content Creator Kit in Figma

The video delves into SharePoint Content Creator Kit and how it aids in overcoming creative blocks, thus enhancing the user experience in SharePoint. Primarily, users of SharePoint are introduced to SharePoint sites and pages, which are influenced by the feedback of customers and MVPs. Constructed with Figma, this kit comprises of web parts, styles, and templates, that are a requisite for building engaging sites.


By visiting the hub in Figma at the Microsoft Community page, users can download the first iteration of the SharePoint Web UI kit. This kit is designed to enable the user to create a news communications site for an organization or company that aligns with a model given in the SharePoint look book. The kit encompasses a myriad config of web parts such as Button, Events, Hero, News, Quick links, and others.

With Figma, users have the autonomy to customize page page layouts for their SharePoint site. Users can modify the layout by dragging, dropping, and changing Figma components as necessary more information is available here. This not only provides the flexibility to experiment en route to determining the best user experience but also assures ease in personalizing site layouts with their brand colors and logos. There's a similar process to add and adjust web parts.

The tool kit comes with a comprehensive guide on how to modify and adjust the content for each component of the site including the header and footer, sections, and web parts. Furthermore, as content creators and designers continue working on enhancing SharePoint's toolkit, future updates will provide more templates and functionality including mobile forms, Team sites, along with other web parts.

In conclusion, the video offers an interactive teaching on the utilization of this toolkit with more updates in the pipeline. Such as more templates and enhancements due to user feedback through the SharePoint Feedback Community. While there is still progress to be achieved, this first edition of the toolkit is a significant leap forward in serving users better.

A Look into SharePoint and Figma

SharePoint, the collaboration platform from Microsoft, allows businesses to design sophisticated websites. Its content creator kit, as exhibited in the video, is developed in Figma - the go-to tool for web design. This integration allows users full autonomony in setting up proficient and user-friendly SharePoint sites, to benefit both creators and users alike.

SharePoint Online - Guide: Using SharePoint Content Creator Kit in Figma

Learn about How to Use SharePoint Content Creator Kit in Figma


Do you want to know how to utilize the SharePoint Content Creator Kit in Figma efficiently? This resource can significantly reduce instances where SharePoint Online can cause creative blocks. Let's delve into the topic and simplify it for you.

Understanding your needs and ideas, we've launched SharePoint, web spaces, and pages that leverage Figma, a tool widely used for web design. This approach ensures that designing the alluring web spaces is now a much uncomplicated process. These resources can be found on the Microsoft Community page in Figma, where the SharePoint Web UI kit's initial version allows you to design a company or organization's news communication site. This version is based on an example provided within the SharePoint look book.

The SharePoint Web UI kit includes the following web parts: Button, Events, Hero, Image, News, Quick Links, Spacer, and Text. You can utilize the Figma page layouts for your SharePoint site, updating the layout with Figma components as you find suitable. The components can be dragged, dropped, and modified, thus offering you more time to devise the best experience for your users.

Besides, you have the option to customize your site layouts by incorporating your brand colors and logos. Each web part comes with Figma components that align with each section type. They can be adjusted by switching layout categories and layout options. And if you have SharePoint, editing the web parts and adding your content is straightforward.

The toolkit provides detailed guidance on how to update and modify the content for each part of the site, such as the header and footer, sections, and web parts. However, these offerings are just the beginning. We are far from providing everything customers need. We are constantly updating the toolkit, and we plan to add more templates and capabilities, including Team sites, more web parts, and multiple form factors, such as mobile. Guiding you through best practices is also on our checklist.

If you see something missing or identify something that isn't working for you, kindly let us know by visiting the SharePoint Feedback Community at Your feedback will guide our prioritization roadmap, on which we aim to provide visibility. Together, we'll be taking significant strides forward, always proud of the steps taken and eager for the future.


More links on about How to Use SharePoint Content Creator Kit in Figma

SharePoint Content Creators Toolkit | Figma Community
This design kit shows how to take advantage of SharePoints' user interface capabilities and helps you focus on user experiences and best practice design ...
SharePoint Content Creators Toolkit (Community)
This design kit shows how to take advantage of SharePoints' user interface capabilities and helps you focus on user experiences and best practice design ...


SharePoint Content Creator, Use SharePoint in Figma, Figma SharePoint Kit, SharePoint Figma Tutorial, Guide SharePoint Figma, Using Figma SharePoint, SharePoint Content in Figma, Figma and SharePoint, SharePoint Creator Figma, Figma SharePoint Content Creator Kit.