At Juspay, the relationship between design and engineering has never been a handoff it’s a collaboration. As our products grew, so did the need for smarter tools. While Figma and our dashboard design system brought consistency, we still faced friction i.e repetitive dashboard assembly, manual design-to-code translation, and slow QA cycles.
To solve this, we built internal AI-powered tools that eliminate guesswork, boost efficiency, and align design with development. In this section we dive into Figmate and Code Gen the tools that reimagine how we create and code dashboards.
Figmate - Design Dashboards at the Speed of Thought
Figmate is an AI-powered Figma plugin that turns natural language prompts into responsive, system-aligned dashboards instantly.
Designers and Product Managers no longer need to assemble screens manually. Instead, they type prompts like “Dashboard showing daily success rates and volume,” and Figmate generates the layout using predefined components such as KPI cards, charts, and filters all responsive by default using Figma’s Auto Layout.
Everything Figmate creates follows our design system including spacing, typography, tokens, and hierarchy. This accelerates ideation, ensures visual consistency, and cuts design time by more than half. Which results into fewer feedback loops, faster handoff, and more creative bandwidth for designers.
Code Gen - Pixel-Perfect Code, Straight from Figma
Code Gen bridges the design-to-code gap by converting Figma layouts directly into production-ready UI code.
Unlike traditional handoffs that involve manual interpretation, Code Gen reads the Figma structure, infers layout logic, and generates maintainable code that mirrors the design exactly including token usage, spacing, and responsive behavior. It works seamlessly with our ReScript + React frontend stack.
What makes Code Gen special is its semantic understanding i.e it maps component states (hover, disabled), applies reusable props, and respects design system standards. This reduces implementation time, removes guesswork, and eliminates design QA feedback caused by visual drift.
With Figmate and Code Gen, we’re moving from design idea to production in record time without sacrificing quality or consistency. Designers design faster. Developers code with confidence. And our users benefit from beautifully crafted interfaces delivered at scale.
