Merge pull request #192817 from ddematheu2/dademath-ui-kit

UI Kit documentation

Author: GitHubber17

articles/communication-services/concepts/ui-library/includes/web-ui-library.md

@@ -27,6 +27,9 @@ In conjunction to the UI components, the UI Library exposes a stateful client li
 This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.
 This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see [Stateful Client Overview](https://azure.github.io/communication-ui-library/?path=/story/stateful-client-what-is-stateful--page).
 
+> [!NOTE]
+> The same components and composites offered in the UI Library are available in the [Design Kit for Figma](https://www.figma.com/community/file/1095841357293210472), so you can quickly design and prototype your calling and chat experiences.  
+
 ## Composites overview
 
 Composites are higher-level components composed of UI components that deliver turn-key solutions for common communication scenarios using Azure Communication Services.

articles/communication-services/overview.md

@@ -76,7 +76,11 @@ Learn more about the Azure Communication Services SDKs with the resources below.
 |**[Calling SDK overview](./concepts/voice-video-calling/calling-sdk-features.md)**|Review the Communication Services Calling SDK overview.|
 |**[Chat SDK overview](./concepts/chat/sdk-features.md)**|Review the Communication Services Chat SDK overview.|
 |**[SMS SDK overview](./concepts/sms/sdk-features.md)**|Review the Communication Services SMS SDK overview.|
-|**[UI Library overview](https://aka.ms/acsstorybook))**| Review the UI Library for the Communication Services |
+|**[UI Library overview](https://aka.ms/acsstorybook)**| Review the UI Library for the Communication Services |
+
+## Design resources
+
+Find comprehensive components, composites, and UX guidance in the [UI Library Design Kit for Figma](https://www.figma.com/community/file/1095841357293210472). This design resource is purpose-built to help design your video calling and chat experiences faster and with less effort.  
 
 ## Other Microsoft Communication Services
 

articles/communication-services/quickstarts/ui-library/get-started-ui-kit.md

@@ -0,0 +1,34 @@
+---
+title: Quickstart - Get started with UI Library Design Kit
+titleSuffix: An Azure Communication Services quickstart
+description: In this quickstart, you will learn how to leverage UI Library Design Kit for Azure Communication Services to quickly design communication experiences using Figma. 
+author: pereiralex
+ms.author: alexper
+ms.date: 03/24/2022
+ms.topic: quickstart
+ms.service: azure-communication-services
+ms.custom: mode-other
+---
+
+# Get started with UI Library Design Kit (Figma)
+
+This article describes how to get started with the UI Library Design Kit (Figma).
+
+Start by getting the [UI Library Design Kit](https://www.figma.com/community/file/1095841357293210472) from Figma.
+
+## Design faster 
+
+A resource to help design user interfaces built on Azure Communication Services, the UI Library Design Kit includes components, composites, and UX guidance purpose-built to help bring your video calling and chat experiences to life faster.  
+
+## UI Library components and composites 
+
+The same components and composites offered in the UI Library are available in Figma so you can quickly begin designing and prototyping your calling and chat experiences.  
+
+## Built on Fluent 
+
+The UI Library Design Kit's components are based on Microsoft’s Fluent UI; so, they’re built with usability, accessibility, and localization in mind. 
+
+## Next steps
+
+>[!div class="nextstepaction"]
+>[Get the ACS UI Kit (Figma)](https://www.figma.com/community/file/1095841357293210472)

articles/communication-services/toc.yml

@@ -75,6 +75,8 @@ items:
     items:
     - name: Get started with UI Library
       href: quickstarts/ui-library/get-started-composites.md
+    - name: Design with UI Library Design Kit
+      href: quickstarts/ui-library/get-started-ui-kit.md
   - name: Access TURN relays
     href: quickstarts/relay-token.md    
 - name: Tutorials