This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jacek Stryk
Posted Dec 16 - Read on Facebook

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.

2 Comments

Koen Bok

Ha, cool problem.

1) Loop through the views and calculate the distances (filter above/below by doing x/y smaller/greater then comparison layer). You will have to deal with edge cases like in your example pressing down and having 3 equal distanced cells. In osx it would take the most left one.

2) Use an overlaying layer that actually draws the border. You can get the absolute screen frame with layer.screenFrame

Jacek Stryk

Thanks!

Read the entire post on Facebook