Designing your Microsoft Teams app

Conceptual image introducing the Microsoft Teams design guidelines.

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.

Teams app design principles

Teams apps help people achieve more together. Use these principles to guide your design.

Collaborative

Teams apps help people achieve more together. Use these principles to guide your design.

Trustworthy

The app is secure and compliant. Users can easily find information about privacy.

Globally inclusive

People of all backgrounds, skillsets, and disciplines can use the app. It’s culturally, racially, and socially aware.

Light

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, etc.

Useful

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.

Responsive

The app is device and screen agnostic.

Accessible

The app meets Teams accessibility requirements in terms of color contrast, navigation alternatives, and more.

Well described

Text, icons, and images make it clear what the app is for and how to use it.

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).

Planning your app

To design a high-quality Teams app, you must first understand what you want your app to do and how you think people will use it. If you haven't already, take some time to properly plan your app.

Design fundamentals

Learn the fundamentals of Teams app design, including layout, color schemes, and more.

Basic Fluent UI components for Teams

Based on Fluent UI, these are the core elements for creating familiar Teams interfaces.

UI templates

Quickly create complex, high-fidelity designs with templates for common Teams use cases and workflows.

App capabilities

Understand how people add, use, and manage Teams apps to make the most of each capability in your design.

App customization

Understand how the Teams admin can customize or rebrand the app based on the organization's need. This customization is enabled if you define the configurableProperties in the manifest schema. For more information, see Customize apps in Microsoft Teams.

Note

App customization enables admins to change the look-and-feel of the apps loaded through bots, messaging extensions, tabs, and connectors. For example, if the Teams admin customizes the name of an app from Contoso to Contoso Agent, then the app will appear with the new name Contoso Agent to users. However, while adding a connector to a chat, in the list the connectors will still show the name of the app as Contoso.

As a best practice, you must provide customization guidelines for app users and customers to follow when customizing your app. For more information, see customize apps in Microsoft Teams.

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.

Sample app

Install a sample app to see how UI templates look and behave within Teams contexts.

Other resources

To learn more, try one of the following resources.

Fluent UI documentation

Get code samples and implementation details for the Fluent UI-based components used to build Teams experiences.

Adaptive Cards designer

Design Adaptive Cards in our web-based tool.