Enterprise SaaS · 2026
Figma Prototype Rebuild
Rebuilding a live enterprise CRM in Figma from scratch - every component, interaction, and animation reconstructed from a screen recording.
Timeline
Q1 2026
Team
Solo
My Role
Design & Prototyping
Tool
Figma
I had a screen recording of a live enterprise sales system. No design files. No component library. No source assets. I rebuilt the entire thing in Figma - interactive, animated, and production-ready.
What I Built
Working from a video recording of the live product, I reconstructed the full system in Figma as a clickable prototype. This meant reverse-engineering every screen, building a component library from scratch, and then wiring up the interactions - including details that don't exist in a static mockup.
Component library from scratch
Every UI element - tables, cards, navigation, form controls, status badges, modals - built as reusable Figma components with variants and auto-layout. Nothing copied, everything constructed.
Chart animations
The cash flow and financial projection charts animate on load. Built using Figma's smart animate with staged transitions, replicating the draw-in behavior of the live product.
Skeleton loading states
Shimmer loading animations - the grey pulse effect that appears while content loads - built as looping Figma prototypes. These are the kind of micro-details that make a prototype feel like a real product rather than a static mockup.
Full interactive flow
The prototype covers the complete quote amendment journey - from location selection through offer configuration, P&L review, and agreement sign-off - with working navigation, overlays, and state transitions throughout.