Designing Second-Screen Controls: UI Patterns After Casting Changes

Hook: When casting disappears, creators and streaming apps still need crisp second‑screen controls — fast

If you build streaming interfaces, you just felt the floor move. In early 2026 major services began removing native phone‑to‑TV casting in favor of alternative playback paradigms. That disruption creates both a pain point and an opportunity: how do you design second‑screen UIs and prototypes so viewers keep smooth, reliable control of playback without Chromecast‑style casting?

This guide gives product teams, creators, and design freelancers a practical playbook: UI patterns, accessibility rules, and step‑by‑step Figma prototype workflows you can implement today for second‑screen control, casting alternatives, and resilient playback control.

The context in 2026: why “casting is dead” matters for UX

In January 2026 Netflix removed the ability to cast from many mobile apps to smart TVs and streaming devices, signaling a shift in how ecosystems treat device‑to‑device playback. As Janko Roettgers reported in The Verge, this move accelerated the search for reliable second‑screen control patterns and cloud‑based alternatives.

"Fifteen years after laying the groundwork for casting, Netflix has pulled the plug on the technology..."

That change is not an isolated bug — by late 2025 we already saw platform vendors rethinking nearby device protocols, privacy policies, and remote control UX. The result: designers must plan for multiple pairing flows (QR, code, account linking), remote UX that doesn’t rely on OS casting frameworks, and playback architectures that can be controlled via low‑latency APIs or cloud handoff.

Top-level strategy: three design imperatives

1. Design for resilient pairing: multiple, fallback pairing options (QR, numeric code, account link, mDNS/SSDP discovery, Bluetooth LE).
2. Make the phone a true companion: the second screen should be more than a remote — add queue control, chapters, subtitles, cast‑alternative metadata, and social features.
3. Prioritize accessibility and latency resilience: large targets, clear feedback, offline/optimistic UI states, and robust screen reader support.

UI patterns for second‑screen controls (pattern library)

Below are reusable UI patterns you can apply across mobile companion apps, web players, and TV device apps as casting alternatives.

1. Quick Connect sheet (QR + code + nearby)

Default entry point to pair the second screen with the playback device.

• Top: device list with discovery status (Nearby, On network, Cloud linked)
• Primary actions: Scan QR, Enter Code, Use Account
• Fallback: Manual IP/Hostname for advanced users

2. Companion control deck

Minimal tactile controls focused on the most common tasks.

• Large central play/pause (48–60dp target), skip ±10s and ±30s, precision scrub by drag
• Secondary controls collapsed behind a swipe‑up tray: subtitles, audio track, playback speed
• Persistent small media card with artwork, title, elapsed time, and next_up preview

3. Precision Scrub + Timeline Thumbnails

For long form or editorial content, precision matters.

• Long press or two‑finger scrub to enter precision mode with thumbnails.
• Tap to drop a chapter marker; show chapter names pulled from metadata.

4. Watch Party & Remote Queue Management

Turn the second screen into a collaborative control center.

• Shared queue: drag to reorder, vote to skip, moderator controls
• Presence indicators and small user avatars
• In‑app chat and synchronized reactions

5. Safety & Accessibility overlay

One tap toggles large controls, captions, and audio descriptions.

• High‑contrast theme + large UI mode
• Labelled ARIA roles and logical focus orders for screen readers

Concrete Figma prototype workflow (step‑by‑step)

This workflow produces an interactive prototype you can test on devices and hand off to dev with design tokens and specs.

Stage 1 — Project setup

1. Create a Figma file named: "SecondScreen‑Controls—PROT" and a FigJam board for stakeholder notes.
2. Define frames for phone (375x812), tablet (820x1180), and TV companion preview (1280x720) for parity checks.
3. Install plugins: Token Studio (design tokens), Content Reel (dummy data), Iconify (icons), and Able (accessibility audits).

Stage 2 — Design system foundations

1. Use Auto Layout for controls and define variants for button states (default, hover, pressed, disabled).
2. Set up a Control Deck component: variants for collapsed, expanded, and high‑contrast modes.
3. Publish styles: color, type, and spacing. Export tokens to JSON via Token Studio for developer handoff.

Stage 3 — Build interactive components

1. Create interactive components for Play/Pause with a single component and variants (play→pause transition using Smart Animate).
2. Design the timeline slider as a component with a draggable handle and a mini‑thumbnail overlay component. Prototype the drag with "While Dragging" interactions.
3. Use prototype flows for pairing: Scan QR opens camera → success state → shows paired device card.

Stage 4 — Prototype flows to include

• Pairing flow (QR → code entry → account link fallback)
• Core playback (play/pause, skip, scrub, subtitles toggle)
• Loss of connectivity: show optimistic UI + retry dialog
• Accessibility mode switch demonstrating larger targets and VoiceOver labels

Stage 5 — User testing and device mirroring

1. Mirror prototypes to Android/iOS devices using Figma Mirror or device preview to validate touch targets and latency feel.
2. Run 5–8 remote moderated sessions focusing on pairing speed and perceived latency for scrubbing.
3. Iterate: reduce the number of screens in the pairing flow, add immediate feedback (vibration + voice prompt).

Sketch and Adobe workflows—practical notes

If your team uses Sketch or Adobe tools, adapt the Figma patterns like this:

• Sketch: use Symbols & Overrides with nested symbols for the control deck. Export assets as SVG and provide a shared Sketch Library for reuse. Use Principle or ProtoPie for advanced timeline interactions and micro‑interactions.
• Adobe (Illustrator / After Effects): create vector assets and export Lottie animations for micro‑interactions (play/pause morph, timeline scrub). Use XD or third‑party tools for interactive prototypes if needed.

Accessibility & inclusive UX: non‑negotiables

Second‑screen control is an accessibility win when done right. Prioritize these items:

• Touch targets: minimum 48×48 dp for tap targets; allow 60dp for primary actions.
• Contrast: meet at least WCAG AA for normal text and AAA for small text in critical controls.
• Screen reader labels: provide short, contextual labels (e.g., "Play on living room TV—connected").
• Haptic & audio cues: confirm pairing success/failure audibly and with subtle haptic feedback.
• Caption & audio description controls: an always‑accessible button with predictable behaviour and a shortcut gesture.

Playback alternatives: architecture and developer notes

Designers should understand the backend options so UI choices align with technical tradeoffs.

• Device control API: a simple REST or WebSocket control API on the playback device supports low‑latency commands (play/pause/seek) and state sync.
• Cloud handoff: use account tokens to tell the cloud to start playback on a device, useful when devices are headless or unreachable via local network.
• WebRTC for low latency: use direct peer channels for synchronized controls and minimal lag during scrubbing.
• Polling + optimistic UI: if low latency isn’t available, design optimistic UI that presumes success and reconciles when the device state updates.

Developer handoff checklist

• Exported design tokens (colors, spacing, type) as JSON
• SVG icons with accessible title/desc tags
• Prototype video of interaction flows (for motion handoff)
• API contract for device control (play, pause, seek, setSubtitle, setAudioTrack)
• Edge cases doc: offline pairing, device already in use, network timeouts

UX patterns to avoid

When casting goes away, some tempting shortcuts are harmful:

• Don’t hide critical controls behind deep menus — keep play/pause and closed captions one tap away.
• Don’t rely on device discovery that requires broad network permissions without transparency — educate users why permissions are needed.
• Don’t present ambiguous state — show explicit device connection state and last successful sync time.

Metrics & research signals to track

Validate your design by instrumenting key signals:

• Pair success rate within 60 seconds
• Average time to first control after pairing
• Scrub accuracy (users find target timestamp within N seconds)
• Accessibility adoption: percent of users enabling large control or captions
• Error/recovery events: failed pairing, lost connection frequency

2026 trends and predictions — design implications

Here are trends we've seen through 2025 and early 2026, and what they mean for your second‑screen UX:

• Account‑centric playbacks: Devices and cloud services now favor authenticated session handoffs. Design pairing that leverages login tokens and makes account linking seamless.
• Privacy‑first discovery: Platforms restrict open network discovery. Move pairing toward QR/code and explicit user consent, and explain what’s shared.
• Wearable & voice companion growth: expect voice and smartwatches to become secondary controls — design concise command sets and scalable UI states.
• Composable micro‑UI patterns: designers will assemble small, reusable control components for modular companion UX across apps and web players.

Real‑world examples and micro case study

Example: a boutique streaming app replaced casting with a QR + cloud handoff flow in late 2025. Results after redesign:

• Pair success improved from 68% to 89% in 30s due to clear QR affordance and fallback code entry.
• Average time to first control decreased by 35% when the app displayed a persistent mini player on pairing.
• Accessibility engagement rose: 12% of users enabled the large control mode, and caption toggles increased 22%.

Practical checklist — ship a prototype in one week

1. Day 1: Map flows (pairing, play, scrub, subtitle). Create FigJam board.
2. Day 2–3: Build control deck components, tokens, and styles in Figma.
3. Day 4: Prototype pairing flows (QR, code, account). Add accessibility variants.
4. Day 5: Device preview + 5 user tests; iterate control sizes and wording.
5. Day 6: Export tokens and SVGs; document API contract for devs.
6. Day 7: Handoff and record a 3‑minute demo video for stakeholders.

Takeaways — what to prioritize next

• Make pairing predictable: give users 2–3 clear ways to connect and a single sentence explaining the safest fallback.
• Design for partial connectivity: optimistic UI and local caching reduce user frustration.
• Build accessible defaults: large targets, caption toggles, and screen reader labels are essential.
• Prototype early and often: Figma interactive components make it fast to iterate micro‑interactions like scrubbing and pairing.

Further reading & resources

• Design tokens: Token Studio for Figma
• Accessibility audit: Figma Able plugin and W3C WCAG 2.1 guidelines
• Low latency control: WebRTC primer and device control APIs
• Motion handoff: Lottie + After Effects for micro animation exports

Call to action

Ready to redesign your second‑screen experience? Start by creating a minimal Figma prototype that includes QR pairing, a companion control deck, and an accessibility mode. If you want a starter Figma file with tokens, components, and the pairing flow already built, download our free starter kit and adapt it for your brand — or reach out for a hands‑on workshop to convert your streaming UX into a resilient, accessible second‑screen product.

Related Reading

• Designing a City-Wide Space Viewing Festival: Lessons from Music Promoters
• When to Trade In Your Phone to Fund a Designer Bag: Using Apple's Updated Trade-In Values
• Where to Stay When Attending a High-Profile Trial or Protest in the Capital
• Tech Stack on a Budget: Using a Mac mini, Smart Lamp, and Bluetooth Speaker to Upgrade Your Counter
• Cooking with Rare Citrus: 10 Recipes Using Buddha’s Hand, Sudachi and Finger Lime