Fluent design system development for designers

Understand Microsoft’s Fluent design system better with hands-on experience with the developer components of the system. If you’re like most designers I work with, you’re familiar with the Figma components of the design systems your product teams use. Another step you can take to learn about the design system is to work with the developer components, too. When you stretch your skills into this new space, you’ll understand the capabilities of the system better. The next time a developer tells you they ran into an issue implementing your design, you might be able to test out the limits of the system yourself!

Fluent 2 and Fluent UI React v9

Microsoft released the most recent version of Fluent, Fluent 2, in May 2023. Along with the Figma toolkit, updated versions of the Fluent UI code libraries were released. For web development, we use Fluent UI React v9 which in turn relies on the React library and some other tools like Node.js and yarn. While it’s not critical to learn much about each piece, you’ll want to download and install them to explore the Fluent developer components.

Launch a popover from a button

I recently went through all the steps to get a working example of a button launching a popover. Starting from the beginning, you should be able to repeat my steps in about 20 minutes.

Set up the tool

To get started with Fluent dev components, the first step is downloading and installing a couple tools.

• Grab the right version of VSCode for your device and install it
• Get and install node.js

Next, make a place to put your work. I normally create a folder like “scratch” or “examples” when I’m getting started and I store the folders for my project there.

• Launch a new terminal window (on Windows I use the “Run as administrator” option)
• Enter the following command in the terminal window “cd \”
• Then “mkdir scratch”
• Then “cd scratch”

Next, set up and use the yarn tool required by Fluent.

• Enter the following command in the terminal window “corepack enable”
• Then “Set-ExecutionPolicy RemoteSigned”
• Then “yarn add @fluentui/react-components”

After the third step above with yarn, you’ve got the Fluent dev components installed on your machine and you’re ready to use them. Next, you can create your first React project and add Fluent components to it for a hi-fidelity prototype.

Create a React project and open it in VSCode

With React and yarn installed, I use yarn’s project creation to start my projects.

• Enter the following command in the terminal window “yarn create react-app my-app –template typescript”
• Open VSCode
• Open the folder scratch\my-app in VSCode

Now you’ve got a React project set up for Fluent open in a code editor!
Next, copy and paste my example code to get you started with your popover and button components.

• View the files of your project in the Explorer pane of VSCode
• Expand the folder named “src”
• Select index.tsx
• Replace the contents of index.tsx with the following lines after the index.tsx title

Index.tsx

import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import App from './App';
ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);

Add a Fluent popover and a Fluent button

After you save the changes to the index.tsx file, you’ve got the Fluent theming engine running with the theme named “webLightTheme” set for your project. Next, you’ll repeat the steps of opening the other code file and replacing it’s contents so you have a button and a popover.

• Select “app.tsx”
• Replace the contents of app.tsx with the following lines after the app.tsx title

App.tsx

import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger, PositioningProps, Title1, shorthands } from '@fluentui/react-components';
const useStyles = makeStyles({
  root: {
    ...shorthands.gap("16px"),
    display: "flex",
    flexDirection: "column",
    alignItems: "baseline",
    justifyContent: 'center', 
  },
});
function App(props: PositioningProps) {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <header >
        <Title1>Fluent v9 Popover from a Button</Title1>
      </header>
      <div>
        <Popover withArrow  positioning={props}>
          <PopoverTrigger disableButtonEnhancement>
            <Button appearance="primary">Click me</Button>
          </PopoverTrigger>
          <PopoverSurface style={{ minWidth: 100 }}>Container</PopoverSurface>
        </Popover>
      </div>
    </div>
  );
}
export default App;

Run your Fluent code

Now that you’ve completed the installation and setup, created a new project, and added Fluent themes and components you’re ready to see the prototype work live in your browser.

• Enter the following in your terminal window “yarn start”

You should see something like the screenshot at the beginning of this post.

Congratulations!

You’ve created your first Fluent 2 app and you’re ready to change it and add other components.

Next steps

• Find the words “Click me” in the code editor and change them to “Learn Fluent”
• Find the word “Container” and change it to “I made a Fluent app in 20 minutes. So can you!”