A Figma plugin for Microsoft designers that helps you make better designs.

Signed into figma.com with your @microsoft.com account?

Get the Fluent Design Assistant plugin 🔒

Getting started

• 1

  In a Figma file connected to some variables (Assets › Team library › enable Fluent Web Variables), create a text layer with the text fill color set to 242424.

  

• 2

  Start the plugin: Resources › Plugins › Microsoft › Fluent Design Assistant.

  

  Tip: It will take several seconds to get the variables from your team library. Try keeping Fluent Design Assistant open while you work. I’m working with Figma to make that faster.

• 3

  

  The plugin will show you that that text layer matches Neutral Foreground 1 Rest, among others. That’s the token you want! So click that suggestion. You’ll notice in Figma’s properties panel that your hard-coded hex color has now been replaced with a design token from the Fluent UI kit, so your design...

  • ...is consistent with other Microsoft designs
  • ...is accessible
  • ...is understandable to other designers (why 242424?)
  • ...uses the same token name that your engineer uses in code

That’s all there is to it! Try opening a design you’re working on and click Or, check the whole page to have the plugin give you tips for every layer on the page.

The plugin supports modes, too. If you select something that’s in a dark mode frame, you’ll just see the matching dark mode tokens.

---

How to give feedback and ask for help

Tell us what you’d like to see in a future version! Everyone has a different workflow, and we might not know about yours. What else do you wish this plugin could do? There’s a link to send feedback at the bottom of the plugin. You can also send email or a Teams message to Travis Spomer directly.



---

Tips

Using other libraries

You can still use this plugin even if you use a different library in place of the Fluent 2 kits. Does your team have a custom UI kit file with your own brand colors? Or maybe your team’s designs all use Comic Sans—the plugin doesn’t judge. If you use variables, you don’t have to do anything extra—just connect to your variables library and the plugin will find it.

If you need to use a legacy library with styles instead of variables, you need some extra steps:

1. Open the Figma file that you want to use as your library (My Team’s UI Kit)
2. If you made this Figma library, make sure that you’ve published the styles already
3. Click the Using this file’s variables and styles dropdown at the bottom of the plugin window
4. Click Bookmark this file as a library
5. Switch to the design file that you want to check against that library (My Component Spec_FINAL_v2_reallyfinal)
6. Use the plugin normally

Instead of seeing Fluent tokens, now you’ll see tokens from the library you bookmarked. You can click Library at the bottom at any time to switch back (None).

Using a library you only have view access to

Figma doesn’t let you run plugins on files you aren’t allowed to edit, so to use styles from a library you can’t edit, you need help from a person who does have edit access:

• A person who does have edit access to the library file should open the plugin and go to the Choose a library page as above.
• Then, they click Export this library to a file, and then Download library file.
• Then, they share that file with their coworkers by whatever means they choose: email, Teams, a team document library, or whatever.
• Their teammate who does not have edit access then opens the Choose a library page as above, and clicks Import library from a file and browses for that library file.

Then the plugin will work just as if you did have edit access to the library file. Like before, any time the styles in the custom library change, you’ll want to go through those export, share, and import steps again to get the latest styles.

Why can’t I undo?

Figma has a bug where if a plugin window has focus, it won’t “hear” your Ctrl+Z / ⌘+Z. Just click in the canvas and then press the keys again to undo.

Using the “wrong” tokens

If you have a rectangle selected, the plugin will only suggest tokens meant for strokes and fills, not text colors. (And so on.) This helps you choose the correct token faster. But occasionally that’s unhelpful, such as if you’re building a style guide rather than an actual UI. To turn that behavior off and always see all matching tokens:

1. Click the Library dropdown at the bottom of the plugin window
2. At the bottom of the page, turn off Only show me the most relevant tokens (when possible).