Fluent Design toolkit for Figma

This toolkit aims to provide many of the Fluent Design System controls, pre-made for the Figma design application. It also includes basic Windows desktop shell controls, like the taskbar and window titlebars.

Download

Current version: v0.6

Note

Microsoft has released their own official Fluent Design toolkit for Figma. I'll continue to host this toolkit for people to use, however I'd recommend that you download the official kit as it contains more controls.

UWP design toolkits

Acrylic recipes

Since Figma supports background blur, we've included a collection of pre-made Acrylic recipes, so just copy and paste.

Want to make your own? Just follow the guidance in the toolkit.

Uses MDL2 Assets

This kit uses icons directly from the MDL2 Assets fonts, which already come with Windows 10. Using a Mac? Download the following fonts:

Segoe UI and Segoe MDL2 Assets
HoloLens MDL2 Assets

Windows Shell

Included are templates for the Windows taskbar, app titlebar, and the upcoming "Sets" feature, so there's no need to spend time creating these yourself.

Version history

v0.6 Core taskbar icons are now resolution independent vectors. v0.5 Adjusts NavigationView design. Fixes some component issues. v0.4 Adds lists. Fixes spelling issue. v0.3 Adds calendar view, InkToolbar, media transport, progress, and search controls. Fixes some component issues. v0.2 Adds auto-suggest box, menus & context menus, color picker, and dialog. Fixes some component issues. v0.1 Initial release.

This kit is unfinished, and may contain errors.

Wallpaper on this page and in kit by Michael Gillett. View on WallpaperHub.app