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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Aug 21 - Read on Facebook

Hey guys,

We're working on improving the Learn page of Framer, and we'd love to hear your thoughts and ideas about how we could improve it.
http://framer.com/learn.html

If you've been recently introduced to Framer: how helpful was the current Learn page to you? What content did you miss? What did you like about it? Feel free to share any new ideas you may have too, we'd really appreciate it!

23 Comments

Andy Cetnarskyj

I tried to set it up using cactus, I'm learning JS and didn't want to use coffeescript in Studio, and the Cactus > Extra > Framer default JS didn't work and wasn't clearly explained. Better non studio example would be good.

Dae Hyuk Yoon

It would be awesome to have more detailed docs with examples.

George Kedenburg III

Have you thought about reaching out to somewhere like Code School or Codecademy to put together an intro class?

Jonny Burch

Perhaps I'm looking in the wrong place but there doesn't seem to be that much documentation about generating from sketch and PSDs (I care more about sketch). If it wasn't for that first line in the coffeescript I would have been dead in the water.

Some more examples with lots of annotation would be particularly useful.

A specific section on integrations would be cool. Maybe it exists? If so, maybe put it in the learn section.

Riccardo Zecchini

ye I agree with a more detailed docs. something like jquery docs...

Rafael Puyana

Take a look at the Processing course at Future Learn. I think is the best approach to teaching creating code out there. Also, the reference section of processing.org is flawless. Framer is still short on examples about specifics.

Andreas Wahlström

I think some of the examples could be more elaborate. For example, the scroll example doesn't really scroll since it's missing a sublayer with content.

Ed Chao

I actually referenced the Examples page far more than the learn page. I think well curated examples shown at progressive levels of complexity is my preferred path for learning. (Note, the examples page would push me to view the docs page if I didn't understand something)

Koen Bok

This is all very helpful. Please keep it coming.

Noah Tsutsui

All this stuff is crucial and good. One thing I'd like to suggest is adding method suggestions to the Studio code editor, or at least snippet tab completion. Obviously TextMate and Sublime Text are great examples of this today.

Stephen Crowley

Koen's early demonstration/intro videos were incredibly helpful when I first started using FramerJS. A few community members have done similar videos and I always find value in seeing it done progressively. And Ed did make a good point on structure- having the examples get more advanced as you go down.

Phil Vander Broek

I agree that some more information on importing from sketch / photoshop would be great. When I first started creating my sketch file, I didn’t know how to structure it. I learned through trial and error. This post was really helpful: https://www.facebook.com/groups/framerjs/permalink/539500959510313/. It’s a little confusing that in Framer Studio the imported object is flat, but according to the documentation Framer Generator respects the hierarchy: http://framerjs.com/framerjs/index.html#generator. I couldn’t find information on imported objects for Framer Studio, so I assumed it would be the same as Framer Generator. It's a also a bit tricky to know what to do with single layers.

It's worth saying that once I learned how the file was imported, I really appreciated the flat object because I could heavily modify the sketch file with almost no impact on my code.

The examples are great at introducing many of the concepts, especially the more complex ones like draggable and states. To learn, I would usually check out an example to see if I could borrow some concepts from it and if I found something that seemed like it would work in my prototype I would then reference the documentation to learn more. As a few others have said, I think some more details in the documentation could help clarify some things. For example, it wasn’t immediately clear to me how screenFrame(), contentFrame(), and centerFrame() worked.

Also, I think you should document that the web inspector is available by clicking the small icon in the bottom left. It took me a bit to find that and it’s really useful.

Marc Krenn

* Searchable forum - the search function in FB-groups is a joke. Try searching for "Utils.modulate" for example, I think there were at least three posts about that function within the past couple of days. Zero hits. Searching for "modulate" returns one hit and this one doesn't even include the word you were looking for ;)

I think, this should be very high on the priority list right now, otherwise we'll have to expect the same basic questions to pop-up over and over again.

* Documentation needs a BIG overhaul, since most functions etc. aren't documented at all. As a result, most users probably don't even know that some most those helpful functions actually even exist (again, take "Utils.modulate" as an example).

* Curated community-examples.

* Progressive examples with increasing complexity/difficulty like http://www.learningprocessing.com/examples/

Flip Sos

Yeah a simple vanilla Forum would be nice and progressive examples for every feature

JT DiMartile

1) An explanation for things in the doc would be great. thinks like this entry (x minX, midX, maxX) ... maybe on hover there is a little bubble that shows it's usage with verbose comments and a button to copy.

2) Being able to edit the examples like codepen would allow for quick discovery within the ( already great ) examples.

Samuel Pushpak

I like the approaches taken by famo.us and infoactive.
http://famo.us/university
https://infoactive.co/data-design/titlepage01.html

Ed Chao

Marc Krenn You know, as much as I understand the pain of facebook group search-ability (I spent forever looking up a shared file just the other day), I must say I have really come to appreciate and look forward to the rapid stream of fresh activity and imagery here.

Marc Krenn

Yeah, Ed, this group here certainly has its benefits, as most people use FB as their digital hub anyway. And honestly, if their was a searchable(!), up-to-date documentation I wouldn't mind FB at all - but that's just not the case ... yet.

Thinking about the steady stream of content you've mentioned above, it just came to my mind that this group's "photo"-tab could make a great and (almost) effortless showcase-page. Right now, it's plastered with other images as well but the admin of this group (Koen or Benjamin?) could create and move all the awesome examples into a new album. (Assuming that's actually possible.)

Another way to improve search-ability of this group would be to use of hashtags, like #showcase, #hack, #question, #bug, #undocumented , #younameit ...

Edward Sanchez

Hey Benjamin, I would love to help with that. I'm a total noob and am struggling with the documentation. Perhaps the syntax coloring doesn't help either because I have a hard time distinguishing property names from layer names sometimes. Maybe if properties were colored differently it would help.

I would also like to see usage examples for every property. Doesn't have to be a whole functional thing, just a few line of code using it in a few different ways. Like, I see the centerFrame() thing but have NO idea what it's meant to do, and the description is not clear to me either. I can dig through examples to see it being used but it takes a lot of digging to figure stuff out, so a good description and usage example can save a lot of time.

Check out Sencha's documentation and see how comprehensive it is: http://docs.sencha.com/touch/2.3.1/#!/api

Also, the download link on the examples seem kind of broken on Safari, it always downloads the same file, not the one you're viewing.

Edward Sanchez

Also, the PSD import seems to have 0 documentation (did I miss it?). I imported stuff in and I see nothing on my screen and the editor is blank too. How do I call the layers from an imported PSD? How do I make them appear on the screen?
Thank you!

Edward Sanchez

Video tutorials for beginners can go a long way too!

Luis Ricardo La Torre

Gifs with samples

Benjamin Den Boer

Edward Sanchez Great! Let's chat.

Read the entire post on Facebook