Skip to content
kris.gamble
All work
Design systems2025Internal

Design-to-editable-SVG production system

A production system that turns HTML source into brand-consistent, editable SVG for Figma. Produces native SVG elements — not flattened images — so designers can edit type, colour and layout inside their tool of choice.

RoleDesign and system build
TypeInternal production tool
OutputNative SVG for Figma

The problem

Design assets are often produced as flattened images that a team then has to reproduce inside Figma to make anything editable. That gap is where consistency drops and time gets lost.

What it does

Takes a source layout and outputs native SVG that lands in Figma with type, colour and shape as editable elements. Brand rules — palette, typography, spacing, component sizing — are applied at generation time, so the output is already on-brand rather than needing to be corrected afterwards.

The internal mechanics are deliberately not published. The relevant point is what it produces: designer-ready, brand-consistent, editable Figma assets from source layouts, without the copy-paste-fix cycle.

SVGFigmaDesign productionBrand systems