This AI prompt composer UI for Figma gives you the message box of a chat app in four ready states: empty, typing, files attached and generating. This is the light version, with a soft grey page and white cards.

What is included

• A rounded composer card with an attach button, Search and Think toggles, a model picker, a mic button and a send button
• Four states side by side: empty, focused with thinking on, two attached files, and a stop button while the answer is written
• File chips for a PDF and an image with the name, size and a remove icon
• Six suggestion chips such as Draft an email and Explain this code
• A centered header with a gradient AI mark and a short welcome line

Where to use it

Use it for chat apps, AI assistants, writing tools, support bots and any product where people type a prompt and press send.

Design notes

The send button is grey while the box is empty and indigo once there is text. During generation it becomes a dark stop button. The on state of a toggle uses a soft indigo fill and a colored label, so it does not rely on color alone. 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.