How would you approach prototyping a scrollable grid with varied cell width, fix height and keyboard movable focus?
I tried creating the grid in Sketch, importing it with Framer Generator and then create a focus ring on the fly around each cell as I move through the grid with the keypad arrows left/right/up/down.
Is there a better way of doing it?
Couple of problems with the current approach I need to figure out:
1 how I find out which cells are adjacent the cell currently in focus so I can figure out which cell to move the focus to next when the user presses the keyboard left/right/up/down?
2 what's the best way to draw the focus ring around the cell? Currently the Sketch grid has separate a grid comprised of separate cells. Each time I get the cell width/height and dynamically resize the focus to match the cell size.
cell.style["border"] = "2px solid red" is nice but can't be animated as I need two states: show the focus ring ("border") on cell focus and remove it as the user moves to the next cell.