Figma to Framer Website for PadelHub UK by Ali HassanFigma to Framer Website for PadelHub UK by Ali Hassan
Built with Framer

Figma to Framer Website for PadelHub UK

Ali Hassan

Ali Hassan

The agency had the designs ready. They just needed someone who could build the whole thing in Framer before Christmas.

Home page walkthrough, desktop view
PadelHub is a UK-based padel sports brand with multiple locations. A branding agency had finalized the Figma designs and needed the full site built in Framer, fast. The deadline was fixed: everything had to be client-review-ready before the holiday shutdown. Less than two weeks.
The catch wasn't just speed. The site had complex navigation with a centered logo and expanding menu, multiple location pages with different booking links, a blog with pagination, HubSpot form integrations, and a Stripe checkout flow. All of it needed to be fully responsive across desktop, tablet, and mobile.
Figma design vs final Framer build
Figma design vs final Framer build
How I approached it
I didn't start building page by page. I studied the Figma files section by section, mapped out where Framer's structure would need workarounds, and flagged technical constraints early before they became blockers. From there I built everything directly in Framer, sharing live preview links throughout so the agency and end client could review in real time.
The scope shifted mid-project. Blog pagination changed, components got reworked, mobile behavior needed rethinking, and the shop and Stripe checkout were deferred because the end client hadn't provided product data yet. I adapted to all of it without missing the deadline.
Full site overview, all key pages
What I delivered
Built approximately 10 pages from Figma to Framer: Homepage, Play, Membership, Corporate, Blog, Blog Inner Pages, Locations, and Privacy/Policy
Multi-location page system with scalable layouts tied to location-specific booking links
Custom navigation with centered logo and expandable menu logic
Blog structure with pagination and inner pages
HubSpot form integration and booking app link logic
Stripe checkout flow structurally implemented, deferred by mutual agreement
Full responsive behavior across desktop, tablet, mobile, and large screens
Continuous iteration based on agency and end-client feedback
Final build transferred to the client's Framer workspace
Desktop view of home page
Desktop view of home page
The result
The agency presented the site to their end client before the holiday deadline. Core pages were approved for desktop and prepared for launch. The collaboration continued into January, and the agency came back asking for Framer support on their own internal website afterward.

Client Video Testimonial

What the Agency Said After Launch
Below is a recorded video testimonial from the agency team, sharing their experience working with me on the PadelHub Framer build. The feedback covers delivery under pressure, collaboration during rapid iterations, and overall satisfaction with the final outcome.
Client Video Testimonial
Like this project

Posted Jan 29, 2026

Built a fully responsive Framer website for PadelHub from Figma designs, delivered under a tight pre-holiday deadline with multiple live revisions.