Chat Builder

About this plugin

✏️ Please, drop your suggestions in the comments! It'll help make the plugin even better and more useful.

This plugin allows you to create chat frames with sender and receiver message bubbles, as well as date separators, for designing realistic messenger UIs in Figma.

You can customize the style and properties of the parent components to fit your design needs.

🤓 How it works:

Set the frame size by specifying the width and height.

Use the "+ Sender", "+ Receiver", and "+ Date" buttons to add message bubbles and date separators.

Enter your text in the message bubbles or date separators.

Click "Create chat frame" to generate the chat UI frame with your specified messages and separators.

Customize the style of the parent components for message bubbles and date separators.

📔 How it works with customizable styles:

Adjust the style and properties of the parent components for sender, receiver, and date separator messages.

Style changes in the parent components will reflect across all instances within the frame.

✏️ Usage tips:

Use the "Remove" button next to each message bubble or date separator to delete it if needed.

Ensure the text content of messages and dates is appropriately entered before creating the frame.

This plugin simplifies the process of designing chat interfaces, saving you time and ensuring consistency in your UI designs. Start creating realistic chat frames in Figma today!

Made by Sergei Gotlsov