123

Framer Crash Course (youtube.com)

over 2 years ago from , Design at InVision, Writer at The Design Team, Mentor at Sketch Together

27 comments

  • Pablo Stanley, over 2 years ago

    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

    18 points
  • Steven CavinsSteven Cavins, over 2 years ago

    Watched the whole thing today, was super useful. Thanks for your hard work on this.

    4 points
    • Pablo Stanley, over 2 years ago

      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 :)

      3 points
  • Carolina Castellanos, over 2 years ago

    This is awesome! I've trying to learn Framer for a while - Thanks Pablo

    3 points
    • Pablo StanleyPablo Stanley, over 2 years ago

      Hopefully, this helps you get started. I made the videos super digestible, so so we don't feel overwhelmed with the coding stuff.

      Un abrazo!

      0 points
  • Edgar Chaparro, over 2 years ago

    Oh yeah this is awesome! thanks Pabs!

    2 points
  • Pete G.B, over 2 years ago

    Awesome work Pablo! Thanks a bunch :)

    2 points
  • Tom Capossela, over 2 years ago

    Thanks Pablo! Can't wait to watch!

    2 points
  • Benjamin den BoerBenjamin den Boer, over 2 years ago

    Fantastic stuff.

    2 points
  • Vikalp Gupta, over 2 years ago

    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.

    1 point
  • Tom ReinertTom Reinert, over 2 years ago

    great! just yesterday i was looking for some tutorials to get started with framer and didn't find any. taking your crash course today :)

    1 point
  • leanne mclaughlinleanne mclaughlin, over 2 years ago

    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 :)

    1 point
  • Ali Zendaki, over 2 years ago

    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!

    1 point
    • Pablo Stanley, over 2 years ago

      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!

      0 points
  • Steve McKinneySteve McKinney, over 2 years ago

    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 :)

    1 point
  • Asher DawsonAsher Dawson, over 2 years ago

    Looks awesome, nicely done.

    1 point
  • Chris KeithChris Keith, over 2 years ago

    This is a gift! Thank you for the time you spent putting it together.

    1 point
  • Thomas Michael SemmlerThomas Michael Semmler, over 2 years ago

    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.

    0 points
    • Pablo StanleyPablo Stanley, over 2 years ago

      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 :)

      1 point
      • Koen Bok, over 2 years ago

        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.

        1 point
        • Pablo StanleyPablo Stanley, over 2 years ago

          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 :)

          0 points
  • Jay Wilson Jr, over 2 years ago

    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!

    0 points