Microsoft Teams mockups / stencils for Adobe XD

%3CLINGO-SUB%20id%3D%22lingo-sub-1560505%22%20slang%3D%22en-US%22%3EMicrosoft%20Teams%20mockups%20%2F%20stencils%20for%20Adobe%20XD%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1560505%22%20slang%3D%22en-US%22%3E%3CP%3EDear%20all%2C%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3Ethere%20are%20many%20references%20to%20the%20Teams%20app%20design%20guidelines%20and%20UI%20components%20already.%20However%2C%20there%20seems%20to%20be%20a%20lack%20of%20templates%20and%20stencils%20for%20UX%20designers%20using%20Adobe%20XD.%20Therefore%20I%20started%20to%20rebuild%20some%20of%20the%20layouts%20and%20components%20and%20want%20to%20share%20them%20here.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EPlease%20note%20that%20I%20am%20no%20XD%20expert%20but%20use%20the%20application%20frequently%20to%20illustrate%20app%20concepts%20and%20create%20mockups%20quickly.%20I%20hope%20you'll%20find%20them%20useful%20as%20well.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20image-alt%3D%22SAP%20C4%20Integration%20%E2%80%93%202%402x.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F209606iEBBF41C3293AD476%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22SAP%20C4%20Integration%20%E2%80%93%202%402x.png%22%20alt%3D%22SAP%20C4%20Integration%20%E2%80%93%202%402x.png%22%20%2F%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Microsoft%20Teams%20-%20Meeting%20App%20Charm%402x.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F209608i52A4D0EA4B1C2099%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Microsoft%20Teams%20-%20Meeting%20App%20Charm%402x.png%22%20alt%3D%22Microsoft%20Teams%20-%20Meeting%20App%20Charm%402x.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EYou%20can%20grap%20the%20XD%20file%20from%20my%20OneDrive%20since%20the%20community%20doesn't%20accept%20the%20file%20type%3A%26nbsp%3B%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2F1drv.ms%2Fu%2Fs!AqtzHS39l1K0kMR_1X8BJOMVpIwKjA%3Fe%3DDBmSPs%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2F1drv.ms%2Fu%2Fs!AqtzHS39l1K0kMR_1X8BJOMVpIwKjA%3Fe%3DDBmSPs%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3ERegards%2C%3CBR%20%2F%3EMartin%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EP.S.%20I'll%20try%20to%20include%20the%20icons%20soon.%20If%20anyone%20has%20a%20good%20source%20for%20this%20or%20any%20feedback%20in%20general%20please%20let%20me%20know.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1560505%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELOB%20Apps%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Contributor

Dear all, 

there are many references to the Teams app design guidelines and UI components already. However, there seems to be a lack of templates and stencils for UX designers using Adobe XD. Therefore I started to rebuild some of the layouts and components and want to share them here. 

Please note that I am no XD expert but use the application frequently to illustrate app concepts and create mockups quickly. I hope you'll find them useful as well. 

SAP C4 Integration – 2@2x.png

Microsoft Teams - Meeting App Charm@2x.png

You can grap the XD file from my OneDrive since the community doesn't accept the file type: 
https://1drv.ms/u/s!AqtzHS39l1K0kMR_1X8BJOMVpIwKjA?e=DBmSPs 

Regards,
Martin 

P.S. I'll try to include the icons soon. If anyone has a good source for this or any feedback in general please let me know. 

3 Replies

@Martin Müller 

Thankyou very much!