Ali DibOpen to new roles

WorkFusionX

FusionXFigma plugin suite for an enterprise design system

Seven tools in one Figma plugin that automate the slow, repetitive and error-prone work of keeping a large design system and its product files consistent. A full client rebrand went from weeks to about 20 minutes.

Client
KUBRA
Role
Solo: concept, design and development
Type
Design tooling
Scope
Product design, Design system audit, Plugin development, DesignOps
Year
2026
~20 min
To rebind a full project’s colours to a new client. It used to take weeks.
7
Tools in one plugin, replacing three separate ones
5
UI designers on the team used it in their daily work
Solo
My idea and initiative, designed and built end to end
Three FusionX plugin panels side by side: the Action recorder, the home screen listing all six tools, and the Insert tool

01 · The problem

A growing system, maintained by hand

KUBRA’s design system powered billing and payment apps for utilities and enterprise clients. As it grew, keeping product files consistent with it became slow, manual and risky.

  • Rebranding per client. Every customer needed the apps in their own brand. That meant redoing tens of thousands of colour bindings across live project files, which was impossible by hand.
  • Repetitive production work. Designers spent hours repeating the same edit across dozens of screens, placing cursors and tooltips, and marking updates for review.
  • Quality gaps before handoff. Nothing reliably caught missing hover pointers, broken variables or hard-coded colours before developers saw the files.
  • Too many tools. Three separate plugins meant more context switching, and more for new designers to learn.

02 · The approach

One plugin, built around how the team works

FusionX was my idea and my initiative. I designed and built it on my own in 2026, in TypeScript and React. It started as three separate plugins: Action, Search and Color Replacement. I merged them into one plugin with a shared interface and a home screen for picking a tool, then added Variable Inspector, Insert and Detective as the team’s needs grew. Five UI designers on the team used it in their daily work.

Every tool follows the same rules: preview before anything changes, report what was skipped, and make every bulk change a single undo.

03 · Headline case

Rebranding by rebinding colours

The designs used colours bound to fixed primitive colour variables, so there was no simple switch between client brands. I treated it as a system problem first and a tooling problem second.

  1. 01

    Audit

    Mapped how colours were actually used across the design system.

  2. 02

    Simplify

    Removed or replaced colours that were unused or rarely used.

  3. 03

    Model

    Built a Client Configuration variable collection that switches per client with variable modes.

  4. 04

    Automate

    Built Color Replacement to move every existing binding to the new client variables automatically.

A full working project was rebound in about 20 minutes instead of weeks. Every rebrand after that became a mode switch, not a redesign.

04 · Under the hood

How Color Replacement stays safe at scale

  • Scans everything. Every fill, stroke and shadow colour bound to a variable, in a selection, a page or the whole file, including text with mixed colours and local colour styles.
  • Matches by name, longest match wins. text/hyperlink-active-primary-50 maps to primary-50, and primary-500 is never mistaken for primary-50.
  • Review before change. A checklist of every proposed rebind, plus a list of colours with no match.
  • Safe to run. Each binding is re-checked just before it’s written, main components are rebound before their instances to avoid unneeded overrides, and the whole run is one undo.

05 · The suite

Seven tools, one interface

FusionX Action tool recording edits on a Guest payment screen

01 / 07

Action

Record and replay edits, like Photoshop Actions.

  • Record edits on one screen and replay them on any number of screens with the same structure.
  • Records intent, not just values: “Align center”, variant changes, swaps, resets, renames and layer order.
  • Targets selected layers, name patterns (Desktop*, Tablet*), every instance of a component, a page or all pages.
  • Preview marks each target “will change”, “up to date” or “issue”. Any of the last 10 runs can be reverted.
  • F1–F12 hotkeys, and actions export as JSON to share with the team.
FusionX Search tool: find and replace fields with Selection, Section, Page and All pages scopes

02 / 07

Search

Find and replace with a precise scope.

  • Scopes Figma’s own search doesn’t offer: the selection, chosen sections, the page or all pages.
  • Match case, whole words and regular expressions with capture groups.
  • Only the matched characters change. Mixed fonts, colours and links are kept.
  • Replace all is one undo, and skipped layers are reported. Recent searches can be re-run.
