I love the concept of this software, but the difficulty in selecting elements while designing visually is driving me crazy! Not being able to differentiate between nested elements (because the visual display in the editor places their borders on each other) makes it really difficult to select and work with. Maybe add a "Expand' display button to put a one or two pixel space around the elements in the design window so they can be easily selected.

This video created by Mansour illustrates the same problem from a slightly different perspective.
https://www.youtube.com/watch?v=K0LzsUoJAig
I think this would make it much better for everyone.

I don't mind too much having to click on the name of an item to bring up the drop down menu to have to select some items that are nested inside each other but one thing that would make selecting much visually clearer for me would be after an item is selected it remains highlighted even if you hover over another item. Right now you can have an item selected while a completely different item is highlighted which makes the process confusing and one can easily be confused as to which item is actually selected.

One way to possible handle this would be to have selected items remain highlighted and also have items that you hover over temporarily highlight. This is the way that (can we say this here?) Webflow handles selections and it seems to work fairly well.

It would be great to see some instructional videos for RFF eventually either on YT or Vimeo. I think they will really help people find out about the software but also help people get up to speed on using it. Even if there were just a few covering the basic features and then possibly covering the building of a basic single page site.

The absolute best way of selecting elements and viewing the (nested) content structure is using the DOM tree on the Inspector pane. Here are some of the reasons:

— It shows elements that might be hidden (at a breakpoint) and allows you to temporarily make the element visible,
— It shows additional information about the element such as dimensions, selector in the preview window (and the CSS — collapsed in the screenshot below),
— It allows you to select elements that are behind other elements (for example when using an absolute positioned container overlay — you see how that works in this tip (second image - a theme with this will come your way soon too))
— When a different element is selected it is automagically scrolled to in the preview window,
— It is easy to reorder elements or adding elements to a container using drag & drop right in the tree,
— In case you want to edit styles simply double click and the design pane for that element is brought up.

Try visiting it on a regular basis using the keyboard (cmd-5 on OS X), after a while it will be really easy and fast to go there and it will be a great help

http://framer.coffeecup.com/storage/misc%2Dassets/inspector-selection.png

Videos are in the works btw

Can't wait - and as much as I prefer the (usually) higher quality experience on Vimeo, I also think posting them on YouTube is handy too since there's better speed controls (1.5x etc). Unless someone has a way to control speed on Vimeo. thanks!

Please collect media/images in a separate folder, just like css and js files. Images now populate my root folder, and I find that a major pet peeve.

–Richard

You have control over that now under the Resources. You can select where these types of files reside.

Wow, I didn't realise (it works like) that. And the way it's set up it's even more sophisticated than I imagined. Thank you Scott!

–Richard

Suggestion to add a "New Solid" button to the "Background" section. So we would have a:
New Image
New Gradient
New Solid