Framer is a tool for quickly creating app prototypes from static designs, using code. Faced with our users creating increasingly bigger prototypes, we set out to find solutions to organise code without sacrificing the simplicity of having just a single code file.
We looked at classic code folding, but found that although it is a great way to hide larger blocks of code, it doesn't make for a great editing experience; for whenever something needs changing inside of a fold, it needs to be unfolded first.
So we decided to keep what's good about the concept, and improve the editing part by making a double click on a fold have the contents of the fold show in isolation, ready for editing. When done editing, the isolated mode can be escaped and the user returns to the main view.
We looked at classic code folding, but found that although it is a great way to hide larger blocks of code, it doesn't make for a great editing experience; for whenever something needs changing inside of a fold, it needs to be unfolded first.
So we decided to keep what's good about the concept, and improve the editing part by making a double click on a fold have the contents of the fold show in isolation, ready for editing. When done editing, the isolated mode can be escaped and the user returns to the main view.