Basis for Framer lessons.

Framer Talk

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.