Supercharged Petrolink’s Design Workflow

“Why Is Everything So… Hard?”

When I first joined Petrolink, our design process felt like running a marathon in flip-flops. Possible, but wildly inefficient. Here’s what was tripping us up:

Sketch Files That Could Crash a NASA Computer
Our UI kits were 500MB+ monstrosities—loading them felt like waiting for a dial-up modem. And duplicating these files for every new project? Cue the “loading…” spinner of doom.

“Wild West” Design Rules
Every designer had their own favorite shade of blue or secret padding formula. Inconsistency was the only consistency.

Devs vs. Designers, Round 12
Developers kept rebuilding components from scratch because specs were vague. We were stuck in a loop of “Wait, didn’t we already make this table?”

It was clear —"We needed a workflow glow-up."

The Fix: Building a Design Oasis (One Step at a Time)

Phase 1: Breaking Up with Sketch (It’s Not You, It’s Your File Size)

The “Aha!” Moment—After the third Sketch crash during a client demo, we realized Figma was the answer. Cloud-based, lightweight, and built for collaboration? Sign us up.

What We Did:
Migrated all legacy files to Figma, organized libraries into bite-sized projects.

The Win:
Suddenly, designers could co-edit screens in real-time without yelling “DON’T TOUCH ARTBOARD 7!” Version control? Automated. Sanity? Restored.

Phase 2: Laying the Foundation (No More “My Blue vs. Your Blue”)

The Drama—A developer once asked, “Is this ‘Petrolink Blue’ or ‘Steve’s Blue’?” (Spoiler: They were the same hex code.)

What We Did:
1. Design Tokens FTW: Defined one source of truth for colors, typography, spacing.(Yes, we nerded out over CSS variables.)

2. Auto-Layout Everything: Built buttons, grids, and inputs that magically stretched/shrunk.

3. Think: Lego blocks, but for UI.

The Win:
Designers stopped debating margins and started solving actual user problems.

Phase 3: Variables & Smarter Components (Because Nobody Likes Manual Labor)

The “Oops” Moment—Our first multilingual button broke faster than a TikTok trend. Turns out, fixed widths + German translations don’t mix.

What We Did:
1. Figma Variables: Created dynamic settings for spacing, themes, even content density. (Dark mode? One click.)

2. Nested Auto-Layout Madness: Made components that adapted like chameleons—no more “button_v2_final_FINAL.sketch”.

The Win:
A single dropdown component could now handle 10+ scenarios. Cue the confetti cannons.

Phase 4: The Pattern Library (Where We Became UI Librarians)

The “Deja Vu” Dilemma—Designers kept rebuilding the same dashboard layouts. It was like watching Groundhog Day, but with wireframes.

What We Did:
Curated a searchable pattern library for common flows (e.g., “Data Table with Filters”, “Wizard Forms”). Added usage notes like “Don’t use this unless you want users to cry.”

The Win:
New projects went from “Let’s start from scratch” to “Grab the ‘Report Dashboard’ pattern and tweak it.”
Efficiency level Chef’s kiss.

Phase 5: The Full Design System (Our Magnum Opus)

The Big Vision—Connect designers and devs with a shared language. No more “throw it over the fence” handoffs.

What We’re Doing:
1. Documentation That Doesn’t Suck: Writing guides in plain English (e.g., “Primary buttons are for ‘Do the Thing’ actions. Don’t be a hero.”).

2. Dev Sync Magic: Using Storybook to turn Figma components into code snippets devs can actually reuse.

3. Training Wheels: Running workshops to teach teams how to use the system (and why it’s better than their old “winging it” strategy).

The Results: Bye-Bye Chaos, Hello Slick Hair 👋

🚀 40% Faster Delivery
Projects that used to take 6 weeks now ship in 3.5. (Yes, we timed it.)

💡 70% Less Rework
Devs spend time on new features instead of rebuilding the same table component for the 15th time.

😊 Happier Teams
Designers focus on strategy instead of pixel-pushing. Devs get clear specs. Everyone wins.

Lessons Learned (The Hard Way)

Start Small, Then Scale
Fix the biggest headache first (for us: ditching Sketch). Momentum builds quick!

Bring Devs to the Party Early
Their feedback on variables saved us from so many “Wait, how do we code this?” moments.

Document Like You’re Explaining It to a Goldfish:
Assume zero knowledge. (Seriously, clarity is king.)

What’s Next? (Spoiler: We’re Not Done)

Automation Nation:
Using Style Dictionary to sync design tokens directly to code. Bye-bye manual updates!

Interactive Playgrounds:
Building clickable docs where you can tweak components and see guidelines update in real-time.

Eternal Vigilance:
Quarterly “Design System Health Checks” to prune outdated patterns and add new ones.