Start designing

Create beautiful, cohesive Microsoft experiences using the Fluent 2 UI kits. Built in Figma, the Fluent 2 UI kits contain design assets that map to the code libraries. That means seamless handoff from design to development, every time.

Fluent 2 in Figma

We use Figma to build and host our UI kits. Figma gives us access to the latest design features and optimizations and helps ensure your designs always stay aligned with Microsoft style.

UI kit organization

To streamline our complex system of assets and keep each file as useful as possible, each platform-specific UI kit contains styles specific to that platform. For example, the San Francisco type ramp is only in the iOS UI kit.

Values and ramps shared across platforms, like shadows and shared colors, are linked to each UI kit through the Fluent 2 design language.

Enabling the libraries

Enable the Fluent 2 UI kits from the Libraries dialog in the Assets panel. To ensure the UI kits are always available in your drafts, automatically enable them in Account settings.

For assets shared across platforms, you can enable additional libraries, like Fluent Iconography and the Fluent Emoji kits. Visit the Microsoft page in Figma community for more available kits.

Designing with Fluent

Components are organized in the Assets panel. Most components are kept close to the surface and not nested more than two levels.

Variants and component properties provide component flexibility and allow you to optimize component configurations to your specific needs. The properties available in the UI kits map to the code.

To learn more about variant and component properties, visit Figma’s help doc.