[AI WORKFLOW]
Figma to Optimizely
A Claude Code plugin I built at Pillar4 Media that turns a Figma design into a launch-ready Optimizely test in one command.
Role
Product Designer. Creator and maintainer
Year
2026
Platform
Claude Code plugin
Services
Workflow Design, AI Tooling, Team Enablement
The short version
Problem
Every test design got rebuilt by hand before it could run. One sprint to build, another to test.
What I did
Designed and built a plugin around how our test engineer actually works, then wrote the guide and onboarded the product team.
Outcome
Build time went from a sprint to hours. PMs and analysts now ship their own test widgets, more than a dozen so far.
01 / The problem
The slow part wasn’t the idea. It was the handoff.
Optimizely only runs plain HTML, CSS and JavaScript. Our designs reached it as React exports from Figma Make, and the analyst who launches our tests rebuilt every one by hand as a widget. Wrong star styles, clashing backgrounds, nothing editable. Every test paid that tax.
02 / The insight
The engineer was the real user of the design file.
My first run wired Figma MCP into Claude Code. It beat the Make export, but it was still hardcoded, with zero editable fields. Our test engineer called it “significantly better than figma make” and sent five notes. Each note became a rule the plugin enforces every time.
03 / The rules
Every correction became a rule.
Content goes through extension fields, never hardcoded. A form schema declares every field. Widgets mount through Optimizely’s API. Backgrounds stay transparent. Stars render in the brand style. The engineer stopped repeating himself because the plugin remembers.
04 / The plugin
One command, four files, one human check.
It reads the desktop, tablet and mobile frames, writes the files Optimizely needs, and runs a QA agent and a validator. Then it opens a local preview and won’t call the job done until a person confirms it matches Figma. Briefs stay in Notion. The plugin only makes what Optimizely uses.
05 / The convention
One character tells the plugin what a PM can edit.
A $ on a Figma layer makes it an editable field. $$ makes a repeating list a PM can add rows to. No prefix stays static. Designers mark intent in the file they already work in.
06 / What a PM sees
Every variant is a form, not a code change.
PMs open the widget in Optimizely and fill in fields. No engineer, no rebuild. The tiled cards test shipped with 73 editable fields, up from zero on the first run.
07 / The rollout
From a first run to the whole team, in a month.
About a week of hands-on build, alongside regular sprint work. I packaged it as a skill, demoed it live for product, then wrote the guide for the desktop app, not the terminal. New PMs now onboard from that guide.
Results
Hours
To build a test, down from a full sprint
~5 min
Figma frame to working code
0→73
Editable fields per widget
12+
Experiments shipped through it
Next project
Riverly
