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

Posted Apr 14, 2025

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

10 AI workflows I really use in Figma
(freebie inside 🎁) How to design iOS app navigation in Figma
From Figma prototype to responsive website with Wix Studio
Quantum VPN App UX/UI Breakdown
Quantum VPN App UX/UI Breakdown

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc