Hi everyone
I’m currently designing a word-puzzle interface in Figma inspired by the logic of Letter Boxed, and I’m exploring the best way to structure it efficiently. Here is the reference: https://letterboxedpuzzle.com/
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 desktop & mobile
Where I’m stuck:
I’m unsure about the cleanest workflow in Figma to manage:
- Reusable letter components
- Auto Layout without breaking the boxed symmetry
- Consistent spacing while keeping the structured look intact
Sometimes Auto Layout works well, but other times it distorts the alignment of the letter sides.
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 type of layout should rely more on manual positioning vs Auto Layout
- Tips from designers who’ve worked on game-like or word-based interfaces
I’ve noticed that layouts like this depend a lot on strict constraints (almost like puzzle rules themselves), so I’m curious how others handle that balance in Figma.
If anyone has experience with similar designs, I’d really appreciate your input.
Thanks in advance!