linkedin.com

#configmakeathon #figma #figmamake #react #vite #typescript | Grecia Valentina Pernía Valero

Introducing Focus Time! 🧠 Excited to share my submission for the Figma × Contra for the #ConfigMakeathon Focus Time turns your focus sessions into a game. It’s designed with neurodiversity accessibility in mind, especially for ADHD users, but works for anyone who struggles with distraction, motivation, or just getting started. 🔗Live URL: https://lnkd.in/eZkBeKgS 🔗Figma Community link: https://lnkd.in/eRneHtN8 What it does🧠 You build a personal pinboard: a mood board with sticky notes, bullet lists, checklists, stickers, and images that stays visible while you work. The checklist you add there automatically connects to the timer. When you’re done designing your pinboard, you click Done and a snapshot is saved locally. That same image appears as your wallpaper during the focus session, keeping your goals in sight. The timer runs in two modes: standard count-up (better for ADHD no interruptions) and Pomodoro (25 min focus / 5 min rest, for neurotypicals or structured workers). During the session, motivational pixel-art speech bubbles appear on screen every 20 minutes, reminding you to hydrate, stretch, rest your eyes, and avoid your phone with a subtle retro sound. Every time you complete a task, a celebration bubble appears too. Scoring system🧠 When you stop the timer, you’re asked how you’re feeling. That mood, combined with your focus time, task completion rate, and session behavior, generates a full stat breakdown: HP: Health balance (hydration, rest, session length) MP: Focus quality (work/rest/distraction balance) STR: Strength (how well you managed distractions) MOT: Motivation (mood balance throughout) WIS: Wisdom (how much of your checklist you finished) DET: Determination (the sum of STR + MOT + WIS) Sessions under 20 minutes get heavily penalized. The scoring is intentionally designed to reward sustained, balanced work over quick bursts. Sharing After each session you get an overall score card. You can export it as PDF, download it as an image, copy a plain-text summary, or share directly to X, Bluesky, LinkedIn, WhatsApp, Telegram, Reddit, Threads and more. You can also send it by email: it opens your mail client with the subject and body pre-filled with all your metrics. Tech Built with #Figma and #FigmaMake using #React + #Vite + #TypeScript. No backend, no database, everything runs locally in the browser using localStorage. Images are drawn to canvas for download. Fully client-side. Check out my post on Contra! 🔗https://lnkd.in/e6RBEtw6