EJ LAYNE:
Welcome everybody to this Microsoft Build on-demand session. My name is E.J.
Layne and I want to welcome you to Fluent 2. I'm looking forward to
showing you today how Fluent 2 can help
you design and build apps and experiences that
seamlessly integrate into experiences all
across Microsoft 365. I'll be joined in just
a bit by Sarah Lee, and Ian Guisard to dig into the details of
Fluent 2 with you. First though, I want to say
to you and everyone else that watching today, congratulations. I'm saying congratulations
because now you can build experiences
that look and feel like the experiences
used by billions of people all around the world,
and that's pretty exciting. You might be asking though, but wait, how is that possible? Well, it's because these tools, developer documentation,
design language guidance, UI kits for components and more, they're now all available
to you when you're designing and building your
applications and experiences. Even the ability to make
your application look great in dark mode with theming
and high-contrast support, what if I told you
that all of that was now immediately
available to you as well. Well, it is. You get all of
that and more with Fluent 2. But first, I want to let you know why you should watch this. First, I want to let
you know the benefits of Fluent 2 are being
made available to you and to other designers and developers around the
world for Windows, web, and iOS. You can learn more about Fluent
2 at the new website that we're launching today,
fluent2.Microsoft.design. Lastly, I want to
let you know that Fluent 2 is going
to continue to be developed in the open source and more Fluent 2
features are coming, so you should stay in touch
with us as these features are announced and made available to you over the coming months. Again, one more time, Fluent 2 now available to you, check it out at
fluent.Microsoft.design where you'll be able to find updated website documentation, updated design
language guidance, updated UI kits that are made available through
the Figma community, updated Fluent UI
React components, Updated Fluent UI
iOS components, and WinUI components
using the latest Fluent. Today we're going to talk about first what you can
do with Fluent 2, and then we're going to
jump into a case study talking about the benefits
that the Teams team, the Teams application
saw when they adopted Fluent for
their engineers, for their designers, and
for their end-users. Next, Ian and Sarah are going to talk about what's
new with Fluent 2, and then we're going
to jump into a demo to show how you can use Fluent 2 in your application
and your experiences. Finally, we're going to end up talking about what's
coming next with Fluent 2. First, as a reminder, I want to let know
that Fluent is a designed system built for
all apps and platforms. Fluent 2 is the next evolution
of that design language. As I mentioned, Fluent 2 has design language and UI Kits that are now now
available to you. It's got updated Fluent UI component documentation
for developers, and all of this is
been made available to you on the website.
So go check it out. Fluent 2, it makes your
experience feel integrated and natural on whatever endpoint that you're building for. As we all know, the more
natural something feels, the more successful we can make users when they're
using your experience. Again, this is why we invite
you to come use Fluent 2 to build experiences
that will make your users more successful. You can build those
experiences, as I said, Microsoft 365, Outlook,
Teams and more. You might be asking,
how do you build a Fluent 2 experience? How do you build
something that is fully integrated into the app, is fully accessible by
default and handles theming, dark mode, high contrast
natively right out of the box? While our motivation for
this is that just like you, we had to solve
the same problems in our applications as well, and we want to show
you how he did it. First, we're going
to let you know Fluent 2 is used on Windows. It's used here, as you can see on Office on
Windows as well. These two screens, you see
how well they match nicely together that's the
power Fluent on Windows. Next, Fluent 2 is
used on the web. Here we have Microsoft
365 and Teams living side-by-side looking
like one ecosystem because it is one ecosystem. This is the ecosystem
and the power of the Fluent 2 Design Language, making the experiences
look and feel natural and great across all
different experiences on the same platform. Finally, Fluent 2
is used on mobile. You might've seen the loop
on iOS launch recently. It uses Fluent 2 Microsoft 365
on iOS also uses Fluent 2. Elements such as the
header area, the avatar, your presence, the
search icon on the left, make all this
available to you to help build consistent
experiences that look great on iOS and
all the other endpoints. Again, this is the
power of Fluent 2. Again, Fluent 2 it benefits designers, developers,
and users. Again, it's all about improving that
end-user experience. For developers and
for the end-users, the render time and the load
time is super important. That's why we made
sure that Fluent 2 renders as fast as possible, getting users into
their experiences as quickly as possible. It's also easier to
write accessible UI and accessible UX is
Fluent components are accessible out of the box. It's more easy to create coherent experiences across
all different endpoints, all different applications,
all different platforms. Again, power of Fluent. All the components,
all the tools between your developers
and your designers across your entire product team, they are made consistent so that your team can work in a
more efficient manner, whether choosing
tokens, accessibility, the same color system. Again, this is all
now available to you as we've been using
it internally as well. It saves time, as we
know, it saves money, and makes development across
the teams more efficient. This is why Fluent
is the right choice. We will let you
know one more time, Fluent 2 is now
available to you, go check it out at the website, fluent2.Microsoft.design. But you might still
have questions you might be asking, hey, can you show me an
example of how to use all the different
pieces of Fluent 2, to build a beautiful
application? Well, here, Sarah is going
to come and tell you how the Teams application
adopted Fluent 2 and all the benefits that they saw from
their experience, and hopefully you
can learn from this. Sarah, take it away. SARAH LEE:
Thank you EJ. Hi everyone one. I'm Sarah, I'm a product
designer from Fluent 2, and now I'll walk you
through a case study that demonstrate how Teams has successfully been
using Fluent 2. Before using Fluent 2, Team has some misalignment on visual styles as well as
patterns within their app. Those differences
may seem small, but when they add up, they can make integration
design hard and burden our users to
learn new patterns. In order to solve the problem, we identify how Teams
can adopt Fluent 2 and utilize shared design
languages such as colors, shapes, elevation, type ramp, and spacing. Here's how it looks like after applying Fluent 2 to in Teams. Now we have more
consistency in type ramp, spacing, and even
components within the app. Fluent 2 integration teams brought a lot of
benefit for everyone. First of all, Fluent 2 improves teams performance
for engineers. Now Fluent 2 React
V9 components render up to six times faster than
the previous UI library, and call stage rendering time
decreases by 1.5 seconds. Not only that, the Fluent UI React V9 libraries
use a Fluent 2, and it is used across
company which makes our integration teams
much faster and easier. Fluent 2 allows
designer to provide coherent assessability
pattern across product. Shared design languages that first streamline design process, making it really easier
for designers to update and maintain
foundation like colors, spacing and type ramp. Also Fluent 2 components are designed with
accessibility in mind, which is very important for
every users on the planet. Out of the box, those are
accessible building blocks give designers more time to focus on improving our
product experience. Putting all these
things together, it creates more accessible and intuitive experience
for our users. By having consistent
experiences across a product, our users will have less
things to learn and need less time to recall how to
interact with our product. As you can see Fluent
2 integrator make everyone's life easier
and even possibly yours. Sounds exciting? Let's take a look at the latest
update in Fluent 2. Fluent 2 contains design
principles, design languages, UI libraries and guidance, and specification of reusable
components and patterns. Fluent 2 web UI kit includes all primitive components as a building block for desire to focus on improving the
overall product experience rather than creating
foundation from the scratch. In the UI kit, not only we have some element
components like spinner, but we also have components having placeholder
like pop over, which allows to easily swap
with your own content. We also make great improvement on component configuration. Using auto layout and
component property, we made the component
very easy to modify, like resizing them, and interchanging the icon
within the component. Furthermore, component
property help us to simplify the structure of the component and
reduce a lateral layers invariant to optimize
UI kit performance. Once more design tokens such
as color and typography. Now they migrate
into the web UI kit, which means you have a single UI kit file that
contains all necessary styles. Now you can find
our Fluent 2 web UI [inaudible] in a community.
Please check it out. Last but not least, we have Fluent 2
website which includes design language documentation,
use guidelines, and component usage guidance
for React component for you to create beautiful and cohesive
Microsoft experience. I hope you found these
updates as exciting as I did. Now, I'll pass to
Ian and he will give you more details
of this update. IAN GUISARD:
Hey, Sarah. Hi. I'm Ian. I wanted to share some of
the key changes of Fluent 2. First one I want to
talk about his colors. In Fluent 2, we unified
our gray ramps. Previously we had a
warm and a cool of set gray and now we have a single
unified ramp for grays. This allows us to
be more coherent across platforms and
across products. Second, we increased the number of shared colors that we have. Previously we had 31, we converged some of
the colors and also added now we have just 49
different shared colors. Lastly, per brand
colors we increased dynamic range extending
from 13 slots to 16 slots. This improves the logic of how we develop interactive states, and create accessible
components. Second, I want to talk a little
bit about accessibility. Right out of the box, all of our components are accessible. This applies for every platform. It could be iOS,
Android, or web. Besides our accessible
components, we also provide
accessible themes. We access on light, dark, and high contrast
right out of the box. Lastly, besides the colors, we also provide
accessible interactions. All of our components
are keyboard and in screen reader accessible. Now I want to talk about our
desired tokens foundations. Fluent 2 is built on top of a new foundation
of design tokens. Design tokens is a common
language for design and engineers to
communicate specifications. This allows for an
efficient collaboration when we're speaking
the same language. Second, design tokens allows
for consistency at scale, centralized shared values and shared consistency and design
elements across platforms. Changes can be easily made in one place for
better scalability. Next it's adaptability. Centralized design values makes adapting or to change your requirements a
little bit easier, allow for design systems
to evolve over time. In Fluent 2, this
is how we codify all design language
using design tokens. We have design tokens for
color, spacing, typography, elevation, stroke width, size, and border radius. At its most primitive level, we have our global
abstract layer. Global abstract is where we
encapsulate our hex values into a platform agnostic naming. For in this case, we encapsulate the value 2424 as gray 14. Global tokens are cross-platform
alliance so it doesn't matter which platform
you're developing for you can always hold the same value. Next, we created another abstract layer
for alias tokens. Alias tokens are
platform-specifics, which allows us to
bye-bye some of the platform rules to create platform-specific experiences. Here's an example between
going from light and dark. We're switching between
light and dark theme. However, the alias
token remains the same. The only thing that's
changing is our global token. As you can see
here, as we switch, the global value changes
from light and dark. Lastly, I want to
talk about some of the cross-platform
optimizations. Our typography now snaps
to a four pixel grid. Our elevation has
been redeveloped with platform
differences in mind, and mostly we're using the
latest Fluent 2 icons. Now I want to hand it over to Paul to give you a
demo of Fluent 2. EJ LAYNE:
Thank you, Ian for walking us through that. Now, we want to show you in this demo time how you
can take advantage of the latest value from Fluent 2 that Ian and Sarah
just showed you. Before we get started,
I want to make sure that you're fully setup. I want you to follow the
instructions on this slide. First, make sure that you have Visual Studio Code installed. Second, I want to make
sure that you have the latest Microsoft
Teams Toolkit installed and you can
follow the link here. Once you have the
toolkit installed, you want to follow these
instructions to make sure that you can see your app
running in preview; in Teams, Outlook,
and Microsoft 365. Once you've done that,
last but not least, you want to make
sure that you have the latest Fluent
UI React v9 library installed. It should
already be there. But just in case it's not, you follow this GitHub link, all the instructions
to get it set up. Now, let's jump into the demo. Now we're into our demo
where on the left you have Visual Studio Code running with a Teams toolkit
already installed. On the right, you have your application
running in Teams first, and then also a tabs open of
Outlook and Microsoft 365, which we'll get to
in just a second. Let me back onto the left. You'll see that we have
Fluent 2 components already put into the markup. We have the title component, Title 2, Title 3, card component, the
button component, table component, etc. Now on the right you'll see
how all these components lay out looking great by
default in Fluent 2. Again, power Fluent 2
is that we can make these components and the UI that you build with
them look great, right out-of-the-box in
multiple endpoint experiences. What we're showing you here
is again, Teams, Outlook, and Microsoft 365, all showing your application looking
great in these contexts, all looking natural
right out of the box. This is light beam that
we're showing first. But what if we wanted to show you what this
application look like in high contrast theme and
dark theme out of the box? Well, again, with Fluent 2, your application
changes and adapts naturally to look great
in each of these themes. Now, we want to open up our developer tools to show you how Fluent
to takes care of accessibility for you so you don't have to
worry about making sure that your components meet color contrast
requirements. As you can see with
the button with Avatar colors in dark
mode and in light mode. Fluent 2 takes care
of the work for you to make sure that
your components stay compliant and meet accessibility color
contrast requirements of 4.5 or more right
out of the box. Now, what if you wanted to get your brand color into Fluent? What if you wanted to say, change the background
of your button to red? Well, you could do that with
normal styling overrides. As you can see here, the
button is turned red. But as you can see, when we hover over the button, this background hover of the button is still
blue. Why is that? Well, we only change the
background color on rest state, as you see on hover and on pressed state is still
the default blue. Also for the input control, you can see the interactive
state is also blue. If you're trying to
bring your brand color into the application, doesn't look like this
one button override is going to do it for you. How do we solve
this with Fluent? Well, with Fluent 2, we have a concept
called a brand ramp. Now I want to show
you how you can bring that brand ramp into
your application. Update all of your different
interactive states, not just for button, but
for all of your components. We're going to jump up to the brand variants
section up here, and we're going to expand this. You can see that in here
we have 16 slot ramp, as Ian mentioned
before that has all of the different brand colors that we want to use for this demo. What this is going to
do is we're going to be able to show you
how you can update your interactive states and your rest states across all of your application by connecting these brand ramps into your light beam and
into your dark theme. We want to take our
light theme object and put it down in the
switch case down here, where we can set our app theme in case dark to dark theme. Then for the default case, we're going to set
it to light theme. Now when we hit "Save", we're going to see
the application on the right update with
our new brand ramp, which now has purple
on press hover rest, and for the interactive
state of our input control. Is not just for dark theme. We go and update the application
to light theme as well. You'll see that the colors
are there fully updated. That is the power of using
brand ramps with Fluent 2. Customization is more
than just colors. What if we wanted to
update something like the border radius of the card and other components
inside of our application? Well, by using design
tokens, we can do that. What we're going to
do now is we're going to override some of the design tokens that by default are set to one
value in Fluent 2. But if we want to set
it something like 20 pixels do give
really soft edges. Here you can see
we've updated in one go the card border-radius, that button border-radius, and the input border-radius. If we wanted to go
something beyond that, say updating text across
your entire application. You can do that too.
Here we're going to set it to console us. What you'll see is
that we're able to update the font family, but still keep the font
ramp that we have going, the type ramp that we have
inside of our application. Again, this leverages
the power of design tokens to be able to make changes to
your application, not just for one component, but across all of your
components inside of your theme. In closing with this demo, I want to make sure that you know all that you
can get with Fluent 2. You have access to easy
theming capabilities, easy access dark mode, high-contrast support, easy
access to accessibility, capabilities, easy
access to design tokens. All this is available to you. Go check it out with Fluent 2. Now you've just seen how
easy it is to use Fluent 2, to build great looking
application in Microsoft 365, and Teams, and in Outlook. We want to let you know what's
coming next with Fluent 2. We're working hard on
updates to Fluent, and we're working hard
on updates for web, for iOS, Android, React native components,
and web components. We're also making
improvements for design tokens and theme creation workflows,
like you saw earlier. There's so much more power that we want to make
available to you. We are looking forward to
make it available soon. Definitely stay in
touch, stay tuned. There's much more
than that to come. What's the best way though
to stay in touch with us? Again, fluent2.Microsoft.design
should be your entry point for all
things related to Fluent 2. For the UI component libraries, whether developer or
whether you're just interested in keeping up with open source workflow
with Fluent, you can check us out on
github/Microsoft/fluentui. Finally, for designers who
are looking to stay up with the latest in Fluent
and our Figmas, you can go to
figma.com/@Microsoft for the latest
design and UI kits. Otherwise you can stay
in touch with us. So Microsoft.com/design,
and on our medium site, republished articles regularly, medium.com/Microsoft-design. Finally, in Twitter we
have Microsoft Design. In Twitter, we also
have Fluent UI Twitter. You can keep up with us there. You can reach out to us any
questions you might have. We'd love to hear from you. Thank you so much for watching and please keep up with us. Keep up with Fluent 2. At fluent2.Microsoft.design.
I'll see you next time.
