This document aims to assist Korean users learning Framer by translating relevant international articles into Korean and adding practical information for real-world application. We hope to offer some help to users of Framer.

Today’s story introduces how Razorpay adopted Framer, enabling both designers and non-designers to efficiently create pages, resulting in a tenfold increase in productivity.

Razorpay, a rapidly growing fintech company in India, had a website visited by millions, yet it took two months to create landing pages due to an inefficient structure. A system for rapid iteration and experimentation was desperately needed.

What were the issues?

The delays in landing page creation were due to the following reasons:

• Excessive Optimization: High visitor numbers led to repeated decision reviews, wasting time.

• Numerous Stakeholders: Involvement from various teams such as marketing, design, product, and development extended the feedback process.

• Duplicate Work: Lack of communication resulted in repeatedly creating similar designs.

Collaboration among designers, writers, and developers slowed down execution speed. A system was needed to maintain brand consistency and quality while enabling fast execution. They began considering no-code tools like Framer instead of developing custom solutions.

Razorpay’s Problem Solving Process

Identifying Information Structure Patterns

By reviewing existing Razorpay landing pages, they identified repeated patterns in section structure (hero, pricing, testimonials, product descriptions, etc.). Analyzing competitor pages also revealed industry trends, allowing the design of repeatable templates based on this analysis.

Building a Scalable Design System

• Defining System Components
  Split components into a hierarchy: Color & Type Styles → Component → Section → Full Page. As a result, colors and typography were fixed as immutable tokens, and components and sections were used as basic units.

• Tool Selection: Framer
  They tested Webflow and WordPress, but Framer was optimal as it was easy for marketers to use, along with designers. While Webflow was preferable for technical control, Framer excelled in rapid iteration and efficient workflow.

Design System within Framer

• Color and Text Styles: Defined 40 text styles and over 120 color styles.

• File and Folder Structure: In an environment where 80 designers worked simultaneously, they operated business-specific folders, separated experimental/live projects, and maintained a central design system file.

• Grid & Responsive Settings: Established three breakpoints (1200px for desktop, 810px for tablets, 360px for mobile) to ensure consistent responsiveness.

Template Design Approach

• Component Templates (e.g., selectively exposing logos or photos in a customer testimonial card)

• Section Templates: Developed over 40 section templates such as product information and lead collection with automatic response functions. A central team of five designers pre-approved templates and maintained guidelines, ensuring all pages were based on these templates to maintain brand consistency.

Changes After Razorpay’s Adoption of Framer

• Execution Speed Improved 7x: Eliminated the Figma-to-dev process, allowing immediate publishing without developers.

• Increased Creativity: Less time spent on repetitive tasks, more on interactive experiments.

• 25% Increase in Conversion Rate: Improved outcomes through rapid iteration and experimentation.

• Improved Crisis Response: Able to open pages within a day, thanks to preset templates.

Challenges and Solutions

1. Lack of Central Library Support for Color/Type Styles

Framer does not yet provide a fully "Shared Style Library" like Figma for automatic synchronization across projects.

• Practical Usage: As in the Razorpay case, it’s typical to create a "style-only template project" with defined color and text styles and clone the file for new projects.

• Drawback: Later changes to the original styles aren’t automatically applied to cloned projects; manual consistency is required.

2. Difficulties in Template-Based Layouts

Framer is very convenient for typical section templates or responsive component setups, but complex structures still face template limitations (e.g., tab structures).

• Simple clone components can’t easily handle structures like tabs, accordions, and dynamic filtering.

• Therefore, Razorpay copied pre-made tab layouts and followed guidelines when making modifications.

Original article by: Apoorva Agrawal
Date: February 11, 2025

This article is based on the Framer-related article “Hacking Growth & Scalable Web Design with Framer: A Razorpay Case Study”, with some sentences directly quoted from the original, and other contents restructured around explaining and interpreting Framer’s features.