Skip to main content

SharePoint Web UI kit

Microsoft has unveiled its inaugural modern UI toolkit tailored for SharePoint sites and pages, a response to invaluable input from customers and MVPs. The objective is to provide users with the tools they need to efficiently craft their online environments. Leveraging the widely utilized Figma tool, Microsoft has created a comprehensive collection of web parts, styles, and templates, streamlining the process of constructing captivating websites.

How you can get started with the SharePoint Web UI kit?

Using the link mentioned below you can open the web kit in figma. 

Click here to visit the community

What you can do with the SharePoint Web UI kit?

Right now this is the first iteration based on my learning, these are the key take away.
  • Utilize Figma's page templates to craft page arrangements for your SharePoint site. Enhance the layout by incorporating Figma components, which can be easily dragged, dropped, and adjusted according to your requirements. This streamlined process grants you additional time to refine the optimal user experience.
  • Customize your site layouts by adding your own brand colors and logos.  
These are the some of the useful URLs from which I get this information:


Labels:

Comments

Post a Comment

Popular posts from this blog

SPFx Interview Questions With Answers

In this article, we are going to discuss interview questions related to the SPFx (SharePoint Framework Development ). It will help you to prepare for the interview and in getting clarity on the core concepts of SPFx development. What is SPFx? SPFx, short for SharePoint Framework,  SPFx  allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools. What is the major difference between SPFx web part and the SharePoint app? Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe. What you can build with SPFx? Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx). Web parts, Extensions, Adaptive Card, Library Component How many types of extensions we can create using SPFx? SPFx has three extension types: Application Customizers: U...
2 comments
Read more

SharePoint Framework SPFx Node Version Compatibility

How to check the compatibility between the SPFx version and the Node.js version The SharePoint Framework (SPFx) is a client-side development platform used to develop web parts and extensions for SharePoint. The SharePoint Framework (SPFx) is compatible with the Node.js versions. Existing SPFx solutions may have different SPFx versions as compared to the current solutions. To make the SPFx solution run, Node.js is required, and in this blog, I am sharing steps to check the compatible node module for SPFx.  Find the SPFx version from the solution:  Open the project solution and navigate to the "package.json" file. In package.json file you will find  "@microsoft/sp-core-library" key and value of this particular key is the version of the SPFx.       Ex:    "@microsoft/sp-core-library": "1.14.0" Another way to find the SPFx version is by command, open the command prompt and run the command mentioned below: npm ls -g --depth=0 @microsoft/generator-s...
Post a Comment
Read more

How to Upgrade SharePoint Web Parts to the Newest Version

Updating the SharePoint/SPFx web parts or other solution is very common requirement, Webparts we can add from the SharePoint store or can be uploaded by our organization. To update a SharePoint web part to the latest version, start by uploading the updated SPFx package to the App Catalog. Then, make sure to upgrade the web part on the site where it’s being used. In this blog will be discussing ways to upgrade both package from the SharePoint app store or the the custom uploaded from the organization Update the web part added from the SharePoint app store: Go to the tenant level app catalog site. Select the app which you want to upgrade. Once you select the app, go the top ribbon and select file and click on the "Upgrade Store App", updated version will be added on the appcatalog if the new version is available on the store. Note: If you built the custom webpart then upload it to the app catalog. Install the upgraded solution: Navigate to the site collection where you have ins...
Post a Comment
Read more