Fluent 2

tags :

Design System by Microsoft #

URL figma, url github, repo

ref Fluent 2 is a Design System created by Microsoft for designing internal products. A wide library of guidelines, examples, and recommendations based on deep expertise in product design helps designers and developers collaborate more effectively, and it functions seamlessly across various Apps and devices.

Design System includes

• design principles and
• guidelines and
• components for Web React, figma, url
• iOS
• Windows, and
• Andriod. UI kits encompass design assets perfectly aligned with the code libraries, ensuring a smooth transition from design to development consistently.

Fluent UI Web Components Overview #

ref

Microsoft’s Fluent UI Web Components are designed to help you build Fluent web apps using extensible Web Components. The package composes the @microsoft/fast-foundation Web Component package and styles it with the Fluent design language. You can use these Web Components flexibly, either from npm packages, from the CDN, or you can bring it into your project to customize and extend it.

With Fluent UI Web Components you can:

• Build a modern, standards-based, highly performant, highly accessible web front-end
• Build a web front end using only web platform code, no other frameworks, or
• Integrate with many popular frameworks like .Net, Blazor, Vue, React, etc.
• Build a web-standards UX built with W3C Web Component standards
• Leverage the existing Fluent UI design language as design tokens
• Customize the design language for your project by modifying and creating new design tokens
• Use the components out-of-the-box to build your web user experience or
• Customize, compose and build new Web Components based on the libraries that Fluent UI Web Components is built on, FAST
• Be part of a dynamic, open-web development community

Integrations #

ref The Fluent UI Web Component libraries, composed from FAST Components, can be used on their own to build modern web sites and applications, but are also designed to be used in combination with a wide variety of existing technologies. This section is dedicated to helping you get Fluent UI web components working with your preferred stack.

Angular #

.Net #

ref

<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>

In .Net HTML template

@ ViewData[“Title”] = “Home Page”;

example of creating custom web component and rendering them from backend, .Net, framework

Aurelia #

Blazor #

React #

ref

Vue #

Webpack #

Design System is implemented with Frameworks #

ref

React #

Web Components #