Luthier

Type

Figma widget

Role

Sole engineer and designer — frontend, backend, and UX. Ideation, requirements, prototyping, usability testing, and delivery.

Stack

React, functional JavaScript, Ruby on Rails, Figma API.

A Figma widget that turns a designer’s document into a production template, so nobody has to hand-code one. Built for Amazon’s marketing-graphics pipeline.

The Figma widget creating a Gateway template.

The problem

Composer is Amazon-internal software that turns templates into finished marketing graphics. It makes more than 50,000 images a year, including placements on the Amazon Gateway.

When I joined, a front-end engineer hand-coded every template. Each one took weeks, and nobody but that engineer could change it afterward. To get more templates we needed designers who could build one themselves.

Figma is the interface.A designer builds a Figma document. A widget sends it to Composer, which walks every layer and generates the template, the editing UI, and the initial state.

How it works

Figma parsing

A Figma→Composer transformer walks the document tree — text, images, shapes — and builds both the template and its editing UI from the layers.

Layout by Figma

It reads Figma’s own layout features (auto-layout, alignment) and converts them to Composer CSS, so designers work in the tools they already use.

Annotations

A small annotation system supplies what Figma can’t infer: which images an end user may replace, which are fixed brand logos, maximum file sizes, text limits.

Modes

Figma Component Sets become template modes — a holiday background, say — and the mode switch is generated for you, even for nested sets.

Figma’s own layout features align the elements.

Nested Component Sets → a mode switch, with unneeded UI hidden.

Engineering

Two modules. The transformer reads the Figma document through the REST API and converts it to Composer JSON with one pure function,getComposerDoc: a tree traversal that collects the layers, the UI, and the initial state. The renderer takes that JSON and produces the template.

I built the schema and the renderer first, to cut down the hand-coding. Figma came after: once a template was just a JSON document, anything that could emit that document could be the authoring tool.

What else was on the table

The alternative to all of this was the status quo: keep one engineer hand-coding every template. That is what the team was doing, and it capped the number of templates at whatever one person could write in a year.

The order was also a choice. I could have started with the Figma widget, which is the visible half. I built the schema and the renderer first instead, because a template that was already a JSON document could accept any authoring tool — and if the widget hadn’t worked, the hand-coding would still have gotten faster.

Outcome

I interviewed template designers on five teams (AWS, Alexa, Amazon Business, Payments, Fresh), wrote the proposal, and built the transformer, the CRUD app, and the backend in 12 weeks. Fifteen template designers used the beta. What they got stuck on became the roadmap.

Brand Builder generated 100 templates per brand across 30+ brands —3,000+ in all. Hand-coded at the rate above, that is about twenty a year, which is the real measure of the change: not faster templates, but a number of them nobody was going to reach by hand.

My team was re-orged in early 2023 and Composer went to another team. I work on the same problem now at Stores Designer: how a lot of teams build one consistent thing without each of them coding it by hand.