1. 5/29/2018 1:32 PM
Office UI Fabric behind the scenes: Open source Design & Engineering in Office
Peter Jahn
Senior UX Engineering Manager
OneDrive & SharePoint Design Studio
@PeterJahn
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. What is Office UI Fabric?
The official front-end framework for building experiences that fit seamlessly into Office and Office 365.
A Design & Engineering framework for building coherent experiences across Microsoft.
And…

3. Objectives & takeaways
Today, we’ll talk about…
What Office UI Fabric is
How “open source thinking” is changing how we make products
The new Fabric Design Toolkit (+Fabric React)
You should leave here knowing…
Office UI Fabric: 1st party === 3rd party
Fabric enables Office 365 extensions to look & feel native
Fabric projects are all open source by default

4. Standalone web, device, and service apps
5/29/2018 1:32 PM
Office 365 Platform
Extensions
Canvases
Standalone web, device, and service apps
Office UI Fabric
Documents 
Pages 
Embedded canvases
Conversations 1
Groups
People
Conversations
Files
Insights
Microsoft Graph
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. What does Fabric consist of?
Code for Developers
Toolkit for Designers
Docs for Both

6. A (very) brief history of Fabric
2014
The Beginning
Office 15: 1 Design Language, many Eng systems
Atomic CSS + Presentational JS
Agnostic to JS frameworks
+CSS+JS
2015
The Open Sourcing
Office UI Fabric released on GitHub
#1 repo in OfficeDev org
Community contributions (ngOfficeUIFabric)
2016
The Evolution
Office + others converge on React
“Let’s build production-ready UI components on Fabric Core”  Fabric React
Grassroots adoption & collaboration beyond Office
2017
Today
Broad usage across Office, Microsoft
Cross-company community
Design Toolkit + downloads released!

7. Fabric Core & Fabric React

8. Fabric Core – Atomic styles
Animations
Localization
Color
Branded Assets
Fonts &
typography
Responsive grid

9. Fabric React – UI Components
Commanding
Navigation +
Inputs
Containers
Accessibility
Pickers

10. Who in Microsoft is using Fabric?
Team Services
OneNote
Dynamics
Who in Microsoft is using Fabric?
+45 additional Microsoft sites and products

11. Demos: Fabric in use 5/29/2018 1:32 PM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Lessons learned from open source thinking
Accelerates broader product initiatives.
Evolves engagement across disciplines and products.
Distributed accountability empowers contributors.
Centralized coordination is essential to set standards and evangelize.

13. The Design of Fabric
The Adobe XD toolkit and other design resources

14. What is the Fabric XD Toolkit?
Tools+resources for designing responsive experiences using Fabric styles and components, built using Adobe Experience Design (aka Adobe XD).

15. Goals of the Fabric XD toolkit
Centralized design resources aimed at improving product quality and efficiency.
Living assets that are constantly evolving and always current.
Cross-platform via Adobe XD.
Open source (within Office organization & Microsoft ).
Enable third-party developers to design integrations for Office.

16. Design system (what’s included)
Design language: Colors, typography, iconography
Components: Interactive states, responsive behaviors, usage guidance
UX flow templates: Responsive layout templates based on Fabric breakpoints
Downloads: Segoe UI font, Fabric icon font, branded assets

17. Demo: Designing with the toolkit, building with Fabric React

18. Next steps

19. Contribute and participate with Fabric
File issues, give feedback
Contribute directly
Make the next ngOfficeUIFabric

20. Attend or view content for related sessions
5/29/2018 1:32 PM
Attend or view content for related sessions
Try out HOL3013: Fabric React task list
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

21. Related sessions & labs
BRK2194: Building great looking experiences with Microsoft Graph and Office UI Fabric
BRK2062: Make your app a native part of Office with Office Add-ins
BRK2393: What’s new and what's coming for branding and organizing your SharePoint sites
BRK2241: Learn how to make SharePoint accessible and inclusive (happening now!)
Labs
HOL3013: Build a task list with Office UI Fabric React

22. Please evaluate this session
Tech Ready 15
5/29/2018
Please evaluate this session
From your
Please expand notes window at bottom of slide and read. Then Delete this text box.
PC or tablet: visit MyIgnite
Phone: download and use the Microsoft Ignite mobile app
Your input is important!
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

23. Thanks!