### Design toolkits

These design toolkits provide styles, controls and layout templates that enable you to create beautiful and coherent Microsoft experiences.

<ul class="md-list--flex">
  <li class="mdut--half">[Download Web toolkit (Sketch)](https://aka.ms/FluentToolkits/Web/Sketch)</li>
  <li class="mdut--half">[Download Web toolkit (Figma)](https://aka.ms/FluentToolkits/Web/Figma)</li>
  <li class="mdut--half">[Download iOS toolkit (Sketch)](https://aka.ms/FluentToolkits/iOS/Sketch)</li>
  <li class="mdut--half">[Download iOS toolkit (Figma)](https://aka.ms/FluentToolkits/iOS/Figma)</li>
  <li class="mdut--half">[Download Android toolkit (Sketch)](https://aka.ms/FluentToolkits/Android/Sketch)</li>
  <li class="mdut--half">[Download Android toolkit (Figma)](https://aka.ms/FluentToolkits/Android/Figma)</li>
  <li class="mdut--half">[Download Windows toolkit (Figma)](https://aka.ms/figmatoolkit)</li>
  <li class="mdut--half">[Download Figma plug-in](https://www.figma.com/community/plugin/794492287931420611/Fluent-Theme-Designer)</li>

</ul>

<!-- headings get auto-generated IDs usually, and this page has two "SharePoint Framework" headings -->
<h3 id="sharepoint-framework-design">SharePoint Framework</h3>

These SharePoint design resources provide everything you need to design your web parts, including responsive page grids and columns.

<ul class="md-list--flex">
  <li class="mdut--half">[Designing SharePoint experiences](https://aka.ms/spdesign)</li>
  <li class="mdut--half">[SharePoint Toolkit (Figma)](https://aka.ms/SharePointToolkits/Web/Figma)</li>
</ul>

<h3 id="office-add-ins-design">Office Add-ins</h3>

The Add-ins design toolkit provides layouts for interface elements and commonly used patterns in Word, Excel, and PowerPoint. Use it in addition to the Microsoft design toolkits to create an add-in that fits within Office.

<ul class="md-list--flex">
  <li class="mdut--half">[Add-ins Toolkit (Sketch)](https://aka.ms/addins_sketch_toolkit)</li>
  <li class="mdut--half">[Designing Office Add-ins](https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-design)</li>
  <li class="mdut--half">[Add-ins Toolkit (XD)](https://aka.ms/addins_toolkit)</li>
</ul>

### Fonts

<ul class="md-list--flex">
  <li class="mdut--half">[iOS font](https://developer.apple.com/fonts/)</li>
  <li class="mdut--half">[Download Segoe UI and MDL2 external font](https://aka.ms/WebFluentFonts)</li>
  <li class="mdut--half">[Android font](https://fonts.google.com/specimen/Roboto)</li>
</ul>

### Native OS platforms

<ul class="md-list--flex">
  <li class="mdut--half">[iOS Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/)</li>
  <li class="mdut--half">[Guidelines for iOS app icons](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/)</li>
  <li class="mdut--half">[macOS Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/)</li>
  <li class="mdut--half">[Guidelines for macOS app icons](https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/)</li>
  <li class="mdut--half">[Android Human Interface Guidelines](https://developer.android.com/design/)</li>
  <li class="mdut--half">[Guidelines for Android app icons](https://developer.android.com/guide/practices/ui_guidelines/icon_design)</li>
</ul>