Login

Learn Framer by building Instagram from scratch!

Let's build a realistic app!

In this course we will build a clone of the Instagram app starting with only 3 screenshots from the real app. We will build a basic level walkthrough, slowly adding content and features as we introduce new concepts.

We will learn HOW to learn Framer. We will follow along a workflow that you might encounter if you were building this on your own, which will sometimes lead us down the wrong path. We will have to figure out how to solve the problem in a different way, introducing new resources as we encounter more problems.

By the end of this course you should have solid foundation of the core components and concepts, ready to take on your own challenging app!


Picture?type=large
Mike Johnson
UX Engineer - Google

About FramerCasts

FramerCasts is produced by Mike Johnson, a UX engineer with a background in design. He has worked for Microsoft, Amazon, and is currently at Google. He has been using Framer in day to day work since it was first released as Framer.js many years ago.

4 chapters | 43 videos | 2 hours

Each video builds on the previous for a complete guided walkthrough.

Chapter 1

01 importing from sketch 184f60a86bf3cf1583dee9bce5355a9b9d728f98d3ef7731e10b02683af2ddd4
Importing from Sketch
02 setup page component cfe8e0b46299564003812500fca483c6599c231f640f65d2f4501eb83a3f4314
Setup a Page Component
03 using framer docs b5ff71b479fb4abc72309ca968b7f25ff03599eba4a1b3b1277cc705746f6269
Using Framer docs
04 change starting page 8b8fe631a5ba5055a42bd829fcf49740a1ed4dea7311a7458b67f4757958dafc
Change starting page
05 page component drags too far 4d4e7472e8c4884807243133174b003cffe2da46494f695652b30f66b194dc7b
PageComponent drags too far
06 checking framer source 726761a9d025cff3c5219ecf05ed10c3852c2c959084f699f591026b8123df67
Checking Framer source code
07 using overdrag b66fbe37ff9f049b5b70283c7772576b43d7f0f63630ad217206e55cd866a38f
PageComponent - Overdrag

Chapter 2

08 setup sketch file for scrolling dbc867d3b472acfc9ae8251935beca3c183e84ee1d979f50db05153443addc8a
Setup Sketch file for scrolling
09 setup scroll component 7164124c23d98fcd7096bcebcc866ca36c0a764cae80552c7df5b7711c8ad23b
Setup ScrollComponent
10 pagescroller ondrag event 31ca26b942162b98a4f94d5a2fac3e78148060fd869ef696b4a24c1685c65a10
onDrag event
11 using the framer facebook group d98342f53e7e799de967d594873d71139cbeeb4ba2c7e6a211d8c181f0a186c9
Using the Framer Facebook group
12 1l fixing the direction problem bec722f72784b4c74722a6a1441fb61f182ceaa448fc732d38b17e0a9ca0160a
Fixing the direction problem
13 1m locking the header in position 1893c65dba3a664aff227d6cc7007b20456df0852317a8d9739d661b595b6f09
Locking the header in position
14 adding the users scroller 77431bca141dcedea93aca016b6ced3fad38b290ea062c05967da3db1856ab91
Adding the users scroller
15 1p preventing scrollception 76dfd2814f48085f655d6fbd7e015ba1d7d158a9081a4460b9a5d2a748ff4e8f
Nested Scrollcomponents
17 1r code cleanup 74271be70d8917419a6fc697e4af65262c01ad05d9d13f8d816abd74dd6ff785
Code Cleanup
16 1q prevent usersscroller overdrag d2973f09c819dcaf24933b70742eb5bba60a4fc93ef5964d94616c4b79507991
Preventing usersScroller overdrag

Chapter 3

