Skip to main content
ellahayes
ellahayes
New Member
April 21, 2026
Question

Designing a “Letter Boxed” style word puzzle UI in Figma – need layout suggestions

  • April 21, 2026
  • 1 reply
  • 57 views

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!

1 reply

johnsmiths
johnsmiths
New Member
September 14, 2026

I’d recommend keeping the outer boxed structure manually positioned and using Auto Layout mainly inside the individual components. For this type of puzzle UI, trying to make the entire board responsive through one Auto Layout hierarchy can make the symmetry difficult to control.

Components + Variants are definitely the right approach for the letter states. I’d create a reusable letter component with default, selected, and used variants, then use constraints for the board itself.

For responsive behavior, I’d treat the desktop and mobile board as separate layout frames while keeping the same underlying components. This is similar to how interfaces for games such as a waffle game need to preserve a fixed visual structure while adapting the surrounding UI.

The key is to let the puzzle board control its own geometry rather than allowing Auto Layout to decide the position of every element.

Terms & ConditionsAccessibility statement