---
# System prepended metadata

title: Dev Advocacy Topics

---

# Dev Advocacy Topics
The following is list of topics that our Fluent UI collective needs to communicate to our customers. 

We must create a consistent dialog with our customers and subsequently grow an audience. 

Our goals are to **educate**, **entertain**, and **build a community** around our Fluent UI products.

**Usage**, **Adoption**, and **Mindshare** are our baseline metrics that we use measure our success. 

Tactial ways that we can create an audience and a commmunity (we are not limited to just these, so we should be creative!):
- How to documenation
- Appearing on M365 Developer Community calls
- YouTube Videos
- Mixer/Twitch streaming
- Instagram, Dribble, Twitter, Vimeo

Our team is uniquely positioned because we sit with **Design** and **Engeineering**. We have the opporunity to create beautiful visual experiences that inspire, materialize it, and democratize it to our audeince to make them the most productive people on the planet. 

**Design to Code** is our part of our Fluent UI mission. Let's make that concrete:

We should be able to go from **Instagram to GitHub** in a matter of weeks and consistently communicate and deliver value to our audience.

![](https://i.imgur.com/fYRNUIv.png)
![](https://i.imgur.com/ZuN6gyZ.png)

Let's use this opportunity to inspire, educate, and create audiences for the Fluent Design System and Fluent UI.


## Fluent UI React 

:::info
These topics are applicable to @fluentui/react (v7) 
:::
1. Getting started
2. What's the difference between @fluentui/react, react-next, and react-northstar
3. Styling & Theming
    1. Create and apply a theme
    2. How to use the Customizer for component overrides
4. Components
    1. How to create a custom components
    2. How to participate with theming (palatte & semantic colors)
    3. How to create variant components

:::info
These topics are applicable to @fluentui/react-next (v8)
:::
1. Getting started
2. Styling & Theming (what's different from v7)
    1. Create and apply a theme
    2. How to use the ThemeProvider for component overrides
    3. How to convert from Customizer to ThemeProvider
4. Components
    1. How to create a custom component
    2. How to participate with theming (ThemeProvider)
    3. How to create variant components

## Fluent UI React Native
1. Getting started
2. Styling & Theming
    1. Create and apply a theme
    2. How to use customize()
    3. How to create a variant
5. Components
    6. How to create a custom component
    7. How to participate in themeing

## Fluent UI iOS & Mac
1. Getting started
2. Styling & Theming
    3. Create and apply a theme
    4. How to use customize()
    5. How to create a variant
5. Components
    6. How to create a custom component
    7. How to participate in themeing

## Fluent UI Android
1. Getting started
2. Styling & Theming
    1. Create and apply a theme
    2. How to use customize()
    3. How to create a variant
5. Components
    1. How to create a custom component
    2. How to participate in themeing

## Fluent UI Icons
1. Getting started
2. Usage
    1. How to export Icons 

## Fluent UI x Collabs

### Fluid Framework
1. Take Badge exampl and make it a Fluent UI x Fluid example
2. How to build a co-authoring component with Fluent UI component with the Fluid Framework
3. 

### Open UI
1. How does Fluent UI use OpenUI

### Adaptive Cards

### PowerApps

### SharePoint Add-ins

### Office Add-ins


# 3x3 Topic break down
Our current target is create media that a customer could easily reason over between 10 to 15 minutes. This could be a video, code sample, document, etc. For each topic you should be able to break it down into 3 takeaways you want the viewer to learn with 3 supporting talking points for those takeaways.

The following is example:

Topic - How to use Themes in your Fluent UI project
![](https://i.imgur.com/Ay0TAEt.png)

1. Takeaway 1 - Leverage the Fluent UI Theme Designer
    1. Point 1 - Create a theme using the Theme Designer
    2. Point 2 - Demonstrate the contrast checker support
    3. Point 3 - Export the theme using Code
![](https://i.imgur.com/4Id9eeZ.png)

2. Takeaway 2 - Import your Theme into your application
    1. Point 1 - Paste in theme from Designer
    2. Point 2 - include the necessary `createTheme` `loadTheme` functions
    3. Point 3 - Call `loadTheme`

![](https://i.imgur.com/ZSdjzWU.png)

3. Takeaway 3 - How to use the Theme colors in  your application content
    1. Point 1 - Show documentaion on Color Palatte
    2. Point 2 - Show documentation on Semantic Colors
    3. Point 3 - Demonstrate how to use them in a sample      




# Timeline

## Week 1 - Due June 4th
- 3x3 Points for your specific Topic
- Add any other topics to the above list you would want to see covered for any of the Fluent UI Products

@micahgodbolt 
- Topic - [How to use Customizer](https://hackmd.io/Bkyusd-0R7eQ3Q6aW3JkSA) to use create scoped style changes to your application
- subtree
- customized controls
- custom targeted controls?

@paulgildea
- Topic - Creating, loading, and using a theme - see above :-)

@Aneesha 
- Getting started with iOS
- https://hackmd.io/Qoz4eB5bTdOE2AnBou-DbQ