Designing your Microsoft Teams app
Whether you're a designer, product manager, developer, or maker using low-code tools, these guidelines can help you quickly make the right design decisions for your Microsoft Teams app.
Creating a cohesive experience
Designing a Teams app is like designing a conventional web app—but also a little different. An effective design highlights your app's unique attributes while fitting naturally with Teams features and contexts.
These guidelines and resources can help you strike that balance. You'll know what to do and what to avoid when designing your Teams app (such as multi-level navigation in a tab).
Teams app design principles
Teams apps help people achieve more together. Use these principles to guide your design.
Teams app promotes collaboration through coordinated and shared activity among users.
The app is secure and compliant. Users can easily find information about privacy.
People of all backgrounds, skillsets, and disciplines can use the app. It’s culturally, racially, and socially aware.
The app focuses on core scenarios that blend with Teams workflows.
Native or distinct
The app uses native Teams design components or your own. There’s no blend of color schemes, controls, and so on.
The app is based on a scenario people need to do in Teams.
Easy to use
The UI is easy to understand, pleasant in look and tone, and makes people more productive.
The app is device- and screen-agnostic.
The app meets Teams accessibility requirements in terms of color contrast, navigation alternatives, and more.
Text, icons, and images make it clear what the app is for and how to use it.
Teams design system
Learn the fundamentals of Teams app design, including layout, color schemes, and more.
Understand how people add, use, and manage Teams apps to make the most of each capability in your design.
Quickly create complex, high-fidelity designs with templates for common Teams use cases and workflows.
Basic UI components
Based on Fluent UI, these are the core elements you can use to create Teams experiences from scratch.
Tools and samples
The following tools can help designers and developers get started:
Microsoft Teams UI Kit
Design a Teams app with UI components, templates, and examples that you can drag, drop, and modify as needed. The UI kit also includes comprehensive information about how apps should look and behave in different Teams scenarios.
Microsoft Teams UI Library
View and test individual Teams UI templates and related components in your browser.
Import these templates and related components directly into your Teams app project.
You can upload a sample app to see how apps should look and behave in the Teams client.
To learn more, try one of the following resources:
Fluent UI documentation
Get code samples and implementation details for the basic Fluent UI components used to build Teams experiences.
Adaptive Cards designer
Design Adaptive Cards in our web-based tool.