Brief introduction Fluent UI Microsoft Design System. What is, where you can start to learn it and what is purpose

1. Microsoft Design System
Fluent UI (previous Fabric)
Modern Apps’s Microsoft UX framework brief introduction
Domenico Monaco
monaco.d@gmail.com

2. https://developer.microsoft.com/en-us/office/blogs/ui-fabric-
is-evolving-into-fluent-ui/
Fluent is a Microsoft
cross-platform design system
Fluent is the way Microsoft designs and
builds digital product experiences, both
internally and with our customers and
community.
Fabric is evolving into Fluent UI
… be Fluent

3. Office UI Fabric JS
Simple components that focus on
appearance and styling while showing the
visual language of Office.
Fluent UI
Cross-platform design system compose by
collection of UX frameworks focus on experience
and visual language of Microsoft 365.
Fabric is evolving into Fluent UI
https://developer.microsoft.com/en-us/fluentui
Unlocks the Next Generation of Microsoft 365 Experiences

4. A collection of UX frameworks
for creating beautiful, cross-
platform apps that share code,
design, and interaction
behavior.
Build for one platform or for
all. Everything you need is
Fluent UI.

5. Fluent UI project celebrates internal and external
contributions.
Fluent UI embrace external contributes
https://developer.microsoft.com/en-us/fluentui#/resources
Developer resources
- Documentation, Tutorials and Examples
Design resources_
- Toolkits, Add-ins, Fonts, and Guideline
Contribution process
- Reference these step-by-step processes for contributing
to Fluent UI

6. Contribute
https://github.com/microsoft/flue
ntui
Talk & Meet
https://www.linkedin.com/groups/1
3529340/
Get started
https://developer.microsoft.com/e
n-us/fluentui#/
1 2 3

7. Many Microsoft 365’s apps use Fluent UI

8. Web
• Fluent UI for the web is available in two flavors: Fluent UI React and Fabric Core.
Windows
• Fluent UI Windows could be used with WinUI 3, Fluent UI React Native
iOS
• Fluent UI Apple is an open-source, native library used by Microsoft 365 apps.
Android
• Fluent UI Android is an open-source, native library used by Microsoft 365 apps.
macOS
• Fluent UI Android is an open-source, native library used by Microsoft 365 apps.
Cross-platform
• Fluent UI React Native is an open-source library built using JavaScript and React Native components. If you’re creating
experiences for several platforms, Fluent UI React Native components can help you get the job done faster.
With Fluent UI you can develop many other Apps

9. Some resource from http://freepik.com, https://www.flaticon.com, https://unsplash.com
Give me feedback!
Twitter @_domenicomonaco oppure
Linkedin linkedin.com/in/domenicomonaco
DOMENICO MONACO
monaco.d@gmail.com
http://domenicomoanco.it
Thanks
All contents of these slides are provided by Microsoft resources
available on the web.
Modern Apps’Microsoft UX
framework brief introduction