🚀 TL;DR

I engineered a Figma plugin that automates the "Design to Code" handover. It converts vector assets into production-ready React components and syncs them directly to GitHub/Azure DevOps, eliminating manual export errors.

⚠️ Almost 75% of the code is written using AI or vibe coding.

🛑 The Problem

Previously, tight deadlines forced developers to copy icons manually, leading to slow handovers and design drift :

• Manual Grunt Work: Developers spent hours manually exporting SVGs, cleaning XML, and wrapping them in React boilerplate.
• Inconsistent Naming: Assets named Vector 4 or Group 2 copy cluttered the codebase.
• Broken Themes: Hardcoded HEX colors in SVGs prevented icons from adapting to Dark/Light modes.
• Inconsistent View Box: Manual exports often result in an incorrect view box.

Actual screenshot from the Storybook library used by our developers.

If you look closely at the 'before' image, you will see that many icons are imperfect. These issues are primarily caused by incorrect view boxes.

Browser inspect mode

Using the browser inspector, we discovered that 95% of the icons had incorrect view boxes. The standard bounding box should be 24px × 24px , but it was incorrect for nearly every icon.