Context
Yesim serves 4M+ users across mobile apps, web, B2B solutions, and white-label products. As the ecosystem grew, more scenarios needed to work across several surfaces at once: mobile functionality was moving to the web, new product lines were emerging, and white-label products required controlled brand variation without quality loss.
Problem
Existing UI kits in Figma were fragmented and isolated. Without a shared architecture separating brand rules, token logic, component behavior, and platform-specific implementation, the same UI patterns were interpreted differently across App, Web, B2B, and White-label surfaces. This created an operational bottleneck: the ecosystem was expanding faster than the teams' ability to manually maintain consistency and quality.
A deep system audit revealed three critical risks:
tokens did not separate foundation, semantic, component, and brand meanings. This allowed product teams to make hardcoded visual choices and local code overrides, creating massive technical debt.
delivery relied entirely on the manual translation of design assets from Figma into code, leading to redundant development efforts where identical UI patterns were recreated from scratch across different platforms.
AI-assisted tools made it effortless for teams to generate code and layouts instantly. However, without strict machine-readable guardrails, automation simply scaled the mess—making it incredibly fast to generate non-standard UI components, but exponentially harder and costlier to audit and clean up later.
Key question:
How can we build a design system that allows different teams to ship features independently without bottlenecks, while maintaining UI consistency and preventing technical debt?
My Role
I owned the design-system architecture and operating model across different platforms and products surfaces, ensuring the ecosystem could scale sustainably beyond a single team or product scenario.
I shaped the design system as product infrastructure: multi-product architecture, token contracts, responsive layout, design-artifact delivery model, global component workflow, governance logic, and AI-ready operating rules. I defined system rules for how design intent became engineering-ready artifacts before decisions spread across product verticals. At the delivery layer, I implemented the design-system Git library, validation checks, Storybook, and updateable package outputs with engineering partners.
Strategy
The core strategic principle was to decouple engineering from Figma by turning design intent into automated, production-ready code artifacts.
Core System Decisions
1. Three-Layered Architecture
Design Language owned brand identity, visual principles, typography, iconography, and color logic.
Design System owned tokens, components, patterns, interactive states, usage rules, and quality checks.
Product Layer owned adaptation for iOS, Android, Web, B2B, White-label, and future extensions.
This separated system-level decisions from product-level decisions. Core logic stayed reusable, while platform-specific needs received a clear adaptation layer without breaking the whole system.
2. Autonomous cross-platform grid
Previously, the web and mobile products followed different grid structures, spacing systems, and vertical/horizontal rhythm. I unified the layout logic by introducing a shared DOM-based structure, Figma Variables, and Modes. Figma Modes allow designers to seamlessly switch between platform specifications and responsive breakpoints while working within the same design system. Grid, spacing, and layout rules became a strict contract powered by automated design tokens, reducing both design and technical debt while significantly minimizing cross-platform visual inconsistencies and implementation bugs.
3. Design tokens as engineering contracts
Tokens were rebuilt from static visual constants into a multi-tier contract model to isolate design intent from platform execution. The pipeline flows systematically from primitives to semantic tokens, responsive modes, and component tokens, ending in profile and platform overrides.
I implemented this as an automated contract flow compliant with the W3C DTCG specification, where tokens are exported as JSON, validated against strict schemas to ensure structural integrity, and compiled into versioned packages. Fan-out products automatically receive only the required tokens directly from Figma into their repositories. This infrastructure cascades global changes instantly without manual intervention, eliminating visual debt and enabling seamless multi-product scaling.
4. Automated delivery pipeline
I engineered an infrastructure layer that completely removed Figma from the daily engineering handoff, transforming it from a manual "source of truth" into a pure source of design intent.
I built a seamless, end-to-end pipeline that orchestrates the flow from Figma Export through Schema Validation and Git Library synchronization, ending with Storybook/Chromatic testing and a versioned package fanout. This system automatically compiles and distributes platform-specific artifacts—design tokens, component libraries, and graphic assets—across our entire tech stack. To ensure long-term stability, I implemented strict quality gates that automatically block builds upon any violation of naming, component states, or schema integrity.
5. Cross-team component lifecycle modell
I transformed fragmented UI needs into a scalable global component system by establishing a clear path from product agreement to engineering consumption. By vetting each component against platform constraints, state variants, token coverage, and A11Y compliance, I ensured high-quality, implementation-ready outputs.
To scale this across App, B2B, Web, and White-label teams, I orchestrated a sprint-based synchronization model:
aggregated recurring UI patterns into a centralized global backlog.
Facilitated cross-team sessions to document product-specific and platform-specific functional requirements.
developed robust Figma components featuring exhaustive states, variants, and semantic token mapping for composite usage.
enforced quality control via automated Storybook/Chromatic checks, ensuring visual and functional parity.
delivered finalized components to shared Git libraries (Flutter, HTML, React Storybook) as implementation-ready artifacts, including tokens and usage logic.
created a seamless Agreement → Tokenized Figma → Storybook → Git Libraries → Product Adoption pipeline. This delivery model guarantees that engineers receive a strictly defined, implementation-ready package, drastically reducing technical debt and design-to-development friction.
6. Governance rules
I built the governance layer around the core principle: "Consume, do not redefine." This established clear decision-making rules for when a team should adopt an existing pattern, extend it, or propose a new global component. To prevent technical debt, we eliminated ad-hoc local exceptions. Instead, platform-specific variances were managed through tokens, variants, and explicit usage rules.
7. AI-ready operating layer
To ensure autonomous system evolution, I formalized an Agentic Governance Layer—a unified framework governing how both humans and AI agents execute design system decisions. This layer reduces dependency on tribal knowledge and eliminates system drift.
rules codified system invariants including the reuse-first mandate, single-source-of-truth protocols, and strict task discipline
personas defined clear areas of accountability for strategic decision-making, governance, architecture, and quality assurance
skills transformed recurring actions into deterministic procedures, standardizing component authoring, testing, and review processes
workflows mapped end-to-end paths connecting strategy alignment and validation to delivery, handoff, and product integration.
This layer reduced dependency on individual expertise, accelerated onboarding, and lowered the risk of system drift and delivery pipelines.
Outcomes
Metric | Result |
|---|---|
UI Delivery (figma-to-code) | +80% |
Technical and design debt | -45% |
Manual maintenance time | -20% |
Engineers and designers onboarding | -30% |
Cross-platform consistency | +15% |
White-label scaling | +85% |