Overview

2024

Kido partnered with product and design leaders across multiple industries to scale DesignOps, rebuild design systems end to end, and align design with business impact, enabling faster delivery, higher quality, and stronger cross functional collaboration.

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.

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

Skip to impact

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.

While working inside real product files, I identified recurring pain points in component sources and proposed a focused plugin to remove this friction at the source; I then defined a lightweight flow that captures elements from screenshots and specified behaviors that arrange sampled components, generate consistent links and pages, and standardize usage.

The team included:   
Design - Eti Laifer Sharvit and Ido Zaifman.  
Developer - Dmitri Dmitriev

Overview

One Source of truth

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

Core components

Extract the main repeating components.

Foundation elements

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

The Goals

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.

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.

Tidy Mapper

Adoption

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

↑ 4#

Efficiency

Saved on mapping and page generation
per project.

Saved on mapping and page generation per project.

≈ 10h

Enablement

Faster onboarding and more self‑serve work.

↓ 40%

So far, the plugin is being received with real excitement and relief.
Early feedback shows the plugin removes manual guesswork and helps validate component accuracy.
Adoption has been smooth and upbeat, with users reporting faster setup, clearer structure, and higher confidence in the quality of their components and the data they rely on.