Skip to main content
Available for projects

Bridging design and code with design tokens

Expert in Figma Variables, design tokens, and building scalable design systems that developers love to use.

View work
Get in touch
0+
Design Tokens
0%
Faster Sync
0%
Figma-Code Parity
0+
Components Built

Featured Work

Real-world design systems that scale

Design Tokens & Automation

Design Tokens Automation System

2024

Enterprise-scale design tokens architecture using Figma Variables with automated code generation pipeline.

View case study

Project Image

Component Library

Component Library with Token Integration

2025

Production-ready component library with 50+ components built on design tokens foundation.

View case study

Project Image

Enterprise Platform

Multi-Platform Design System Scaling

2025

Cross-platform design system architecture serving web, iOS, Android, and React Native applications.

View case study

Project Image

Transforming design into production-ready code

Highly skilled UI/UX Designer and Front-End Developer with a proven track record of crafting exceptional user experiences across web and mobile platforms. Currently serving as Design System Designer at PETRONAS Digital, I maintain the Emerald HUE design systems while bridging the gap between design and code.

I specialize in Figma Variables and design tokens, building automated pipelines that transform design decisions into platform-specific code. My systems eliminate manual handoffs and reduce inconsistencies by 90%.

With expertise spanning from design systems to front-end development, I integrate creative design principles with technical expertise to deliver visually appealing and intuitive interfaces. I actively explore and integrate AI tools to streamline design processes and enhance team efficiency.

Design Foundation
Figma Variables
Code Translation
Design Tokens
Component Systems
React Libraries
Automation
Style Dictionary

Tools & Expertise

Full-stack design systems capabilities

Design Foundation

Figma Variables

  • Color, typography, spacing tokens
  • Accessibility modes (high contrast & color blind)
  • Semantic token hierarchies
  • Variable scoping & aliasing
Automation

Design Tokens

  • Style Dictionary pipelines
  • JSON/YAML token schemas
  • Platform transforms (CSS, iOS, Android)
  • Automated documentation
Development

Component Libraries

  • React, Vue, Web Components
  • Storybook documentation
  • Figma-to-code sync workflows
  • TypeScript prop interfaces
Inclusive Design

Digital Accessibility

  • WCAG 2.1 AA/AAA compliance
  • ARIA patterns & semantic HTML
  • Keyboard navigation & focus management
  • Color contrast & screen reader testing
AI Integration

AI-Powered Workflow

  • Claude Code for automation
  • Figma Dev Mode MCP Server
  • Gemini for art & image generation
  • ChatGPT & Claude for research and content creation
Figma Ecosystem

Figma Plugins & API

  • Figma REST & Plugin API
  • Custom plugin development
  • Automated design exports
  • Token sync automation

Experience

Building design systems at scale

PETRONAS Digital

Design System Designer

Aug 2023 - Present

Develop & maintain Emerald HUE design systems, bridging design to code with AI integration

Seetru Studio

Senior Design Consultant

Mar - Aug 2023

Enhanced PETRONAS upstream dashboard, developed Bursa Gold Dinar website

Orius Digital

Senior UI/UX Designer

Jan - Mar 2023

Designed Maybank sustainability credit card onboarding with carbon tracking

99designs

Freelance UI/UX Designer

Jul 2022 - Aug 2023

Redesigned Wise's SWIFT checker, multiple contest wins

Axiata Digital & Analytics

Web Developer

Dec 2019 - Jun 2022

Designed & developed Axiata Annual Report, Boost e-Wallet campaigns