Making crosswords in Figma

In the past couple years I’ve found myself getting more interested in crosswords and also using Figma a ton (mostly while building Superset with Taylor). It was only a matter of time until I mocked up a crossword grid in Figma. I first created one for a “mini”, but when Claire was filled with an élan to make a crossword of her own, it inspired me to make a more robust file that she and other people could use for themselves.

I’m no expert at making crosswords (cruciverbalist: noun: a person skillful in creating or solving crossword puzzles) or using Figma (although I enjoy building design tools), so this ended up being a fun exploration.

Here’s the final result: Figma Crossword templates.

Some notes:

• There are blank samples for a 5x5, 9x9, 15x15, and 21x21 puzzle
• I created a “White Square” and “Black Square” component that can be re-used in the grids
• Because the squares are a component, you can toggle visibility of the “Letter” layer on the main component to show or hide the letters in all the grids
• I was able to form the grid by nesting horizontal auto layouts of squares in a vertical auto layout
• In addition to the grid itself, I ended up positioning everything in the puzzle with auto layout, so now it all grows and spaces out to fit whatever grid size is created (except the row & column index guides, oh well…)
• Making a grid of squares with 1px borders was tricky with auto layout in Figma, but I solved this by giving the square component just a top and left border (from drawing lines in it) and then on the grid auto layout layer I was able to (1) adjust “Alignment and padding” in the “Auto layout” rules to have 1px bottom and 1px right padding and then (2) give the entire auto layout layer a fill of #000
• I know all the cool designers add cover pages to their Figma projects, so I went ahead and added one (while employing some questionable use of drop shadow on text)
• I also searched on the Figma Community to see what ideas I had overlooked in building mine, but didn’t find any crosswords, other than a sharp looking Scrabble board, and I saw you have to apply to join—so I applied! UPDATE April 2021: it’s now part of the Figma Community.

My end result is not as dynamic and easy-to-use as an actual crossword builder application would be, but it was fun to build and I’d love to get any tips on how I could have made it better or to see anything fun anyone can make with it!

Here’s the first puzzle I created: