Skip to content

Instantly share code, notes, and snippets.

@koenbok
Created November 14, 2013 12:50
Show Gist options
  • Save koenbok/7466244 to your computer and use it in GitHub Desktop.
Save koenbok/7466244 to your computer and use it in GitHub Desktop.
Basis for Framer lessons.
What is Framer
Prototyping toolkit.
---
Why did I make Framer
Because prototyping is important.
Why?
- We make interactive work, static mocks don't cut it anymore
- Better communication about work through prototyping
- Idea machine by playing and seeing direct results
On a higher level, we have a tools mismatch. We use tools that are designed for desktop publishing for interactive design. This will change but will take time. Framer helps to get shit done until they arrive.
---
The main use case for Framer is to invent new ui. It is an extremely flexible tool, so it should be possible to make almost anything that you can dream up. Comparable tools are Quartz Composer and Flash.
Framer is not the best tool to demo application flows. For that you are better off with tools like Keynote or Flinto.
Framer is a Javascript tool that uses the browser. It very performant because it renders almost everything on the gpu. You can mix Framer with other Javascript libraries to for example use live data.
Knowing code helps but is not needed. You can get quite far by copying and pasting examples. If you've ever done some jquery, you'll recognize quite a few things.
---
Show some examples on the site
- http://www.framerjs.com/static/examples/NewsFeed/index.html
- http://www.framerjs.com/static/examples/GoogleNow/index.html
---
Framer is integrated with Photoshop and Sketch.
No slicing anymore, no munk work. Just design it in your favorite graphics editor and start adding behaviour right away.
---
Photoshop demo
- Draw a square
- Make some groups
- Run Framer
- Explain browser/ps/editor setup
- Export, repeat
This is MAGIC
---
Framer basics
How does the magic work. What happens behind the screens?
Framer consists of basic building blocks. Views, animations and events. We'll walk through these and you will see that you can pretty much build any interaction with these.
Lessons from the website: http://www.framerjs.com/lessons
- Views
- Hierarchy (sub, super)
- Types (scroll, image)
- Styling (it's just css!)
- Animation
- Properties
- Curves (linear, bezier, spring)
- Events
---
Now, go back to your Photoshop example and apply some of these things we just did.
- Animate a Photoshop view
- Add a click handler to start the animation
- Add a second animation on the same click
---
That should give you a good basis to start doing Framer. Here are some more resources.
- Site: http://www.framerjs.com
- Tutorial: https://vimeo.com/74712901
- Group: https://www.facebook.com/groups/framerjs
- Snippets: http://codepen.io/tag/framer
---
Thanks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment