25 January 2021

Making crosswords in Figma

Crossword templates Figma file

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:

My First Mini


Did you find this helpful or fun? Please donate!

donate via btc or eth

btc: 18jCzwsZDGQYcs6Kyv92pd4683cnnxm1Dd
eth: 0xC285F21Cb271Cb4B3F70c4C47B2f7B26063AF590
paypal: paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer who lives in NYC who is working on Superset and also GoFullPagemore »

github · soundcloud · @lethys · rss