Firefly: Let's bring your circle a little closer today

• 

• 

  Design system

Inspiration

In a world of "infinite scrolls", we’ve lost the quiet spaces meant for just two people. This project started from a deeply personal place: being far away from my own family. Living apart, I realized that standard messaging apps often feel transactional or overwhelming. You’re either stuck in a chaotic group chat or sending "How are you?" texts that don't quite capture the warmth of being in the same room. I wanted to build something that felt less like a social network and more like a digital hearth - a place that replicates that "silent company" you feel with a sibling or parent.

What it does

Firefly is a sensory connection app for best friends, siblings, and families. It uses a 1-minute daily ritual to keep relationships glowing. Bento Grid Dashboard: A high-end, modular home screen that tracks your "Streak" and "Firefly Brightness." Emotional Sensing: The app visualizes your connection; the more you engage, the brighter your shared firefly glows. Tailored Rituals: Whether it’s a "Childhood Nostalgia" prompt for siblings or a "Mood Check-in" for long-distance best friends, the content adapts to your specific relationship.

How we built it

The technical and creative heart of Firefly was built using Figma's most advanced prototyping tools to ensure the "sensory" experience felt real.

Modular Architecture: We implemented a Bento Grid system to create a balanced, high-end dashboard. This allowed us to display complex data - like streak counts, emotional brightness, and mood check-ins - without overwhelming the user.

Advanced Motion Design: We used Figma Smart Animate with custom easing to create the "breathing" effect of the firefly and the "flash" of the daily ritual completion.

Variable-Driven Personalization: We utilized Figma Variables to allow users to name their partner and choose a relationship type (Sibling, Friend, or Family), which dynamically updates the app's color palette and prompt database.

** Challenges we ran into**

The primary challenge was finding the "Quiet Design" balance. Early versions had a "dancing" firefly that was too distracting; we had to iterate multiple times to make the mascot feel like a steady, comforting presence (similar to the minimalism found in the Candle app).

Technically, building a Bento Grid that feels cohesive on a small mobile screen while maintaining functionality for every tile was a hurdle. We had to ensure the "1-click emoji mood check" and the "Daily Ritual" button were easily accessible while keeping the layout visually interesting. Additionally, pivoting from a "neon/tech" aesthetic to a "warm/human" one required a total overhaul of our color systems and typography midway through the design-a-thon.

** Accomplishments that we're proud of**

Bridging the Gap: Our greatest pride is that we successfully built a tool that bridges the emotional gap for people living far from their loved ones. As someone living away from family, I know that standard apps often make the distance feel greater. Firefly bridges this gap by turning "checking in" into a warm, sensory experience rather than a chore.

What we learned

Designing for Silence, Not Just Noise We learned that in a world of constant notifications, the most powerful interaction is often the quietest. By studying the minimalist approach of apps like Candle, we learned how to strip away "feature bloat" and focus on a single, meaningful signal: the Firefly glow. We discovered that a well-designed Bento grid can provide high information density while still feeling calm and spacious.

The Power of Personal Stakes Building Firefly taught us that the best products come from personal pain points. Because I am away from my family, I learned to view UI/UX through the lens of "emotional utility." We learned that a button isn't just a trigger for a function - it’s a digital handshake or a hug. This realization shifted our focus from "how many features can we add?" to "how much closer can we make these two people feel?"

Constraint as a Creative Catalyst Working within the FigBuild 2026 constraints pushed us to master Figma’s advanced prototyping features. We learned that variables and conditional logic are the bridge between a static design and a "living" app. Mastering these tools allowed us to simulate a complex "emotional sensing" engine that actually feels responsive to user behavior.

Empathy-First Gamification We learned a major lesson about streak culture. Traditional streaks can feel like a burden or a source of anxiety. We learned that by shifting the visual metaphor from "burning out" to "dimming light," we could create a more empathetic form of gamification that supports mental wellness rather than demanding constant attention.

What's next for Firefly: Let's bring your circle a little closer today

The future of Firefly includes haptic feedback rituals and integration with shared photo widgets. We want to move beyond the screen and into the home, making "Emotional Closeness" a metric that people value as much as their daily step count.

Built With

• css
• javascript
• lucidereact
• motion
• pnpm
• react
• tailwind
• unsplash
• vite