18 2a updating sketch file 16c278b4e142774278937984fd6f32d786f01bbd435924babe0d72e32b47c003
Updating Sketch file
19 2b reimporint into framer bb3836ea9e57141afec77514c18d709187b7fd98b60d10bc227acdab0a49ef5e
Re-import into Framer
20 2c page change event 86962517d1e27af8daf8c0b51d445a2754ea4c9b6b7f2a016aabd296d2666e68
Page change event
21 2d using states for the indicator dd8de38ce63ea01e57eb0ceb3ae5afb251b81a16eb5ce7f499e38fb240a2b97c
Using states for the indicator
22 2e animating the states 68bd669a6a2dd85daeeb98388d499df689b954346497c70bb399824048c32d2c
Animating the states
23 2f fixing animation timing 32e7c49c3d70a28194cac6cdc79a6994027011497902234bfdc8af123de08f6f
Fixing the animation timing
24 2g fixing function arguments error 4bf4e149404a8bedc732013254fb032f8e415909d3c2fcb7e311033da0b310be
Fix function arguments error
25 2h update indicator by dragging 2d6adae8b60d8b3462265903b53bfca434397b95471a53f5308e6d2d924d790e
Update indicator by dragging
26 getting x values 6aa2ac729dfd4d34670a2a179780cb8dd8202578aa6b3ff310023ebd52a8648f
Getting X values
27 2m fixing the drag release bug 7675324928bb436b7f7d6d67a6c9812e307e8f5179d5d4f04d476bfca4782a1f
Fixing drag release
28 fixing header bug f02ae74d8645b4df45782f72fa7618a307848aa6b8f1e798f4178637e9b1200d
Fixing header bug
29 final code cleaup 9168893de0cfbeed94e1c86ef0ae8e202c25acb7b3b2ceb40771f80c33c11651
Code cleaup

Chapter 4

30 bottom bar explanation 6876c1a2227f52185473221e670d7817321f95b52929bf9e5126e4b8a1429b00
Bottom Bar
31 setup icons e01563b45dd44b07adae4794a4f2ffe18afcaec25c10fd2cb74633b3e8ada884
Setup Icons
32 icon click events 57de1ed109ed89943076db742f753e914b051fd7405d809963d15b533f36d152
Icon events
33 using flow component 6bbf6197b78b19288a6a33819b0250d6221ef9184532fe51d24b47f03c2fb746
FlowComponent introduction
34 linking events 857207fd02cc4d311b94c90b77d79d59861f36b6a4efbe161736f73f63e884b1
Connecting events
35 linking the correct screen 0541e270572e4da158839d5f8e47dfe3c47451fb315fa00943a5c19fba0b8461
Setting the correct screen
36 this is not the index e79e80137298d575f810a930bb362dc382f6ae1d77197aa3f1d835412221f6b4
This is not the index you're looking for...
37 simple explanation of closure f318f54de3c099cd23b7ffc3330bbccf46cdfc6ea2fdcd77fba6bdb713f577a7
Simple explanation of closure
38 fixing loop order c308677bc06fc0df2583abd81ed7acba9b2e136d3a7fdb92742fede61019dd92
Fixing loop order
39 fix position of bottombar f12b69fbb0b31a9b17b7f1a7110bbef57d2b2a1924a05ec45d350700e190a38c
Fix position of the bottom bar
40 flow component events e2b44eb771c21af774dbd50aa3958f664ffb85a6d9ce35e57a93de90a1eb743d
FlowComponent events
41 fixing navigation bar ff3ae076ac939fd8bf1dc20b8e2db5ceedbde3fe9e7fef2e595cf4508eabe1dd
Fixing navigation bar
42 refactoring bottom bar actions ff3ae076ac939fd8bf1dc20b8e2db5ceedbde3fe9e7fef2e595cf4508eabe1dd
Refactoring bottom bar actions
43 code cleanup 47e6f3c4bd142e113dbe6a1493d8b66779d022a7e0022d5aac03b8e575d27374
Code cleanup

Real code, not contrived examples

Thumbnail instaclone 07b1cd230b2ab541ba92202c35caf0bcb2951338e44ff544262c003aca901a44

Learn Framer by building a clone of Instagram!

  • Access to all 43 HD videos in 4 chapters
  • 2 hours of content
  • All source code - start and end of each chapter
  • Yours forever - no subscriptions

  • Frequently Asked Questions


    What happened to the subscriptions?

    I decided to release all the FramerCast videos for free and focus on long form end-to-end prototypes. I believe this is a much better way to learn with the currnet fragmented materials floating all over the internet.


    You mean my subscription was cancelled?

    Yes, FramerCasts is now free. Any users who subscribed for more than 5 months will get the Instaclone course for FREE! Just contact me for verification!


    How long will I have access to the videos?

    Ideologically, forever! Pay once and they will be yours to keep.


    Can I pay with PayPal?

    All payments are processed through Stripe, a secure and safe way to pay online. Please contact me directly to seutp a paypal invoice.