UI Library Design Kit

Published Apr 13 2022 11:56 AM 2,118 Views
Microsoft

We’ve heard how time-consuming designing video calling and chat experiences from scratch can be and we’re here to help.

 

Today, we’re excited to announce the Azure Communication Services UI Library Design Kit, a new Figma resource to help you design user interfaces built for Azure Communication Services that significantly reduces UX design and development effort.

 

 

Find the design kit in the Figma communityFind the design kit in the Figma community

 

 

The UI Library Design Kit includes components, composites, and UX guidance purpose-built to help bring your video calling and chat experiences to life. These components and composites are the same offered in the UI Library, making experiences designed with the UI Library Design Kit significantly easier to code.

 

blog-asset-1.png

The UI Library Design Kit leverages Microsoft’s deep experience building widely used communications experience like Teams and Skype. The components are based on Microsoft’s Fluent UI, so they’re built with usability, accessibility, and localization in mind.

 

The kit currently supports web with plans to add iOS and Android in the future.

 

Get the UI Library Design Kit (Figma)

 

%3CLINGO-SUB%20id%3D%22lingo-sub-3283411%22%20slang%3D%22en-US%22%3EUI%20Library%20Design%20Kit%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3283411%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EWe%E2%80%99ve%20heard%20how%20time-consuming%20designing%20video%20calling%20and%20chat%20experiences%20from%20scratch%20can%20be%20and%20we%E2%80%99re%20here%20to%20help.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EToday%2C%20we%E2%80%99re%20excited%20to%20announce%20the%20%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Facsdesignkit%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EAzure%20Communication%20Services%20UI%20Library%20Design%20Kit%3C%2FA%3E%2C%20a%20new%20Figma%20resource%20to%20help%20you%20design%20user%20interfaces%20built%20for%20%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fen-ca%2Fservices%2Fcommunication-services%2F%23overview%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EAzure%20Communication%20Services%3C%2FA%3E%20that%20significantly%20reduces%20UX%20design%20and%20development%20effort.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Find%20the%20design%20kit%20in%20the%20Figma%20community%22%20style%3D%22width%3A%20800px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F363944i4A8B80CCE0385BFE%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Search%20for%20kit%20video%20(final).gif%22%20alt%3D%22Find%20the%20design%20kit%20in%20the%20Figma%20community%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EFind%20the%20design%20kit%20in%20the%20Figma%20community%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EThe%20%3CA%20href%3D%22http%3A%2F%2F%2520https%3A%2F%2Faka.ms%2Facsdesignkit%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EUI%20Library%20Design%20Kit%3C%2FA%3E%20includes%20%3C%2FSPAN%3E%3CSPAN%3Ecomponents%2C%20composites%2C%20and%20UX%20guidance%3C%2FSPAN%3E%3CSPAN%3E%20purpose-built%20to%20help%20bring%20your%20video%20calling%20and%20chat%20experiences%20to%20life%3C%2FSPAN%3E%3CSPAN%3E.%20%3C%2FSPAN%3E%3CSPAN%3EThese%20components%20and%20composites%20are%20the%20same%20offered%20in%20the%20%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Facsstorybook%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CU%3EUI%20Library%3C%2FU%3E%3C%2FA%3E%2C%20making%20experiences%20designed%20with%20the%20UI%20Library%20Design%20Kit%20significantly%20easier%20to%20code.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22blog-asset-1.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F363446iFF7AB835DE9D2819%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22blog-asset-1.png%22%20alt%3D%22blog-asset-1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EThe%20UI%20Library%20Design%20Kit%20l%3C%2FSPAN%3E%3CSPAN%3Eeverages%20%3C%2FSPAN%3E%3CSPAN%3EMicrosoft%E2%80%99s%20%3C%2FSPAN%3E%3CSPAN%3Edeep%20experience%20building%20widely%20used%20communications%20experience%20like%20Teams%20and%20Skype%3C%2FSPAN%3E%3CSPAN%3E.%20The%20components%20are%20based%20on%20Microsoft%E2%80%99s%20%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui%23%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CU%3EFluent%20UI%3C%2FU%3E%3C%2FA%3E%2C%20so%20they%E2%80%99re%20built%20with%20usability%2C%20accessibility%2C%20and%20localization%20in%20mind.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EThe%20kit%26nbsp%3B%3C%2FSPAN%3Ecurrently%20supports%20web%20with%20plans%20to%20add%20iOS%20and%20Android%20in%20the%20future.%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EGet%20the%20%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Facsdesignkit%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3E%3CU%3EUI%20Library%20Design%20Kit%20(Figma)%3C%2FU%3E%3C%2FA%3E%3C%2FSPAN%3E%3CU%3E%3C%2FU%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3283411%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22http%3A%2F%2F%2520https%3A%2F%2Faka.ms%2Facsdesignkit%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EUI%20Library%20Design%20Kit%3C%2FA%3E%20helps%20you%20design%20user%20interfaces%20built%20for%20Azure%20Communications%20Services%20faster.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22blog-thumb.png%22%20style%3D%22width%3A%20370px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F363489iCB72F8D471DA133F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22blog-thumb.png%22%20alt%3D%22blog-thumb.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3283411%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EUpdates%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Apr 13 2022 03:42 PM
Updated by: