Design system & marketing rollout
Figma source of truth → Webflow production
Client
In-house marketer plus rotating freelancers; Webflow already in use but unmaintained symbols.
How we engaged
Websi hands-on design and build; head of marketing approved final components; one freelance copywriter fed content into templates.
Stack & tooling
- Figma (components, variants, responsive specs)
- Webflow (symbols, class naming convention)
- Short written guide + FigJam for ‘when to create a new component vs reuse’
A consumer brand’s campaigns had drifted visually. We audited live pages, built a compact component set in Figma, then rebuilt core Webflow templates so freelancers could stop improvising spacing on every launch.
Starting point
Black Friday landing pages looked like a different brand from the homepage. Email hero assets didn’t match web ratios. Developers weren’t in the picture—marketing was self-serve—so every freelancer brought their own grid.
Challenge
No appetite for a giant design ops programme. Needed something small enough to adopt in a week but strict enough to stop one-off hacks.
Approach
Captured screenshots of the worst offenders, agreed on three core page types and five reusable sections. Built Figma components with the same names as Webflow symbols. Documented spacing tokens as tailwind-like scale they could actually remember. Ran a working session where marketing cloned a template and published a test page live.
Outcomes
- ✓New campaign pages went live in a fraction of the previous layout time
- ✓Fewer ‘emergency’ CSS overrides from well-meaning freelancers
- ✓Checklist for external creatives: export sizes, font files, and component map link
Constraints & non-negotiables
Limits shape what ships now vs later — these were ours on this job.
- · Brand colour print vs screen variance—locked hex values for web only with a footnote for print
Phases
Order and emphasis change by client — this is how this one ran.
- 1
Week 1 · Audit
Page inventory, screenshot wall, pick hero templates to standardise first.
- 2
Weeks 2–3 · Figma system
Components, states, mobile rules, short Loom for internal team.
- 3
Weeks 4–5 · Webflow rebuild
Symbols wired, class naming clean-up, remove duplicate legacy combos.
- 4
Week 6 · Adoption
Hands-on session, printed one-pager, Slack pinned message with links.
What actually worked
Matching Figma component names to Webflow symbols reduced ‘where is the master?’ confusion. Starting from embarrassing live examples sold the need better than a theoretical style guide.
Real delivery patterns; names and details blended for confidentiality. Happy to walk through a comparable scope.