FusionX Color Replacement: choose the client variable collection to bind to, what to rebind from, and the scope

03 / 07

Color Replacement

The tool behind the headline case. It scans every bound colour, matches it by name, lets you review the list, then rebinds everything in one undo.

FusionX Variable Inspector: Properties view prompting the designer to select layers or inspect the page

04 / 07

Variable Inspector

Audit variables and components.

  • Properties view: every component instance grouped by component, with variant, boolean and text properties editable one at a time or for a whole group.
  • Variables view: every bound variable by collection, with its resolved value, alias and how many layers use it.
  • Finds broken variables and colours not bound to any variable or style, and copies the results as a report.
  • Stays fast on large files with parallel lookups, cancellable scans and partial refreshes.
FusionX Insert tool: Cursor, Tooltip, Button and Stamper cards, with options to link a design system component

05 / 07

Insert & Stamper

Place system components precisely, and mark changes for review.

  • Cursor and Tooltip: finds every element in an active hover state and places the pointer or tooltip at a saved offset, sized to its final text.
  • Button: inserted where you select, with the variant chosen inside the plugin.
  • Stamper: colour-coded review stamps per ticket, saved in the file for the whole team, with navigation between copies and one-click cleanup after approval.
FusionX Detective: counts of hover states, pointers and missing pointers for the current page

06 / 07

Detective

Checks before handoff.

  • Scans the selection, page or all pages for hover states with no pointer, and counts hover states against pointers.
  • Walks you through each missing one, adds pointers to one or all, and flags stray pointers.
  • A shared ignore list, and new checks plug in as the system grows.
FusionX home screen with large cards for Action, Search, Color Replacement, Variable Inspector, Insert and Detective

07 / 07

Home & shared shell

One plugin, one design language.

  • A home screen with large cards to pick a tool. Number keys open each one.
  • Tools load only when opened, the window keeps its position, and the last tool used is remembered.
  • Follows Figma’s light and dark themes, and each tool opens straight from Figma’s plugin menu.

06 · Impact

Hours of production work, down to minutes

TaskManualWith FusionX
Rebind a full project’s colours to client variables (tens of thousands of elements)Weeks~20 minutes
Repeat a multi-step edit across 20–50 screens1–3 hoursMinutes, previewed and revertible
Find and replace copy within one flow or section15–30 minutesSeconds
Place cursors on 30 hover states30–45 minutes1–2 minutes
Tooltips with final text and the correct nubbin position2–3 minutes eachSeconds each
Check a page for missing pointers before handoff30–60 minutes per pageOne scan, guided fixes
Find broken variables and hard-coded coloursHours, inconsistentOne scan with a report
Mark updates for review, then clean up after approval1–2 minutes per stamp, plus manual cleanupOne click each way

Colour rebinding time was measured on a live project. Other times are typical estimates.

07 · Beyond time saved

What changed for the team

  • Consistency. Components and tokens are applied the same way every time.
  • Fewer handoff defects. Missing pointers, broken variables and unbound colours are caught before developers see them.
  • Faster review. Colour-coded stamps per ticket let team leads find every change across pages straight away.
  • Easier onboarding. One plugin and system-aware defaults mean new designers produce compliant work from day one.
  • Room to grow. New components and new Detective checks plug in without redesigning the plugin.

08 · How it was built

Engineered for very large files

  • Stack. TypeScript, with React for the Search and Color Replacement interfaces, built with esbuild. Each tool runs separately inside one shared plugin shell.
  • Performance. Pages load only when needed, scans use Figma’s built-in search and can be cancelled, and work runs in short time slices so Figma never freezes.
  • Safe by design. Every bulk operation is one undo, results are re-checked before writing, and anything skipped is reported, never silently ignored.
  • Release-aware. Components link to the design system library by name, with a fallback copy if the library can’t be reached.

Hiring a senior product designer? Let’s talk.