About
Currently building design tooling and infrastructure at Tinder. Previously contributed Babylon.js at Microsoft. ❤️ UX, creative tools & the web platform.
Work Experience
Building design infrastructure and tooling at Tinder.
- Wrote a Figma plugin that lints documents for correct design system usage, providing suggested replacements inferred from context. Also implemented a style to variable migration feature, swapping out equivalent tokens.
- Created an iconography pipeline that extracts icons from Figma and transpiles to React components for the web and SFSymbols for iOS, with dynamic per-layer color rendering.
- Drove the implementation of dark mode for TinderWeb. Implemented theme logic and coordinated with product, design and engineering teams to theme the entire application.
- Built a design token lookup tool supporting search by color, name, token type, and more that generates easy code snippets for usage on web, iOS and Android.
- Maintained the Obsidian design system, contributing to the code generation system that uses Style Dictionary to export code artifacts for Swift, Kotlin, JSON, CSS, etc.
React, TypeScript, Node.js
Maintainer of Babylon.js 3D graphics library.
- Built tools for developers, including a browser-based GUI Editor and Texture Inspector.
- Contributed to Babylon Native, a C++ runtime environment for running Babylon.js on devices using native graphics APIs. Implemented browser APIs in native code.
- Built a realtime multiplayer experience using open source tools to demonstrate the capabilities of Babylon.js.
Typescript, React, C++, WebGL
Intern on the Babylon.js team. Designed and built a texture inspector and editor tool for Babylon.js, a browser-based 3D graphics engine
React, TypeScript, Canvas, WebGL
Intern on the Software Driven Wide Area Networking team at Azure Networking
Education
Projects
A design system linter plugin for Figma. Scans documents for layers where design tokens are not being used or are used incorrectly. Provides suggested token replacements enabling designer to correct issues with a single click. Enables migrations from style-based tokens to Figma variables in a single click.
A WYSIWYG editor for the Babylon.js GUI system, a canvas-based UI engine that can be rendered on 3D surfaces. Supports a layered container system, rotation and scaling, 18 types of nodes, export to JSON/code snippet, etc.
A texture inspector built into the Babylon.js 3D graphics engine, enabling developers to preview and edit their textures and see their changes reflected real-time in their 3D scenes. Supports classic painting tools as well as per-RGBA channel filters and cube textures.
Speaking
Writing
A high-level overview of the technology that makes up Tinder's design system infrastructure, which synchronizes design tokens across Figma, web, iOS, and Android apps.
Awards
Won "Most Innovative Use of AI" in the Generative AI Virtual Worlds Hackathon at LMU 2023 for "CardAI", a card game with content generated on-the-fly using LLMs and Stable Diffusion, rendered using Three.js and React Three Fiber.