01

Overview

01

Overview

Product

Workflow Optimization

Plugin

From Opportunity to Impact

The studio’s system first approach covered strategy through execution, including workshops, roadmaps, Figma foundations, contribution flows, and development handoff, so teams could ship with confidence and consistency.

Timeline

Q3 - Q4 2023

Role

Product Designer

Project type

Workflow Optimization

Skills

Discovery

Ideation

Product

User flows

Team

Design - Eti Laifer Sharvit and Ido Zaifman.


Developer - Dmitri Dmitriev

Context

As part of the work process we are creating a mapping tree of the product.
We do it by making a screen shot from the product screen intentionally to achieve the following goals

As part of the work process we are creating a mapping tree of the product. We do it by making a screen shot from the product screen intentionally to achieve the following goals

Role

As part of the working hands-on on the design system , I have contribute design initiatives (view tidy mapper plugin), building the road map, Conducted user and system research, lead Figma and design system workshops and Managing the project.

01

Overview

01

Overview

One Source of truth

One Source of truth

One Source of truth

Have a “hard copy” of the existing flows of the product.

Have a “hard copy” of the existing flows of the product.

Core components

Core components

Core components

Extract the main repeating components.

Extract the main repeating components.

Foundation elements

Foundation elements

Foundation elements

Extract the brand’s core colors, typography, and spacing.

Extract the brand’s core colors, typography, and spacing.

02

The Goals

02

The Goals

As we worked on pulling out the core components, we came across a few issues we had to deal with

As we worked on pulling out the core components, we came across a few issues we had to deal with

No indication of the component’s source location.

Lack of visual hierarchy and organization.

Component sizes weren’t consistent, which made it hard to tell what was actually big or small.

03

The Problem & the opportunity

03

The Problem & the opportunity

These pain points led us to create an automation that offers a quick and easy fix and that’s how the 

Tidy Mapper plugin was born.

With Tidy Mapper, we can easily highlight the components we want to map and organize them with clear order and logic.

So how it works?

By using Figma’s ‘Slice’ command and pre-selecting the component type, the plugin generates a page named after the component.

If additional components of the same type are sampled, the plugin arranges them in order and adds a link back to their original location.

04

Tidy Mapper

04

Tidy Mapper

Adoption

Adoption

Adoption

At launch, the plugin was adopted by four projects and has continued in active use since.

At launch, the plugin was adopted by four projects and has continued in active use since.

At launch, the plugin was adopted by four projects and has continued in active use since.

↑ 4#

↑ 4#

↑ 4#

Efficiency

Efficiency

Efficiency

Saved on mapping and page generation
per project.

Saved on mapping and page generation
per project.

Saved on mapping and page generation per project.

≈ 10h

≈ 10h

≈ 10h

Enablement

Enablement

Enablement

Faster onboarding and more self‑serve work.

Faster onboarding and more self‑serve work.

Faster onboarding and more self‑serve work.

↓ 40%

↓ 40%

↓ 40%

Early feedback shows strong enthusiasm for the plugin, noting easier setup, clearer structure, and greater confidence thanks to reduced manual work and improved accuracy.

05

End result & real impact

05

End result & real impact