Microsoft TeamsWork
The standup that drifted
Fifteen minutes becoming forty, one message at a time.
Use this templateMicrosoft Teams mockups
Fake Microsoft Teams chat & screenshot generator
Build a Teams chat or group that looks like the real thing — presence rings on every avatar, outgoing messages in that pale lavender rather than a saturated blue, names collapsing across a run, and the toolbar composer along the bottom.
Open the Microsoft Teams editorFree · no account · PNG and video
Start from a Microsoft Teams example
Each one opens in the editor as an editable, fictional scene — names, timings and interface details already set. Change a word, or change everything.
Microsoft TeamsWork
The approval nobody owns
A request bouncing between three people who each think it belongs to someone else. Written for process training.
Use this template
Microsoft TeamsWork
Day one
The welcome chat a new starter actually gets. Useful for onboarding decks and HR mockups.
Use this templateHow to make a Microsoft Teams mockup
Start from an example
The three above are the ones people build: a standup that drifts, an approval nobody owns, and a new starter's first morning.
Set the thread
A person's name for a one-to-one, or turn on Group and give it a title. The status line under the name is free text — Available, Busy, In a meeting.
Write the messages
Set who wrote each one and when. Consecutive messages from the same person collapse into a run with a single header, as Teams does.
Add reactions
Give a message a reaction and it renders the way Teams draws it. Useful for the moment in a thread where everyone agrees at once.
Export
PNG at 1× free, up to 3× on Pro, the whole thread or one screen, with or without the phone frame.
How the Microsoft Teams interface is put together
Our Microsoft Teams skin is rebuilt from the real interface in code rather than traced from a screenshot, so the details that make it recognisable survive at export resolution. Here is what those details actually are.
Presence rings around every avatar
Teams draws a small coloured badge on each avatar — available, busy, away, in a meeting. No other work chat in this roster does it, and it is the fastest way to tell a Teams screenshot from a Slack one at a glance, before you have read a word.
Pale lavender, not blue
Outgoing messages sit in a very soft purple-grey, several shades lighter than the brand colour and nowhere near the saturated blue people expect from a Microsoft product. A mockup that fills the bubble with #6264A7 looks like a Teams-branded messenger rather than Teams.
Bubbles, unlike Slack
Teams keeps enclosed message bubbles where Slack uses flat rows. That is the structural difference between the two, and it is why these are separate skins rather than one work-chat skin with a colour switch — a recolour would get exactly this wrong.
The composer is a toolbar
Teams puts formatting, attach, emoji, GIF, sticker and more along the bottom of the composer. It is visually heavier than any other composer here, and leaving it as a plain input is one of the quickest tells.
Names appear once per run
Consecutive messages from one person show the name and time on the first only. Repeating the header on every row makes a five-message exchange read as five separate conversations.
Group chats are named, not numbered
A Teams group carries a title — “Platform Standup”, “Procurement” — rather than a list of participants. Set it in the Contact section, and the People section decides who speaks.
What people use Microsoft Teams mockups for
- Internal-comms and process training
- IT and security-awareness material
- Onboarding and HR documentation
- Product demos for enterprise software
- Slide decks about how work happens
- Memes about meetings
Questions about Microsoft Teams mockups
- How is this different from the Slack generator?
- Structurally, not cosmetically. Teams uses enclosed bubbles, presence rings on the avatars and a toolbar composer; Slack uses flat rows, square avatars and an aubergine header. They are separate skins because a colour swap between them would be visibly wrong to anybody who uses either at work.
- Can I set someone's presence?
- The presence ring is drawn on the avatars in the group. The thread's own status line — Available, Busy, In a meeting — is free text in the Contact section, so you can set it to whatever the scene needs.
- Can I make a group chat?
- Yes. Turn on Group, give the thread a name, then add the people who speak in the People section. Each gets a colour, and consecutive messages from one person collapse into a run.
- Can I use my employer's name in it?
- You can type any name, but presenting an invented conversation as something that actually happened inside a real company is misrepresentation and our terms prohibit it. Every example on this page uses fictional people.
- Can I export a long thread?
- Yes. The download dialog offers the whole conversation at its true height, exactly one screen, or fit-to-content, so nothing gets cropped at the fold.
- Is there a watermark?
- Free downloads carry a small SIMULATED · socialmock.com label, burned into the pixels, at 1× resolution. Pro removes the label and unlocks 2× and 3×. You can also switch the label on yourself at any tier, which is worth doing if you are publishing somewhere a viewer might take the image at face value.
- Can I make it a video?
- Yes — the conversation types itself out message by message, and can be composited onto a 9:16, 4:5, 1:1 or 16:9 canvas for a Reel or a slide.
- Does it show the desktop app or the phone?
- The phone. Every skin here renders a mobile screen, which is what a screenshot shared in a message or a deck almost always is. The device frame is optional in the export.
Use these responsibly
Everything made here is simulated. SocialMock has no connection to Microsoft Teams and cannot read, send or alter a real message. Do not use a mockup to impersonate anyone, pass it off as a genuine screenshot, or present it as evidence in any legal, workplace or academic matter — see our Acceptable Use policy. For general information about legal risk, read is it legal to fake a screenshot? If you publish somewhere a viewer might mistake it for real, switch on the “Simulated” label before exporting.
Related generators
Browse all 36 appsBuild your Microsoft Teams mockup now
Click straight into the preview and type. Export when you are done — free at 1×, up to 3× on Pro.
Open the Microsoft Teams editor