The App Builder prototype comprises an extensive, custom-designed set of dynamic and responsive Figma components and over fifty interconnected screens. The project main objective consisted in translating an already existing app builder into Figma components in order to accelerate development through an iterative design strategy made of high fidelity prototypes. A new design and tokenization system was created from scratch, which was used for every single component. A three layer tokenization method was implemented for colors, borders, and custom effects: Primitive tokens, Semantic tokens, and Component tokens. The dynamic prototype allows navigation, user interactions such as onClick, onHover, and onKeyDown event handlers. Components are responsive and consistent with the overall interface as a result of component variants designs and auto-layouts.

figma prototype wireframes dynamic high fidelity interactions responsiveness css tailwind autolayout tokens tokenization variables icons navigation user flows userflow