Built with Jitter

GRIT Fitness App Home Screen Design

Jan Mráz

GRIT - Fitness app home screen design process (Figma file inside)

The initial wireframing phase is carried out in Miro, where we make use of its built-in wireframe library to quickly map out the structure and layout of the website. Wireframe library: https://miro.com/marketplace/wireframes/
"Once the wireframing stage is complete, I transition to Figma to begin crafting high-fidelity, pixel-perfect designs. This is where I focus on refining the visual details and applying typography, color schemes, spacing, and components to create a polished and professional interface.
"Finally, to bring the design to life, I use Jitter.video to add smooth and engaging animations. I export the design elements directly from Figma using the Jitter plugin, which makes it easy to animate key components like buttons, transitions, and micro-interactions, enhancing the overall presentation. Plugin: https://www.figma.com/community/plugin/961270034818256057/jitter-animation-for-figma
Timelapse of Fitness iOS app

🎁 Here is the Figma source file to get inspired and duplicate:

Like this project
7

Posted Apr 14, 2025

Designed a fitness app home screen using Miro, Figma, and Jitter.

Atheros Learning Platform - UX & UI Design
Atheros Learning Platform - UX & UI Design
(freebie inside 🎁) How to design iOS app navigation in Figma
From Figma prototype to responsive website with Wix Studio
Ultimate list of 80 UX/UI design resources
Ultimate list of 80 UX/UI design resources