This document is intended to help domestic users who face difficulties due to a lack of Korean materials while learning Framer by translating Framer-related articles from abroad into Korean and adding practical information. We hope this will be of some assistance to those using Framer.

Today, we introduce the story of 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 that was a vital marketing asset with millions of visitors, but the inefficient structure took two months to create landing pages. An agile system for quick iteration and experimentation was sorely needed.

What was the problem?

The reasons for delayed landing page creation were as follows:

• Excessive Optimization: Due to the high number of visitors, time was wasted by repeatedly reviewing each decision.

• Many Stakeholders: Involvement from marketing, design, product, and development teams extended the feedback process.

• Redundant Work: Lack of communication led to the repeated creation of similar designs.

Collaboration among designers, writers, and developers was necessary, which slowed down execution speed. A system that maintains brand consistency and high quality while enabling fast execution was needed. Instead of developing a custom solution, they began considering no-code tools like Framer.

Razorpay's Problem-Solving Strategy

Identifying Information Structure Patterns

By reviewing Razorpay's existing landing pages, we identified repeating patterns in section structures (hero, pricing, testimonials, product descriptions, etc.). Competitor pages were also analyzed to understand industry trends, leading to the design of repeatable templates.

Building a Scalable Design System

• Defining System Components
  Color & Type Styles → Components → Sections → Entire Pages Components were categorized in this hierarchy. Ultimately, colors and typography were fixed as non-modifiable tokens, while components and sections were used as basic units.

• Tool Selection: Framer
  Though Webflow and WordPress were also tested, Framer was optimal as it was easily manageable by marketers as well as designers. While Webflow was better where technical control was needed, Framer excelled in quick iteration and efficient workflow.

Design Systems within Framer

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

• File and Folder Structure: Managed folders by business segment, distinguished experiments/live projects, and maintained central design system files in an environment with 80 designers working simultaneously.

• Grid & Responsive Settings: Established three breakpoints at 1200px (desktop), 810px (tablet), and 360px (mobile) to ensure overall responsive consistency.

Template Design Approach

• Component Templates (e.g., optionally showcasing a logo or photo in customer testimonial cards)

• Section Templates: Automated responsive elements for recurring features like product information and lead generation, establishing over 40 section templates in advance. A central five-person design team pre-approved templates and maintained guidelines, ensuring all pages were consistently created based on these templates to uphold brand consistency.

Changes Post Framer Implementation by Razorpay

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

• Enhanced Creativity: Freed from repetitive tasks, allowing more time for interactive experiments.

• Conversion Rate Increased by 25%: Improved performance through quick iteration and experiments.

• Improved Crisis Response: Pre-set templates enabled page opening within one day.

Challenges and Tasks Ahead

1. Lack of Central Color/Type Style Library Support

Framer does not yet offer a feature to automatically synchronize "Shared Library" styles across projects like Figma does.

• Practical Use Case: Like in the Razorpay case, it is common to create a "style-only template project" with defined color and text styles, and duplicate this file when starting new projects.

• Drawback: Even if the original style changes, the duplicated project won't auto-update, requiring manual maintenance for consistency.

2. Template Challenges for Complex Layouts

While Framer is very convenient for general section templates or responsive components, it has limitations in templating complex structures (e.g., tab structures).

• Structures like tabs, accordions, and dynamic filtering are difficult to handle flexibly with simple clone components.

• As a result, Razorpay also operated by copying tabs made in advance and adhering to guidelines for 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 text, while the rest is restructured focusing on explanations and interpretations of Framer's functions.