How we built the align box

Webflow's team addressed user experience issues by developing the "align box," a feature designed to enhance layout proficiency and speed by minimizing clicks and streamlining the design process. Inspired by the game Tic-Tac-Toe, the align box uses a 3x3 grid structure where each cell corresponds to a specific alignment style, allowing users to interact by selecting individual cells. The implementation includes a systematic coordinate system and a 2D array to manage HTML markup and apply styles dynamically. Accessibility is prioritized through keyboard navigation, enabling users to modify alignment values with arrow keys, supported by an active cell concept that ensures alignment values remain synchronized. The feature was well-received upon its launch, achieving a 94% positive social sentiment, yet the team plans to continue refining the user experience.