Vibe Coding a Figma Plugin to Operationalize a Brand Shift at Scale
- Vignesh K
- 7 hours ago
- 1 min read
When our brand agency recommended shifting from semi-bold to medium font weights across product surfaces, it sounded simple. It wasn’t.
The ask wasn’t cosmetic. My responsibility was to evaluate the impact of this change on information hierarchy, scannability, and system clarity across both app and web. That meant auditing and updating every screen—ensuring only semi-bold layers changed, without disturbing established layout or semantic weight relationships.
Manually, this would have taken days of repetitive, error-prone work.
So I didn’t do it manually.
The Build
I vibe coded a Figma plugin that:
Let me select any number of frames
Scanned for semi-bold text layers only
Converted them to medium in one click
Preserved structure, hierarchy, and component integrity
Instead of treating the task as production labor, I treated it as a systems problem.
The plugin wasn’t about automation for its own sake. It was about operationalizing a design decision at scale while protecting UX intent.
The Impact
What would have taken days was reduced to minutes.
More importantly, it freed cognitive bandwidth. Instead of spending time executing mechanical changes, I could focus on evaluating hierarchy shifts, adjusting edge cases, and making principled design decisions.
Why This Matters
This experience shaped how I think about AI in product design.
AI-native workflows aren’t just about generating content or visuals. They’re about removing friction from high-leverage work. Vibe coding allowed me to translate intent into tooling instantly—collapsing the gap between idea and execution.
For me, AI is most powerful when it amplifies craft and judgment, not replaces them.
This project was a small example of that philosophy in action.
Comments