This is a document for fast prototyping methods. HAVE FUN!


FRAMER

It's a prototyping tool for cross-platform design. It is also famous for its two modes: DESIGN and CODE, which enables very fast start, but deep potential to integrate something complicated. 

Screen Shot 2018-03-29 at 09.32.46.png

Design Mode

Screen Shot 2018-03-29 at 09.36.02.png

Code Mode

 

 

Design Mode: Graphic Interface with Hierachy

speedrecording.gif
 

Graphic Interface: Unlike the old version of FramerJs, now you can create canvas, shape, layer with its native graphic interface. 

Hierarchy: It is very important to understand to hierarchy, as all the data is relevant to its parent.

Therefore, before diving into the code, it is very important to create Targets and arrange the Target and their Hierarchy properly in the DESIGN mode.

 


Code Mode: Object Oriented Prototyping Tool

codemode.gif
 

Object-Oriented (Target): The code is specific to "object",  which may contain data (properties). And we can use code to change the data, give it conditions for changing, or give it a listeners to listen to the data changes.

Hierarchy: It is very important to understand to hierarchy, as all the data is relevant to its parent.

Components: Pre-made interactions to power your prototypes.

Event: Tap, click, pinch, pan or swipe—from web to multi-touch.





Framer Scroll Component

1_GtTMpOQ1WxVHAjBq42wV1Q.gif



Framer Utils

Additional Content

1_fVojKGoua5V-p6hSvTio4g.gif

Advanced Stuff

Classes and Modules

1_JPQfUfJcG8mxsyWvJP2j-Q.png

1_VdUbkmX2krpdhyAXALrUoQ.gif

 
 

1_i2xPp36SfC-DD-SMwRlJ3A.png

0_E8Xsibd-sl-XmPJs.png
maxresdefault.jpg