Inapp Inbox Notifications

Building Figma-like In-App Inbox For Your Collaborative Design and Prototype Application (With production-grade code)

Nikita Navral
January 22, 2024

Effective collaboration is fundamental for the success of any design project, and drawing inspiration from industry-leading tools like Figma, we aim to empower designers and collaborators with the tools needed to enhance team efficiency and communication. By delving into the intricacies of crafting an intuitive In-App Inbox like Figma, we'll explore the underlying design, user interactions, real-time architecture, and the real-world use cases that drive its development.

Inbox Design Layout

This section examines the user interface (UI) and user experience (UX) design principles applied to the Figma In-App Notification Center, shedding light on the solutions it offers for various use cases. You can take inspiration here for your own workflow management application and implement it seamlessly with SuprSend. You can also checkout how to build a Slack like app inbox and JIRA like app inboxes.

We provide you with 2 easy options to get started with a Figma-like app inbox design:

  1. Beautiful inbox designs with pre-built UI components
  2. Build your own UI using headless components

Using default designs with pre-built UI components

Access Figma like in-app inbox notification feed templates. Clone these templates with a single click from here - Figma In-app Inbox Notification Center Design. SuprSend provides UI components for you to drop a ready inbox in your application right away. Your time-to-live (TTL) can reduce drastically (upto 85% savings) when you use a third party inapp inbox solution like SuprSend.

Using Headless Components

The Headless Inbox library provides hooks that can be integrated into your application for building custom UI for inbox and toast functionality. You can find it here - React (Headless) | React Native (Headless) | Flutter (Headless)

UI/ UX of Figma Notification Center

The Figma Notification Center features a popover inbox design, which is one of the three types of popular in-app feed styles. It displays upto 50 latest notifications. You can check out this Figma outline for the rest two types of inapp inbox design.

Let's check out the UI components used in the Figma notification center, which makes it one of the best user engagement tools.

Figma inapp inbox notification design

The corresponding UI markings represent these elements.

No. UI Component Description
1 Bell Icon Icon indicating the presence of notifications and numbers.
2 Notification Header Header section providing an overview of notifications.
3 Mark All as Read Option to mark all notifications as read.
4 Notification Row Individual row representing a single notification.
5 Unread Dot Indicator Visual indicator (typically a dot) highlighting unread notifications.
6 Buttons Buttons for interacting with notifications (e.g., accept, decline).
7 Avatar Small user or entity image associated with the notification.
8 Title Title indicating the nature of the notification.
9 Content / Body Main content or message of the notification.
10 Subtext and Timestamp Additional information or context for the notification along with the timestamp.
11 Thumbnail Descriptive image for message on the right side.

Figma's In-App Inbox Addresses Key Use-Cases

A robust workflow management application caters to complex use-cases. Checkout the diverse use-cases addressed by Figma's In-App Inbox, providing streamlined solutions for enhanced project management, communication, and collaboration within a single interface.

Notification Table Example
Category Notification Type Trigger Events
Task Management File Adding someone to the current file for sharing/editing.
Project Adding someone to the complete project.
Team Bringing one or more members into a team.
Collaboration Comment Notifications Comments added to files.
Mentions and Tagging Get notified when you are mentioned or tagged in file or project.
System Notifications System Alerts Get alerted about system updates, maintenance, or critical issues.
Product Updates New Features Be informed about new features, updates, or improvements in JIRA.

Technical Architecture & Implementation for Real-Time Inbox

Once you understand the design aspects of the Figma in-app notification center, it’s time to head towards its technical architecture, which would sit in your codebase. While various tools are available for building a basic in-app notification center, SuprSend distinguishes itself by exclusively employing industry-leading and secure tools to deploy a robust and real-time app inbox, similar to Figma.

The overarching architecture relies on backend-triggered events, a queuing system, high performance database, and real-time connection with client. To make it more comprehensive, you can even setup observability tools and webhooks. Here’s how SuprSend uses state-of-the art in-app inbox system to power more than 50 million notifications every day without fail.

SuprSend App Inbox Technical Architecture

  1. Notifications triggered by events from the client system's backend.
  2. Events processed by the authentication worker.
  3. Events move through SQS queue and interact with the inbox service.
  4. Messages stored in Elastic Search database.
  5. Real-time updates on the client side achieved through technologies like WebSocket.
  6. Users see new messages in real-time without manual page refresh or reopening the app. We currently offer support for React, Angular, and Flutter, providing ongoing maintenance and updates.
Explored the robust technical setup of an in-app inbox center? Now, put it to the test with our straightforward 2-step integration guide. For a detailed look, head over to our Github repository.

Steps to implement Figma like in-app inbox

Workflows & Logic Setup

While we've covered the design and technical aspects of in-app inboxes, a seamless user experience requires more than that. Building robust logic and workflows for each trigger and notification is crucial for optimal user engagement. Our assistance extends beyond design and technical setup—we empower you to establish intelligent workflows either through API integration or directly from our user-friendly dashboard.

Being a robust workflow automation tool, Figma seamlessly handles diverse notification use cases, as outlined earlier. Yet, the challenge surfaces with potential variations in codebases for these scenarios, each with its unique events, triggers, and notification flow logic. The need to achieve synchronous orchestration becomes crucial, and therein lies the role of SuprSend's workflow orchestration layer. It emerges as the solution to seamlessly set up complex notifications akin to Figma.

How SuprSend Workflow APIs help?

  1. Codebase Independence: The entire workflow logic is maintained outside of your codebase, allowing your team to easily iterate and refine for optimal user engagement.‍
  2. Quick Integration: Setting up Figma-like notifications with SuprSend is a breeze. Utilize a single API call for all channels and integrate with our Frontend SDK for inbox. Trigger events for user actions such as new comments or added tasks to SuprSend.‍
  3. Real-time Monitoring: Track notification status as they are sent with real-time logs, and assess performance over time using unified analytics.

The potential of SuprSend workflows lies in its capability to handle intricate notification logic. For example, you can add batching and channel routing to your “New user comment” workflow for a superior user experience. 

  1. Batching: In a typical scenario, if you are sending individual notifications for every comment and all stage movements on a task, it can get quite frustrating for the user. Consolidate multiple events into one notification for a superior user experience, preventing notification overload. Figma does it for many use-cases including multiple comments on a single ticket.
  2. Channel Routing: Avoid overwhelming users by sending notifications on all channels simultaneously. Implement smart channel routing to send emails only to inactive users who haven't read the Inbox notification.

Sample Workflow Creation & Execution

Let’s create a Figma-like workflow in the next 2 minutes using SuprSend's Node.js SDK. In this example, when a user comments on a task in a workflow management application, SuprSend's Node.js SDK, integrated into the tool's backend, triggers an event code. This event code, in turn, executes the associated event 'New comment on task' workflow. You can configure this workflow either directly on SuprSend's dashboard or through our Workflow API.

Code Container Example
        const {Suprsend, Event}=require("@suprsend/node-sdk")
        const supr_client = new Suprsend("_api_key_","_api_secret_");
        const bulk_ins = supr_client.bulk_events.new_instance()
        const distinct_id = "5be-ft3-xxxxx"
        const event_name = "New comment on task"
        const properties = {
            "recipient_list": ["74d-ed2-xxxxx","9ie-gh2-xxxxx"],
            "commented_at": "2023-11-04 09:00 UTC",
            "commenter_name":"Nicole kenzie",
            "comment":"If you have any questions, you can reach out to Grace!",
            "issue": {
                "id": "Dev-1",
                "name": "Full Fledged integration with new payments provider",
                "stage": "To Do",
                "type": "bug"
        const event = new Event(distinct_id, event_name, properties)
        const response = bulk_ins.trigger()
        response.then((res) => console.log("response", res));

To setup the workflow from the dashboard, head to 'Workflows' after signing up on the platform. You can use the intutive drag-and-drop functionality to interact with the steps in workflow.

Workflow with Batching & Smart Routing

And this doesn’t end here. SuprSend goes beyond by allowing you to tailor your notification strategy according to user preferences, mirroring Figma's user empowerment.

  1. Customizable Preferences: Empower your users to define their preferred notification category, channel, and frequency like Figma.
Figma customer preference setup

  1. Ready Preference Center: SuprSend provides a fully customizable, embeddable preference center that you can effortlessly embed in your product in just an hour. To design your users' preference center, refer to our blog.
User Preferences setup via SuprSend

Setting Templates

You can design beautiful templates directly on SuprSend dashboard using intuitive form editors, decoupling them from your codebase. In SuprSend, content for all channels (Inbox, SMS, email, slack, teams, WhatsApp, and push) is grouped under a single template group for simplified management. Begin with one channel, like in-app inbox, and seamlessly add more channels without altering your workflow logic or notification triggers.

Design and Publish Templates

  • Refer to the form editor tool to design a 'New Comment' template with HandlebarsJS for personalization.
  • Preview templates and send test notifications.

Figma and other inboxes typically have these elements in their inbox layouts, which you can leverage via SuprSend:

  • Header: Single-line message text; use HandlebarsJS for variables.
  • Avatar
  • Subtext
  • Text: Multi-line message text; use HandlebarsJS for variables.
  • Action Buttons: Add dynamic URL for user redirection
  • Advanced Configuration: Get optional JSON field on SuprSend editor for extra data customization, which may include custom click handling upon action.

So, is it done?

Creating a real-time in-app inbox is time-consuming to build, along with crafting an exceptional notification experience. Product teams must work hard to experiment and deliver the best notification experience to their users. However, building an extensive notification system involves extra development efforts, managing an additional codebase, and monitoring for issues and analytics. This grunt work can divert developers from their core tasks and may not align with their preferences. That’s where we help you directly.

  1. Channel Inter-operability: Create events for your app-inbox workflow once, and effortlessly extend them to various notification channels like Slack, email, SMS, push, Whatsapp, and more without any coding configuration. ‍
  2. Channel Routing:  Imagine a scenario where the user is offline, missing out on crucial app inbox notifications vital for engagement. With our channel routing layer, you can designate alternative channels to try if the user hasn't checked the message in their app inbox within a specified time frame.‍
  3. CDP & 3rd Party Integrations: Many businesses rely on platforms like Segment and Mixpanel to collect data from their digital properties. With our seamless integration with these event tracking platforms, effortlessly send your clickstream data to our servers, ensuring smooth notification triggers.‍
  4. Security & Compliance: Rest easy with our SOC 2 certification, ensuring top-notch data security on our servers. Our track record boasts zero data breaches, and we're committed to maintaining this standard. Additionally, we uphold GDPR and HIPAA compliance, backed by certifications.
Written by:
Nikita Navral
Co-Founder, SuprSend

Implement a powerful stack for your notifications

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.