GRIT Fitness App Home Screen Design by Jan MrázGRIT Fitness App Home Screen Design by Jan Mráz
Built with Jitter

GRIT Fitness App Home Screen Design

Jan Mráz

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

Posted Apr 14, 2025

Brought a fitness app home screen to life using Miro for planning, Figma for design, and Jitter for motion.