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 https://github.com/Jahnp © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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…

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

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.

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

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!

Fabric Core & Fabric React

Fabric Core – Atomic styles Animations Localization Color Branded Assets Fonts & typography Responsive grid https://github.com/OfficeDev/office-ui-fabric-core

Fabric React – UI Components Commanding Navigation + Inputs Containers Accessibility Pickers https://github.com/OfficeDev/office-ui-fabric-react

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

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.

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.

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

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).

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.

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 https://aka.ms/fabric-design-downloads

Demo: Designing with the toolkit, building with Fabric React

Next steps

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

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.

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

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 https://myignite.microsoft.com/evaluations Phone: download and use the Microsoft Ignite mobile app https://aka.ms/ignite.mobileapp 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.

Thanks!