Free Microsoft Fluent Web UI kit - Figma UI kit and design system

Save your time working with Fluent design!

This is the kit for creating Microsoft Fluent experiences on the web.

Microsoft published the original document in Figma Community here.

Visit Fluent Design Official Website👉

Summary

The original UI kit published by MS was complicated which no variants and thousands of items. I did re-structure components by variants and properties. Some names could be changed to easier for users.

Inside Basic file:

1. Buttons
2. Text Fields, Search
3. Dropdown, SpinButton
4. Toggle, Checkbox, Radio
5. Persona, Facepile
6. Command Bar, Pivots
7. Contextual Menu
8. Dialog, Modal, Panel
9. Pickers, Tag, Pill
10. Lists
11. Shell, Nav, Breadcrumbs
12. Callout, Tooltip, Cards
13. TeachingBubble, MessageBar
14. Spinner, ProgressIndicator
15. Activity Item, Label
16. Slider, Rating
17. Separator, Calendar
18. ColorPicker, SwatchPicker

    ---

Notice:

Microsoft Fluent uses Full MDL2 Assets as icon font. If you're unfamiliar with the font's glyphs and Unicode.

The Pro version would contain new autolayout, interactive components and icon list.

For more information, please feel free to chat with us through xceleration.studio@gmail.com