Email Composer

Compose customer or team emails with recipients, subject, rich content, attachments, scheduling, and preview in one focused workflow. This example brings Compose and Recipients together so team members can find the next task without losing context.

It includes representative records such as Product launch update and Enterprise renewal note. Use the screenshot to study the layout, then adapt its components and product states to your own design system.

Email Composer
Use this template in Figr

Template facts

Screen

Builder

Primary action

Send email

Pattern

Builder

State

Default, loading, empty, error, permission, success

Design system

Configurable product UI theme

What this screen helps users do

Product teams need to send email while keeping recipients, open drafts and exceptions visible. The interface should show what changed and who should act next.

Key elements

  • Main workspace: Compose gives users an obvious place to start.
  • Supporting view: Recipients keeps the related context close.
  • Primary action: Send email stays visible when people need it.
  • First signal: Recipients shows a useful value (126).
  • Second signal: Open drafts gives additional context (9).
  • Sample record: Product launch update.
  • Next record: Enterprise renewal note.

States worth designing

  • No configuration selected: say what changed, protect progress, and offer a clear next step.
  • Unsaved changes: say what changed, protect progress, and offer a clear next step.
  • Invalid rule or block: say what changed, protect progress, and offer a clear next step.
  • Preview generated: say what changed, protect progress, and offer a clear next step.
  • Publish blocked: say what changed, protect progress, and offer a clear next step.
  • Version restored: say what changed, protect progress, and offer a clear next step.

Where this screen sits in the flow

Compose → Recipients → Send email → Review outcome

Patterns used

Builder, Compose, Recipients, contextual actions, error recovery

Why these choices work

Show constraints before adding blocks, keep a usable preview and protect unsaved changes as people test a different direction.

Pay attention to compose and recipients. People need to distinguish Product launch update from Enterprise renewal note. Keep recipients visible, especially when a record changes owner or status.

Before this screen reaches handoff, verify keyboard focus, empty and permission states, and what happens after someone chooses “Send email”. Make error recovery as clear as the happy path.

Related screen examples to explore next: Shared Inbox Rules, Video Meeting Lobby, Notification Center.

Start from this in Figr

Design a email composer screen inside our existing product. Use our current components, tokens and content language. Include Compose and Recipients views, credible records like Product launch update, and a clear “Send email” action. Use our product permissions and show loading, empty, error and success states. Keep the output editable in Figma.

Open Figr