Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides

Case Study

How Toss Saves 15,800 Hours per Year by Standardizing Design

Toss is one of the fastest-growing fintech companies in Korea. By switching to Framer they were able to ensure their product could keep up with demand.

Peri Langlois

PL

by Peri Langlois

Peri Langlois

PL

Twitter

Peri Langlois

Product Marketing at Framer.

TwitterFacebookLinkedIn

With more than 1000 employees and counting, Toss has revolutionized personal finance with a stunning all-in-one banking platform. The Toss design team switched to Framer to unify their tooling and design with production-ready components. The newfound prototyping culture, elevated mindsets, and money saved from productivity were just icing on the cake.

By the numbers:

  • 120% increase in prototyping team-wide
  • Increase in tooling Net Promoter Score from 60 to 85 points (by Toss designers)
  • Nearly 15,800 hours saved per year
Toss app

Toss app

From four tools to one

Finding the right design tool can be a challenge. You need something that fits your team’s needs, and unfortunately for many teams, this means adopting a different tool for every part of the workflow. Before Framer, the Toss team was using Abstract, Sketch, Zeplin, and Storybook to go from concept to production. With this toolset, designers and developers were spending far too much time:

  • Deciphering development specifications in Abstract
  • Recreating the same symbols in Sketch
  • Making them look good in Zeplin
  • Trying to see working component interactions in Storybook
Sue Young Kang

SYK

“From now on, we won't use Storybook to check how the component works. Framer answers everything.”

— Sue Young Kang, Platform Designer at Toss

With the switch to Framer, Toss was able to streamline their entire process. No more moving from one tool to another, no more rebuilding, and no more time lost in translation.

An improved mindset, an improved product

Tools are the language of a team and can change the thinking structure of the people who use them. At Toss, this means that a mindset shift towards interactivity followed naturally with the adoption of Framer. Because digital products interact with humans, have context, flow, react, move, and sound, it is difficult to create complete creative solutions only using lists of words and pictures. In order to solve user problems more persistently and fundamentally, you need a tool to convey 200% of the attributes of your digital products.

Interactive design made with Framer

Previously, when Toss tried to implement good prototyping workflows (which tend to require so much more effort), only a few product designers were available for the task.

Sue Young Kang

SYK

“It's already a functioning component when I draw something in Framer since it is composed of code under the hood. It's a waste not to make a prototype as we have a design that works in code. So far the average rate of making prototypes is up 120% more than before and will continue to increase.”

— Sue Young Kang, Platform Designer at Toss

Interactive design made with Framer

Framer enabled:

  • Higher quality prototyping to solve user problems
  • An increased rate of prototyping across the team
  • Validation of solutions easier to ship designs faster

The true cost of productivity

Framer has increased productivity at Toss for designers as well as developers—no more time wasted inspecting design files and no more rebuilding components. Everyone has access to the correct production-ready components for all phases of design, prototyping, and building.

Production-ready components available to everyone

Sue Young Kang

SYK

“According to our estimations, using Framer can save 15,800 hours yearly for our designers and engineers. That's worth 263,200,000 won (220,000 USD) per year.”

— Sue Young Kang, Platform Designer at Toss

And it’s all possible because Framer offers something that no other tool can do—making components with code. Toss uses a design system called TDS (Toss Design System). It doesn't have many components, but it has unlimited possible variant combinations.

For a List component, for example, more than 20,000 design combinations are theoretically possible. It was very difficult to implement design components with these characteristics into existing design tools. Because it didn't work properly with previous design tools, it was very difficult to get the team’s 350 developers to know what option was correct for production.

Sue Young Kang

SYK

“When the text on both sides of the list gets longer, where is the abbreviation? Is it shortened? The developer would have to ask one by one to understand all of these things. Kinds of questions like this won't be necessary after we adopt Framer.”

— Sue Young Kang, Platform Designer at Toss

Framer's Code Components allow development and design tools to be completely 1:1 and maintain product consistency. Meaning less time wasted and more time spent on things that matter. Product designers have been able to focus on product design without spending time identifying TDS component specifications.

Toss product design in Framer

In addition to keeping the 1:1 consistency, Toss could also streamline animations and interactions right in the components. Before, most TDS components had no interaction options and remained static, so even if they were made with Sketch symbols, they could only be roughly recognized. With Framer, interactions can be standardized and processed into easy-to-use forms by designers.

Get your team started with Framer

Equip your team with an interactive design tool that can ensure you ship better products faster. Contact us today for a free demo.

Share this article

TwitterFacebookLinkedIn

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.

Visual

Editorial

How to Code a Website in 2021: A Comprehensive Guide

November 2, 2021

Visual

Guides

What is Mobile-First Design, and How Do You Implement It?

November 2, 2021

Visual

Guides

How to Become a Web Designer in 2021

October 4, 2021

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement