Get organized with Code Folds

A simple way to keep large projects organized.

Folds

Code Folds in Framer work slightly different then what you’re used to from other editors. You make folds based on text-selection, instead of the editor trying to figure out what to collapse. To make your first fold, select a chunk of code, right click and select Fold. You can make as many folds as you want. Fold your project setup, imports, functions, entire screens, anything that makes sense to you.

Done organizing? Enter any fold with a double click.

Tip: Jump in and out of folds with ⌘ ↩︎ and ⌘ ⎋

Focus

You can edit the code inside folds just like you’d expect. It feels similar to opening up a new tab, without the complexity of managing separate files. The linear hierarchy of your file is maintained, so you can add, edit or remove lines however you want.

The first line of your fold functions as its title. You’ll see it appear in the bottom right of the editor. Click it to quickly jump around to other folds, or use the shortcut ⇧ ⌘ ] to cycle through them.

Get it by updating the app or downloading a fresh copy from the site. We’d love to hear your thoughts on Facebook or Twitter.