Problem
Content-heavy templates — emails, banners, campaign assets — created a bottleneck with only bad exits: either designers spend their time transcribing copy edits into Figma, or content owners get Figma access and design integrity dies by a thousand well-meaning nudges. What was missing was a structural separation between design (owned by designers) and content (owned by authors).
Objective
Let designers build and lock templates in Figma while non-designers author copy through a familiar CMS-style dashboard — with the guarantee built into the system itself.
What I did
- Architected a three-part system. A TypeScript Figma plugin with two modes — Publish (designers tag text layers as content slots with labels, guidance, and length limits) and Pull (fetching authored copy back into the correct layers); a React web dashboard where authors log in and fill labelled fields; and a backend with row-level security enforcing who can touch what.
- Made the integrity guarantee structural. Content authors only ever access the dashboard — no Figma access at all. Permissions ensure they can write copy but can never create, edit, or delete the slots themselves.
- Engineered for durability. Content links use stable node IDs rather than layer names, so renaming or restructuring never breaks the connection. The data model includes a locale field from day one — a direct lesson from the 22-language localisation work.
- Scoped a phased build with verifiable stages, and CSV import, draft/approved workflow, and locale switching as the maturity layer.
Outcome
Designers keep full ownership of templates; content owners get self-serve copy editing with the designer's guidance built into every field.