Hey, guys! I made this crash course on Framer⚡️
It covers the basics in short videos. The learning curve is not as steep as I originally thought since the text editor offers stuff like auto-code, smart auto-complete, error log, and code snippets. I hope this course helps others that are in the same position as I was (a bit afraid of opening a code editor). You really feel empowered when you add animations, states, components, etc. with code.
I love the simplicity of the UI of the design tab. It makes me think in a different way when I'm designing stuff using their parenting, targeting, and hierarchy logic. I still miss some of the features from Sketch, but I can just import my artboards and add interactions on Framer too ;)
The curriculum follows most of Framer's documentation, so if you prefer reading, I would recommend taking a look at them—super thorough. I'll keep adding more complex stuff as I keep learning too
Fantastic work here. Thanks for sharing this with the community!
Thank you! I appreciate it!
Watched the whole thing today, was super useful. Thanks for your hard work on this.
Thank you, Steven. I'm glad you found it useful. My main goal was to lose the fear of designing with the code editor, still a bit intimidated, but it's really rewarding when you start using it. I'll keep putting videos with more advanced stuff as I keep learning. Thanks for watching the whole thing :)
This is awesome! I've trying to learn Framer for a while - Thanks Pablo
Hopefully, this helps you get started. I made the videos super digestible, so so we don't feel overwhelmed with the coding stuff.
Thanks Pablo! Can't wait to watch!
Yay! Thank you, Tom. Let me know what you think when you watch it!
Awesome work Pablo! Thanks a bunch :)
You're welcome, Pete. I hope you enjoy it :)
Oh yeah this is awesome! thanks Pabs!
Hell yeah, man! I hope you like it ;)
Looks awesome, nicely done.
A huge thanks Pablo, I was looking for a course like this. I've recently started to use framer and from watching so far these videos are super helpful. It's going to speed things up :)
This is a gift! Thank you for the time you spent putting it together.
Thank You, Pablo! I enjoy your nurturing attitude towards Framer, and communicating it in a way to ease fearfulness. I do think some of the earlier, short videos are a bit redundant and possibly could be consolidated. Maybe cut those intros next time after the initial video, as the 20 second intro is a little awkward for 1/3 of a 1 minute video. Other than that, amazing work and thank you for all you do for the Sketch community as well!
Dude, thanks for the candid advice. You're right, I'm gonna consolidate the first 3-4 videos into one, that part doesn't need to be cut into pieces. THANK YOU!
Thank you for sharing your knowledge! I've been slowly teaching myself how to use framer since I purchased it two weeks ago. I'm going to make a start on this crash course today :)
Great course Pablo, nice & crisp. Though I have covered basics and created few prototypes by myself this course still taught me few things to play around and up my game.
great! just yesterday i was looking for some tutorials to get started with framer and didn't find any. taking your crash course today :)
Hey, Pablo!! Thanks for making this course, I took your prototyping course a few weeks back and LOVED it! I am really looking forward to learning Framer. I don't use any prototyping tools in my day to day work. I am primarily a developer, but I have a strong personal interest in design and hope to unlock the designer in me. Thanks again for taking the time to make this course!
I have seen all the videos, but unfortunately I couldn't learn that much. You basically just explained the interface, which is good - but I still don't know how to work with it. But that's not the fault of your videos.
The Sketch Importer in framer unfortunately is a joke. I don't know about you, but my sketch files are super complex and have several hundred groups, a lot of pages and tons of symbols. I had to copy and paste two artboards into a new sketch file for it to import that single thing. And then it didn't even give me the choice to select what kind of artboard I want to work on.
For me, it causes more problems then actually adding any value. I am looking for a prototyping tool at the moment and framers looks very professional, but I am seriously disappointed, a few hours into it. I guess I was expecting too much. It feels like this is more targeted towards making prototypes for mobile apps, then desktop applications.
Either way, I think its fantastic that you provide these kinds of videos; thank your for sharing them.
Yeah, I think the sketch importer could be a bit improved—I have had that same problem you mentioned, where I would move artboards to a different file just for the prototyping. Hopefully , they have something lined up in the future. I go over more than just the interface—it's a 16 videos playlist, not just the first video ;). The playlist starts getting more into coding around video 5 :)
Hey guys, the Sketch importer definitely takes some time getting used to. But there are some difficult problems with making it easier. Mainly; Sketch uses Groups for hierarchy where Framer (and the browser, UIKit, CoreGraphics, etc) use parent/child relationships.
That is one of the reasons why we built the design tab. It's a subset of Sketch features optimized for drawing app ui. If you give it a quick try, you'll see how much easier it is to build interfaces compared to most other tools, and it takes away all of the importing pain.
Oh, I have used the design tab and I think it's fantastic!
At first, the way the parenting works was kind of strange, but the more I use it, the more I love it. I think it's just a reaction, after being used to doing things a different way with other design tools for a decade.
While I love the smart decisions Framer makes for me when moving objects around, sometimes it does something I didn't really mean to be done. If there was an option in the preferences to enable/disable automatic parent/child relationships when you put an object on top of another, forcing the user to actually enter CMD+Return to do so, maybe some people would appreciate it :)
Regarding the Sketch Importer, I think OP's main problem wasn't the parent/child relationship but that sometimes you want to be able to choose specific artboards to import. Sometimes you have a huge project, but you only want to create an interaction between two or three specific artboards in your project. If there was a way to choose which artboards you want to import, that would help :)