Team Stories

How Designer-led Publishing Works at SOOHO.IO: Website Renewal Project

Jul 4, 2025

Author: Samsong | Desing Team Lead

This article was written by Samsong, the lead designer of the SOOHO.IO design team.


1. Introduction


Hello. I am Samsong, a product designer at SOOHO.IO.


In the IT industry, we often face the recurring situation of needing to achieve maximum results within limited time and resources. In a busy environment where multiple projects are running simultaneously, the question of how to work more efficiently is a familiar challenge for everyone.


As we worked on the website revamp project for SOOHO.IO, I would like to share one particular case of how I personally experienced improvements in work efficiency. In this project, we shifted away from the existing Figma-based collaboration method and newly introduced Framer, a no-code web builder.


Using Framer, I was able to experience a different level of productivity, autonomy, and distinct limits and objectives compared to Figma. In this article, I will compare the pros and cons of Framer and Figma from a designer's perspective, discuss which tool was more suited for specific situations in actual projects, and summarize the insights and utilization points gained in practice.



2. Recognizing the need for a change in work methods


Recently, I undertook the website revamp project for SOOHO.IO. This revamp was not a simple renewal. Given the rapid changes in the industry, it required visually redefining the company's new business direction and identity while also serving as a strategic means for leaping forward as a leader in the blockchain fintech industry, hence demanding higher completeness and speed than ever before.


📌 Therefore, I set the following three goals:

  1. Minimal resource input

  2. Quick and quality design implementation

  3. Efficient operation post-launch


The existing collaboration structure of Figma + developers made it difficult to achieve these three goals simultaneously. Hence, there was a need to transition to a structure led by designers from design to publishing, and the choice was the introduction of Framer.



3. Same time frame, different results — Insights from two website revamp experiences


So far, I have participated in two website revamp projects for SOOHO.IO. The first project was conducted through planning and design centered around Figma, collaborating with developers for implementation, while the second involved the introduction of Framer, where designers directly led from design to publishing. These two approaches not only differed in method but also resulted in distinctly different outcomes. The most significant difference was in the quality and performance of the deliverables produced within the same schedule.



First Revamp: Limitations of Figma-based Collaboration


During the initial revamp, I utilized Figma in the familiar way.


After planning and designing, I would hand over the work to developers and request implementation. While this approach was stable and systematic, it showed several limitations in situations requiring quick project progression.

  • Due to differences in interpretation between design and development, intended UI/UX was sometimes distorted or omitted,

  • and interaction or animation elements frequently faced delays or were entirely deprioritized or excluded due to the difficulty of implementation and communication costs.

  • Especially, due to the nature of the waterfalled approach—planning, design, development—bottlenecks often occurred in the latter part of projects, ultimately leading to compromises between design completeness and performance.


As a result, it was challenging for designers to fully convey the intended ideas through actual user experiences.



Second Revamp: A Completely Changed Performance with Framer Introduction


In this project, we maintained the same constraints of limited schedule and personnel but approached it entirely differently with the introduction of Framer. Since the structure did not separate design from implementation and designers were responsible for both, the results were much more flexible and agile.

  • I could implement the intended design and user experience directly,

  • and interaction and animation elements could be incorporated naturally without complex communication.

  • Above all, while using the same resources, we were able to produce results of significantly higher quality.

  • In terms of operation/deployment, maintenance became possible without relying on developers.


The biggest change I felt throughout the project was that design had become not merely a ‘development proposal’ but the final product itself. This represented an environment where designers could implement the brand experience they intended with much greater precision, transcending mere reductions in work time.



4. Specifically, these aspects were beneficial.


The SOOHO.IO website functions as a space to express the company's identity and direction and to convey the brand experience, making it crucial to visually deliver messages persuasively through interactions and detailed presentations. Framer allowed these needs to be directly implemented by designers, and it was an excellent tool enabling the integration of the workflow from planning to deployment as a single design experience, overcoming technical barriers.


Publishing completed with a single click


Advantageous for responsive UI design



1. Immediately publishable workflow


Based on documented plans, I had to handle design, structural design, and functional implementation all by myself, requiring an immediate deployment environment rather than waiting for developer resources. Framer allowed me to publish my designs directly on the screen, resulting in rapid real-time modifications and reflections.


2. Responsive design and variable manipulation are intuitive


I could directly handle responsive UI design suitable for various viewports, and variable tasks like text or color manipulation were intuitive, making it feel as though I was experiencing a web developer's front-end mindset within the tool.


3. No gap between design and deliverables


In the existing Figma-based collaboration, there was always a subtle difference between 'design and actual implementation results.' However, with Framer, 'what is shown' became the final result itself, greatly enhancing satisfaction.


4. High-level interactions and animations can be easily and quickly implemented.


There are moments when animations and interactions are needed to create a persuasive brand experience, and the development resources required for implementation were significant. Framer is designed for designers to implement high-level interactions directly without coding, playing a significant role in maintaining the consistency and quality of the brand message.


5. When does Framer shine? And what are its limitations?


Framer is not a one-size-fits-all solution for every project, but it can be a powerful option in certain situations. For instance, it is very effective for rapidly launching campaigns/events/landing pages, websites where brand experience is crucial, or web services that need to be operated by designers or marketing teams without developer resources.


However, Framer is not a tool that replaces all design and development processes. We still need to build complex products that require high-level development knowledge beyond content-centered websites, such as login, Web3 integration, data processing, and conditional rendering based on user states. In such cases, Framer's technical limitations become evident, and collaboration with developers is essential.


Moreover, in terms of team-based collaboration, component reuse, and version control, Figma remains a stronger choice. Framer is a shining tool when utilized correctly depending on the purpose, but it is also important to be acutely aware of its limitations in usage.



6. Conclusion: The important thing is 'when and how to use it.'


This project was significant beyond merely trying out a new tool. It was my first experience where I led the publishing process, allowing me to learn firsthand the balance between efficiency and completeness. Having experienced both tools, what has become clear is that rather than determining which tool is better, it is more important to choose which tool to use in what situation. Framer and Figma have clearly different strengths, and making the appropriate choice depends on the project's objectives, team structure, and implementation scope.


✅ When to choose Figma

  • If establishing or maintaining a design system is crucial

  • For projects where component reuse is key, such as product-centered B2B SaaS or app UI design

  • In a structure where multiple designers collaborate

  • When developers need to implement the actual product based on the design


✅ When to choose Framer

  • For short-term focused projects like brand introductions, promotions, or event websites

  • When designers need to publish directly and quickly test an MVP

  • For portfolios or marketing pages where visual completeness and interaction effects are important

  • In the early stages of a startup where rapid execution is needed, and developer resources are lacking


📌 Summary:

  • Figma is specialized for 'system-centric design and team collaboration,'

  • Framer is a tool specialized for 'rapid web implementation and enhancing visual experiences.'


When selecting tools, I believe considering criteria like product-centered vs. brand experience-centered, collaboration-centered vs. solo execution-centered, and actual developer collaboration vs. integrated design and deployment can lead to the right choices in most situations. Additionally, considering using both tools in tandem according to project characteristics could also be beneficial. For prototyping, use Framer; for design system or component design, use Figma.


Ultimately, what is important is to continually reflect and try new approaches to achieve better results, while clearly determining 'when and how' to utilize the tools I need.


Thank you.


👉 Curious about the revamped website of SOOHO.IO?: https://www.sooho.io/


SOOHO.IO Official Channels