Developer tooling · 2026

Figma Context

Shorten the distance between design and code.

Tessel Punt Tool design & TypeScript development

I built a TypeScript Figma plugin that normalises design geometry and exports compact React/SCSS context, variable bindings, assets, and visual references.

I used the output with AI coding agents to implement nearly all of Pebbler Telegram’s HolyWheel screen, its bundle offer dialogs, and most of its career page. The shipped interfaces below show where the tool was used.

Useful context

The export pairs structured layout and style information with the assets and images needed to interpret the design.

Used in production work

HolyWheel and the bundle dialogs provide concrete examples of the design-to-code workflow in the Pebbler application.

Pebbler Holy Wheel screen with a colourful prize wheel and a large Spin button — A playful reward wheel with animated feedback, multipliers, and a reward collection flow.

VIP bundle dialog showing included coins, energy, clothing and spins, with a purchase button — The VIP bundle dialog brings pricing, rewards, availability, and purchase feedback together.

Pebbler career scene showing a character in an Egyptian quarry above three progression cards — The Egyptian Stone Hauler scene: character animation, layered environments, and three skill tracks.

Browse all screenshots