Hi everyone
I’m currently designing a word-puzzle interface inspired by the NYT Letter Boxed game, and I’m exploring the best way to structure it in Figma.
What I’m working on:
The UI includes:
-
A square/boxed layout with letters placed around the edges
-
Interactive letter states (default, selected, used)
-
A central word-building area
-
Responsive behavior for different screen sizes (desktop & mobile)
Where I’m stuck:
I’m unsure about the cleanest Figma workflow to manage:
-
Reusable letter components
-
Auto Layout without breaking the boxed structure
-
Consistent spacing while keeping the “Letter Boxed” feel intact
Sometimes Auto Layout works well, but other times it messes with the symmetry of the letter boxes.
What I’ve tried so far:
-
Components + Variants for letter states
-
Auto Layout with fixed width/height
-
Constraints for responsiveness
Looking for help with:
-
Best practices for designing puzzle-based UIs in Figma
-
Whether this kind of layout should rely more on manual positioning vs Auto Layout
-
Any tips from designers who’ve worked on game-like or word-puzzle interfaces
If anyone has experience designing Letter Boxed–style games, I’d love to hear your thoughts
Thanks in advance!