Case study
SlicePilot
Figma Plugin for Klaviyo Email Uploads
Role
Scope
Stack
Live
What I built.
- 01
Built the whole product, from the plugin designers use inside Figma to the payments and customer accounts behind it.
- 02
Designers select an email design, choose how many slices, and click Compress & Upload; the plugin cuts, compresses and uploads each image to Klaviyo, replacing more than 10 manual steps.
- 03
Agencies can save up to 100 brand accounts and switch between them from a dropdown.
- 04
Subscribing on the website creates the account, generates a license key and emails it with the invoice, with no manual step.
- 05
A free tier of 6 uploads a month with no sign-up, and a clear upgrade prompt when credits run out.
- 06
An admin dashboard where the owner sees every customer and their usage, adds credits and creates trial keys.
- 07
When a third-party service the plugin depended on shut down, replaced it with our own lightweight proxy, which also moved a secret key out of the plugin.
- 01
Figma plugin slicing engine: 1 to 100 horizontal slices, up to 3 columns per row, cleanup of earlier slices, and 1x or 2x JPG or PNG export.
- 02
Upload pipeline: license check, export to bytes, TinyPNG compression, Klaviyo Images API import and credit deduction, with live status in the plugin UI.
- 03
Express 5 and TypeScript API on MongoDB with Joi validation; signature-verified Stripe webhooks create users, subscriptions and plan-prefixed license keys.
- 04
Credit limits read from Stripe product metadata, so pricing changes without a deploy; renewals, plan changes and cancellations are told apart to decide when credits reset.
- 05
React 19 admin panel with Redux Toolkit, RTK Query and Ant Design for customers, usage, credits and trial keys.
- 06
A Cloudflare Worker CORS proxy with separate TinyPNG and Klaviyo routes, keeping the TinyPNG key server-side as a Worker secret.