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
