Bukalapak

2022

Figma

Product Design

Standardizing Figma File for Bukalapak

Standardizing Figma File for Bukalapak

Overview

Overview

During my time at Bukalapak starting in 2021, I noticed a significant issue: each designer had their own way of organizing Figma files, making it hard for stakeholders to find the latest design updates efficiently.


Check out some examples here:


Moreover, navigating through Figma to find specific designs was cumbersome, lacking clear indicators.


In mid-2022, we hosted an Unfiltered Feedback Session where designers and researchers shared insights. This session revealed a common complaint about the messy and inconsistent structure of Figma files. This feedback prompted us to standardize the Figma file structure.


The previous structure also made it tough for new team members. With designs spread across different sections, it was difficult to find specific features, leading to confusion about the file's organization.


Furthermore, performance became an issue with all designs in one file. With thousands of artboards and frames constantly being edited, some computers struggled to handle the load, resulting in slow loading times.


To tackle these problems, I took the lead in exploring solutions, as there was no dedicated DesignOps function. Through discussions with the design team, I looked into various methods to improve Figma organization, drawing inspiration from industry leaders like Spotify and Uptime.


A common suggestion was to divide the design file based on user journeys, separating live designs from exploration phases. This approach aimed to archive exploratory work for future reference, streamlining the design process and improving file performance.

Moreover, navigating through Figma to find specific designs was cumbersome, lacking clear indicators.


In mid-2022, we hosted an Unfiltered Feedback Session where designers and researchers shared insights. This session revealed a common complaint about the messy and inconsistent structure of Figma files. This feedback prompted us to standardize the Figma file structure.


The previous structure also made it tough for new team members. With designs spread across different sections, it was difficult to find specific features, leading to confusion about the file's organization.


Furthermore, performance became an issue with all designs in one file. With thousands of artboards and frames constantly being edited, some computers struggled to handle the load, resulting in slow loading times.


To tackle these problems, I took the lead in exploring solutions, as there was no dedicated DesignOps function. Through discussions with the design team, I looked into various methods to improve Figma organization, drawing inspiration from industry leaders like Spotify and Uptime.


A common suggestion was to divide the design file based on user journeys, separating live designs from exploration phases. This approach aimed to archive exploratory work for future reference, streamlining the design process and improving file performance.

Process Overview

Process Overview

Even the most meticulously designed interfaces can lose their impact if they’re buried in a labyrinth of disorganized Figma files

  1. Identifying the Problem: Recognizing the challenges posed by disparate Figma file structures and the impact on stakeholder collaboration and efficiency.

  2. Research and Insights: Conducting an Unfiltered Feedback Session in mid-2022 to gather insights from designers and researchers regarding the cluttered and inconsistent Figma file structures. Additionally, researching industry best practices from companies like Spotify and Uptime to inform potential solutions.

  3. Design Exploration: Explore various approaches to organizing Figma files, including segmenting files based on user journeys and distinguishing between live designs and exploration phases.

  4. Implementation: Implementing the standardized Figma file structure, incorporating feedback from stakeholders and leveraging best practices to enhance navigation, organization, and performance.

Key Contribution

Key Contribution

Experiment with different templates, iterate based on feedback, and fine-tune the structure until it seamlessly integrates into our team’s workflow

Experiment with different templates, iterate based on feedback, and fine-tune the structure until it seamlessly integrates into our team’s workflow

Experiment with different templates, iterate based on feedback, and fine-tune the structure until it seamlessly integrates into our team’s workflow

Identified the need for standardization in organizing Figma files to improve collaboration and efficiency.

  • Conducted research sessions and benchmarked industry best practices to inform the design process.

  • Improved navigation, organization, and performance of Figma files, resulting in enhanced stakeholder satisfaction and productivity.

Result and Impact

Result and Impact

By prioritizing organization and communication, we pave the way for smoother workflows and more impactful design outcomes

By prioritizing organization and communication, we pave the way for smoother workflows and more impactful design outcomes

By prioritizing organization and communication, we pave the way for smoother workflows and more impactful design outcomes

Streamlined the design process by implementing a standardized Figma file structure, reducing confusion and inefficiencies.

  • Enhanced stakeholder collaboration and productivity by improving navigation and organization within Figma files.

  • Received positive feedback from team members and stakeholders on the improved usability and performance of Figma files.

How to start your projecet at Bukalapak