Microsoft Teams UI Kit
Figma-based components and templates for designing consistent Teams apps.
Product Overview
The Microsoft Teams UI Kit is an official Figma community resource from Microsoft, providing comprehensive UI components, patterns, templates, and best practices specifically for building Microsoft Teams apps. Based on Fluent UI, it helps designers create accessible, responsive, and on-brand experiences for personal tabs, task modules, messaging extensions, and more, including scenario-based templates for common use cases like dashboards and notifications. Components: Fluent UI-based elements (buttons, cards, forms, navigation) with variants for light/dark themes. Templates: Ready-to-use layouts for Teams scenarios (e.g., personal apps, bots). Guidelines: Accessibility, responsiveness, anatomy, and usage examples. Figma Integration: Drag-and-drop components for rapid prototyping.
label.best_for
Teams building scalable, consistent digital products.
Key Features
- Components: Fluent UI-based elements (buttons, cards, forms, navigation) with variants for light/dark themes.
- Templates: Ready-to-use layouts for Teams scenarios (e.g., personal apps, bots).
- Guidelines: Accessibility, responsiveness, anatomy, and usage examples.
- Figma Integration: Drag-and-drop components for rapid prototyping.
Pros
- +Real-time collaboration
- +Ready-to-use templates
- +Comprehensive design system
- +Interactive prototyping
Cons
- -Adoption requires team alignment
- -Customization can be complex
Vuetify
Vuetify is a complete Vue.js UI framework that strictly adheres to Material Design guidelines, offering a rich set of components and powerful customization capabilities.
A2UI
open-source protocol for AI agents to generate secure, declarative UIs across platforms.
Watt Design System
Holaluz's Figma-based UI kit for consistent, accessible renewable energy interfaces.