Happy New Year!🎉 This year your business shines…

Happy New Year!🎉 This year your business shines…

Happy New Year!🎉 This year your business shines…

Service Used

Figma to Framer

Client

Andy Lai

Product Design Lead at AI2 Incubator

AI2 Incubator website Framer Development

Converting a complex Figma design into a fully functional Framer website with custom interactions, reusable components, and pixel-perfect responsiveness across all devices.

Animated Gradient in Hero Section

We built a custom animated gradient for the hero section using Framer-native features, ensuring smooth performance while maintaining visual depth and brand consistency.

Reusable & Responsive Gradient Component

The gradient system was converted into a reusable component that could be applied across multiple sections while adapting seamlessly to different layouts and screen sizes.

Nav Menu Desktop & Mobile

A custom navigation experience was built for both desktop and mobile, ensuring clarity, accessibility, and smooth transitions while staying fully Framer-native.

Team Members with Detail Pop-ups

Interactive team cards were created with pop-up modals to display additional information without navigating away from the page, improving user engagement.

Custom Video Playback Experience

A tailored video playback solution was implemented with a custom play button and optimized loading to ensure smooth playback across browsers and devices.

Footer Peel / Reveal Effect

A peel-style reveal interaction was added to the footer to create a subtle yet memorable end-of-page experience while keeping performance and usability intact.

Project Summary

This project involved translating a visually rich and interaction-heavy Figma design into a fully functional Framer website without compromising performance, responsiveness, or maintainability. Every section was built using Framer-native components and interactions to ensure long-term stability and ease of updates. Custom animations, reusable components, and responsive layouts were carefully implemented to scale across devices while preserving the original design intent. Special attention was given to interaction smoothness, content hierarchy, and user experience, especially in high-impact areas like the hero section, navigation, and footer. The result is a polished, production-ready Framer website that feels premium, performs reliably, and remains easy for the client to manage and extend over time.

Key outcomes:

  • Pixel-accurate Figma to Framer conversion

  • Reusable, scalable component system

  • Smooth, performance-optimized interactions

  • Fully responsive across desktop, tablet, and mobile

  • Built Mostly with Framer-native features

Andy Lai

Product Design Lead at AI2 Incubator

"Israr did a great job implementing adjustments to animations and functions as I asked. He even helped troubleshoot when I messed up a component spacing. He is great at quick and quality work when you are tight on time. Thank you!"

Discovery Call

Want to talk about your project?

Schedule a free Meet with us to see if we can help you out with your project.

Discovery Call

Want to talk about your project?

Schedule a free Meet with us to see if we can help you out with your project.

Discovery Call

Want to talk about your project?

Schedule a free Meet with us to see if we can help you out with your project.

Create a free website with Framer, the website builder loved by startups, designers and agencies.