This AI voice assistant UI for Figma gives you three phone screens: listening, speaking with captions, and voice settings. This is the light version, with a soft grey page and white cards.

What is included

• A listening screen with a glowing orb, a waveform, a live transcript and mic, end and keyboard controls
• A speaking screen with captions, quick reply chips and pause and interrupt controls
• A voice settings screen with four voices, a speed slider and two toggles
• A status bar and home indicator on each 390 by 844 screen
• Large 56 and 72 px controls that are easy to tap

Where to use it

Use it for voice chat apps, in car assistants, language tutors and any mobile product that talks.

Design notes

The orb uses three soft rings and a gradient core, so it works as a loading and speaking indicator. Captions are on by default and can be switched off in settings. The end button is red and the main mic button is indigo. The light theme uses a #F4F5F9 background, white cards, #12141C text and an indigo #5B5BF0 accent.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. The file uses Plus Jakarta Sans, both free on Google Fonts, and every color is a fill you can change in the fill panel. Text pairs stay above 4.5 to 1 contrast.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same. All names and numbers in the file are sample content.