App Builder UI Designs
Antonio Ruiz
App Builder Figma Prototype
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
Like this project
Posted Dec 2, 2024
Translated an existing app builder into dynamic Figma Prototypes which replicate different user flows and allow re-designing and launching new interfaces.
