Figma Variables and new components available (v3.0.0) in the SharePoint Web UI Kit
Published Jul 09 2024 04:00 PM 4,236 Views
Microsoft

Examples of new Figma color variables added to the SharePoint Web UI Kit in the Figma Community.Examples of new Figma color variables added to the SharePoint Web UI Kit in the Figma Community.

Our SharePoint Web UI Kit in Figma has been updated with some great new additions! This update includes the exciting addition of Figma Variables and more components so you have more options when designing your SharePoint sites and pages.  

 

What’s new in v3.0.0 

  • Introduced Figma Variables for color, size, spacing, corner radius, and stroke width  
  • Added new components: Site activity web part, Content pane 

  

What’s updated in v3.0.0 

  • Themes and background colors can now be switched using modes 
  • Removed dark background variants from all components  
  • Re-factored components and bug fixes  
  • Updated documentation on using Figma Variables effectively 

 

To get started with our updated UI kit, simply download the latest version from the Figma Microsoft Community website: SharePoint Web UI Kit – Figma. 

 

Also, in case you missed it, watch our “Introduction to the SharePoint Web UI Kit” video on YouTube to watch a demo walking through how to use the SharePoint Web UI Kit yourself.  

 

 

Why use the Figma SharePoint Web UI kit? 

Figma is a subscription-based application that is the industry standard tool for web design. It provides an alternative to designing sites and pages outside of SharePoint. Figma does not build the pages in SharePoint, so once you finalize a design in Figma, you will need to build it in SharePoint. You should evaluate if Figma is the right solution for mocking up sites and pages for SharePoint.  

 

Design without organizational limitations 

This UI kit provides SharePoint users with another tool in their toolbox. While building a page in SharePoint is easy, we wanted to provide the ability to mockup sites and pages. It allows you to explore different design options for your site without the limitation of admin privileges and tenant restrictions, and doesn’t expose organization data.  

 

Figma mockups provide a quick snapshot of SharePoint updates which business stakeholders can use to plan and make decisions. They can provide appropriate requirements and use this UI kit in collaboration with their design team to iterate in the life cycle of your organization's intranet. 

 

Share designs with ease 

This UI kit provides you with page layouts and a selection of web parts to allow you to mockup and share new ideas across organizations and companies. Figma gives you the flexibility of reviewing and sharing your designs without having to spend time and resources creating it in SharePoint. Figma also allows you to download your designs into easy-to-use formats that can be used in documentation and presentations.  

 

Learn more at https://www.figma.com/  

 

Community feedback 

Please tell us what’s missing, what doesn’t work for you, and where your biggest challenges are by leaving a comment on the Figma SharePoint Web UI kit page or by  visiting the SharePoint Community.  

 

We hope you enjoy our latest update and look forward to seeing what you create with it! 

1 Comment
Version history
Last update:
‎Jul 03 2024 01:47 PM
Updated by: