Cosa è Microsoft Fluent UI

Cosa è Microsoft Fluent UI

Prima di addentrarci nei dettagli, ecco una panoramica delle principali caratteristiche di Microsoft Fluent UI. Fluent UI è una collezione di framework UX/API open source per costruire applicazioni cross‑platform e moderne, nata dall’evoluzione di Office UI Fabric e ora in fase di transizione verso Fluent 2, che offre componenti ottimizzati per Web, Android, iOS e Windows, supportati da UI kit dedicati e da una solida integrazione con Figma per il design. Il sistema adotta i principi del Fluent Design System di Microsoft (luce, profondità, movimento, materiale e scala) e mette a disposizione linee guida UX e strumenti per garantire coerenza, accessibilità e personalizzazione across‑platform.

Storia e nascita

Fluent UI prende le mosse da Office UI Fabric, il framework lanciato nel 2016 per uniformare l’esperienza utente delle web app Office 365, che nel 2020 è stato ufficialmente rinominato Fluent UI per riflettere l’allineamento con il Fluent Design System di Microsoft . Il Fluent Design System, presentato al Build 2017 con il nome in codice “Project Neon”, introduce i cinque pilastri – Light, Depth, Motion, Material e Scale – per guidare la progettazione di interfacce moderne e coinvolgenti su Windows 10, Windows 11 e oltre.

Cosa sono Fluent UI e Fluent 2

• Fluent UI (v9) è l’ultima generazione di componenti React e Web Components pensati per il Web, con supporto per temi, accessibilità e CSS‑in‑JS. Include:
  • React Components (v9), il set principale di componenti React per Microsoft 365 e beyond;
  • @fluentui/react (v8), l’evoluzione di Office UI Fabric React;
  • @fluentui/web-components, implementazione basata su Web Components standard W3C per un utilizzo agnostico dal framework .
• Fluent 2 è la nuova generazione del design system, attualmente in preview, che introduce un sistema di token di design unificati e componenti modulari per tutte le piattaforme (Web, iOS, Android, Windows).

Componenti per lo sviluppo Web

Fluent UI React v9

Fluent UI React v9 fornisce un’ampia gamma di controlli (Button, Checkbox, Dialog, Menu, Tooltip, ecc.) ottimizzati per performance e a11y, implementati usando Griffel (CSS‑in‑JS) e React Context.
Esempio di codice – Button con tema personalizzato:

import * as React from 'react';
import { FluentProvider, teamsLightTheme, Button } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={teamsLightTheme}>
      <Button appearance="primary">Cliccami</Button>
    </FluentProvider>
  );
}
export default App;

Fluent UI Web Components

Questi componenti si basano su @microsoft/fast-foundation e possono essere utilizzati senza framework, oppure integrati in qualsiasi libreria (React, Angular, Vue) .
Import via CDN – HTML/TypeScript:

<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
<fluent-button appearance="accent">Hello world</fluent-button>
``` :contentReference[oaicite:7]{index=7}.

Componenti Mobile e Windows

Android
Fluent UI for Android è una libreria nativa che porta l’esperienza Microsoft 365 su Android, con colori, tipografia e controlli personalizzati basati sul Fluent Design.

iOS
Fluent UI Apple offre controlli UIKit/AppKit per iOS e macOS, allineati al Fluent Design System, con supporto per Swift Package Manager e CocoaPods.

Windows (WinUI)
WinUI è il framework nativo per app UWP e desktop su Windows 10/11, disponibile in due generazioni (WinUI 2 per UWP, WinUI 3 nel Windows App SDK), che incorpora i principi del Fluent Design System attraverso controlli e stili moderni.

Fluent UI Kits di Progettazione

Fluent Web UI Kit
Kit di design (Adobe XD, Figma ecc.) per progettare interfacce Web coerenti con Fluent UI .

Fluent iOS UI Kit
Asset per progettare UI iOS con stile Fluent, disponibile tramite Figma e link direct.

Fluent 2 in Figma
Tutti i kit Fluent 2 (Web, iOS, Android, Windows) sono ospitati in Figma, con token condivisi e componenti modulari, per un handoff efficiente tra design e sviluppo.

Design Language e UX Framework
Microsoft fornisce linee guida UX per Windows 11 (calma, naturalezza, coerenza), integrate in WinUI e in tutti i componenti Fluent UI, per garantire esperienze accessibili e fluenti. La documentazione “Design for Windows apps” descrive esempi e principi per colore, elevazione, tipografia, motion e materiali .

Inoltre, nel Microsoft Design repository sono disponibili pattern, best practice e workshop per applicare il Fluent Design System in contesti enterprise.

Applicazioni che utilizzano Fluent UI

• Microsoft Teams sta migrando a Fluent 2 per migliorare performance e ridurre complessità
• Outlook (web e desktop) adotta Fluent UI per un hub personalizzabile e coerente
• SharePoint Framework (SPFx) integra `@fluentui/react` come base per i web part personalizzati

Conclusione
Microsoft Fluent UI, con la sua evoluzione verso Fluent 2, offre agli sviluppatori un ecosistema completo per creare interfacce coerenti, accessibili e performanti su tutte le piattaforme. Grazie ai kit di progettazione, alle linee guida UX e all’integrazione con Figma, è possibile accelerare il workflow dal design al codice. Innovaformazione affianca le aziende IT nella formazione continua dei team di sviluppatori, garantendo competenze aggiornate su molte tecnologie Microsoft.

Per l’offerta formativa potete visionare il nostro sito QUI.

Per altri articoli di settore consigliamo di navigare sul nostro blog QUI.

(fonte) (fonte)

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)