A set of simple examples that you can work through with beginners. They all highlight a specific, common interaction or workflow. For more intermediate users, you can try to improve and expand these.

Prototype of the iMessage iOS app with a design imported from Sketch. Contains a bunch of scrollable chat messages, a loading indicator and a clickable dictation icon.

Covers: ScrollComponent, Animation, Click Events, Utils.Delay

http://share.framerjs.com/beip72l48igj/

Prototype of the Facebook Messenger app with a design imported from Sketch. Tap the thumb icon to insert the Facebook Like icon as a new message. The size of the icon depends on the duration of your tap.

Covers: ScrollComponent, Animation, Image Layers, Animation Origin, Touch Events, the “change:scale” event and Utils.Modulate.

http://share.framerjs.com/dbvb7poiozux/

Prototype of a scrollable set of imported images, where each one is clickable and brings the image to the front and center.

Covers: ScrollComponent, scroll.isMoving, Click Events, Copying and Destroying Layers, ignoreEvents and loops.

http://share.framerjs.com/5ovfx0bflifz/

Prototype of the iOS Lockscreen created only with imageLayers defined in Framer. You can swipe right to reveal the keypad. The wallpaper will fade out and blur accordingly.

Covers: PageComponent, imageLayers, snapToPage, the “change:x” event and Utils.modulate.

http://share.framerjs.com/7y6wautoh90y/

Prototype of a bunch of images you can swipe between. All images are imported from Sketch. A page indicator visualizes the current and total amount of images.

Covers: PageComponent, Adding Pages, PageIndex and the “change:currentPage” event.

http://share.framerjs.com/nrtboo3dnh0s/ (Sketch file not included in Shared Link)

Prototype of the Facebook Groups app with a scrollable feed. Clicking “Write Post” brings up a new view, which you can Cancel to dismiss.

Covers: ScrollComponent, Dynamic Properties, Scroll Event, Click Event

http://share.framerjs.com/cinw13nmd706/