Framer Feature Wishlist

My explorations into improving the code and layer list navigation experience in Framer.

Before we begin, I want to point out that this is more of an exploration rather than a finalized solution offer. On the way, I discovered a couple of flaws and side-effects. I offered some possible solutions at the end. But still, surely it needs more iteration and thinking. If you want to do the same on your own, download a free 2 week trial of Framer.

Test It Out

Here the link of the prototype. Note: Click left while holding the left arrow key to simulate the right click. Fonts might look different if you don’t have San Francisco font family in your system or using browsers other than Safari.

Sorry for I couldn’t share this prototype with the cloud feature of Framer. There is an error that prevents me to upload via Framer. I reported this bug and hope it would get fixed soon. So if you want to download and play with the prototype, here the link.

The Problems I wanted to Fix

1. The Code Navigation

I love the simplicity of Framer. Just one code file is enough for testing most of the ideas quickly. And if things scale up and you started to have hundreds of lines of code, there is folding feature to rescue you.

The problem starts after this. When you have a bunch of folded long code blocks, you start to come and go between them really frequently. And the current code navigation system isn’t efficient enough for this.

Steps of a Usual Code Navigation Task
1. Open a code folding.
2. Scroll to the place you need to edit or look.
3. Close the code folding to go back, or use the code navigation at the most right bottom part of the editor.
4. Scroll to the place, do your task, and repeat. 

A lot of time and focus is lost because of the scroll position isn’t kept and you are not able to go to other code foldings with one click.

Also I thought if the code navigation becomes more efficient, nested code folding support might be a nice feature addition. Maybe the reason it wasn’t supported in first place was the navigation efficiency, or maybe just not to break the simplicity I don’t know. But it might good to have.

2. The Layer List Navigation

In many times we need to check out if layers are placed correctly or the current status of the particular layers. For a lot of times, it’s hard to do this as there is no folding or filtering support in the layer panel.

Sketch has very good layer list system already. So no need to invent the wheel again. Also a simple addition like highlighted guide lines would be nice to have.

Some of the Features Needed for the Layer Panel
1. Collapsible layer hierarchy.
2. Layer search / filter support. 
3. Highlighted guide lines when hovered. 

I didn’t implement some of these yet, but I added a toolbar to the bottom part of the layer panel for this purpose.


The Flaws and The Possible Solutions

Before prototyping this code navigation system, I sketched out a couple of different concepts. However it is not easy to imagine how it would work with possible tasks from simple to complex. So I decided to implement the one looked most efficient and simple at first sight and test it out on the way.

After some limited tests, it felt like it made the code navigation really faster. But it comes with a couple of side-effects like:

  1. It looks crowded when you open more than 3–4 code foldings. A small close icon in the hovered state would be a nice addition to quickly close any opened section instead of right clicking and then closing.
  2. It’s possible that the navigation stack grows faster than acceptable rate. I couldn’t test this out in a real project, so making a rough guess. As a possible solution, we could insert the code foldings only if they are option-clicked or something like that rather than adding by default.
  3. The order of the navigation stack is similar to the code order. So when you open a new code section that is between two sections, it inserts to the between. This might cause confusion time to time.
  4. Requires short section names. Some people might be using folding feature with longer titles.
  5. Layer collapse action is triggered with left mouse click, and this disables one of the current feature: show related code lines. To fix that conflict, we can add an accessory icon to the hover state. This can be either an arrow to trigger folding action, or a code icon to trigger showing related codes action.

Conclusion

I hope these ideas would be helpful to the Framer team or any other products with similar concepts.

I really enjoyed playing with ideas and prototyping a prototyping tool. It shows how powerful Framer is. It would be really harder to make this kind of job with any other prototyping tools currently.

I really love to think on design tools. I made another very detailed concept design for another prototyping tool, hope to share it with you soon. Follow me to keep posted and let me know what your thoughts are about these ideas and possible ways to improve them. Thanks, take care!