Designing great SharePoint experiences

Use this guidance to design accessible SharePoint sites, pages, and custom components. Choose guidance for the actual host: a SharePoint page layout isn't the layout contract for a Copilot conversation or a Viva Connections card.

Design for the component's host

Copilot UX components: follow Copilot theme and design guidance, display modes, and visible-context guidance. The host controls the surrounding conversation; the component owns its iframe UI.
SharePoint web parts and extensions: use the page design principles below and the SPFx Fluent UI guidance. Match the library version to the component/template instead of upgrading every sample to the same Fluent UI version.
Viva Connections: start with the Adaptive Card Extension guidance.

Test keyboard access, focus, themes, resizing, and error states in each supported host. A responsive design or a mobile-sized mockup doesn't establish client support; Copilot UX components don't support iOS/Android at GA.

SharePoint communication site on multiple devices

SharePoint design principles

SharePoint builds on the design principles that shape the Office and Microsoft product families. These principles help the design stay true to our product goals and user needs.

Optimistic and fast

SharePoint is encouraging, knowing people can achieve whatever they set their minds to when given the platform and the support they need. We're fast and agile, and we adjust our product experience based on feedback and input.

Dynamic and alive

We thrive on the dynamism in the world and love the way that change can open new possibilities for people. We’re fearless about reinventing ourselves, continually changing for the better to meet the needs of the people and companies changing the world around us.

Authentic and useful

Our passion is to help people achieve, and it has been for more than 30 years. We care about it in a way that no one else does. We understand the importance of our customers and make sure that SharePoint stays relevant and useful by staying authentic and true.

Forward-thinking

We search for what’s possible beyond today’s way of getting things done. We’re energized by all that people are capable of achieving and seek to support and amplify it through our platform. We care about the needs of people not only today but tomorrow—anticipating what and how they’ll want to achieve. So we build our technology around who they can be and what they can become.

Accessible and optimized

Accessibility is developing an equal experience for all users that enables individuals to adjust their user experience to meet their unique visual, hearing, dexterity, cognitive, and speech needs. SharePoint believes strongly in providing accessible experiences for everyone, everywhere, and in optimizing our experiences to reflect the needs of all of our customers.

SharePoint Web UI Kit in Figma

Screenshot 2024-10-02 134843

The SharePoint Web UI Kit empowers you to design communication and team sites for desktop, tablet and mobile in Figma. This kit delivers a set of web parts, style options, templates, and detailed guidance so you can quickly design engaging sites and pages in Figma. Figma is a subscription-based application that is the industry standard tool for web design, and provides an alternative to designing sites and pages outside of SharePoint.

Access the kit in Figma Community

Watch a live demo on YouTube with the product team

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.

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/

Note that 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.

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.