UI Prototyping with FramerJS
Join us for an Awesome Workshop on:

UI Prototyping with FramerJS

Jay Stakelon
Jay Stakelon
Facebook
February 20, 2015 - 9:30am to 5:30pm Central US Time

This workshop has already been published as a course!

Watch the Full Course

UI Prototyping with FramerJS

Some Key Takeaways!

By coding along with us in the Workshop, you'll:

  • Use Framer Studio to create native-feeling mobile app prototypes that run directly on your device
  • Take control of not just the look and the functionality of your prototypes but also the way they feel and respond to users
  • Make prototyping a seamless, first-class part of your design workflow whether you use Sketch, Photoshop or After Effects
  • Explore expressive animation techniques including springs, curves and Framer's state machine
  • Create dynamic, responsive user interfaces using concepts like velocity and modulation
  • Build data-driven prototypes by integrating data from JSON APIs and Firebase

Your (Awesome) Instructor

Jay Stakelon

Jay Stakelon

Jay Stakelon is a Product Designer at Facebook. Jay is like a Swiss army knife for digital products. He’s been designing with code for over 10 years with expertise in product management, user experience design and software development. He was the VP of Product Design and a founding employee at Fullscreen in Los Angeles, where he manages a team of product designers who design, prototype, test and build apps for video content creators and their fans. He also has examples and presentations highlighted on the Framer.js site, and created Frameless, an iOS app to help Framer.js users preview prototypes directly on their devices.

Spend a Full Day Immersed With a Leading UI Prototyping with FramerJS Master

Workshop Details

Prototyping has arrived as a first-class member of the modern digital product design and development toolkit. Framer is a prototyping tool that lets you turn static mockups into interactive prototypes and to experiment quickly with dynamic, native-feeling animations and interactions. It integrates seamlessly with design tools, exports smoothly to mobile devices, and is powered by the language of the modern web, Javascript. In this hands-on workshop, we'll use Framer Studio to design and build responsive interactions, explore advanced animation techniques, and build data-driven UI prototypes together. You'll leave empowered to not just design the look or create the functionality of the products you build, but also to control the user experience and feel. Join FramerJS and prototyping master Jay Stakelon and learn how to build interactive prototypes and learn advanced animation techniques.

Daily Schedule

We've already held over 150 workshops with thousands of attendees in-person and online. In this time we've discovered ways to schedule the day, so it goes smoothly and efficiently. Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.

  • 8:30AM
    Tech Check and Welcome
  • 9:00AM
    Intro to prototyping, Framer.js and Framer Studio
  • 9:30AM
    Examples and a look under the hood
  • 9:45AM
    Hands-on work time
  • 10:00AM
    Framer fundamentals
  • 10:30AM
    Working with Framer
  • 11:30AM
    Animation workshop
  • 12:00PM
    Lunch and Hacking
  • 1:00PM
    Responsive UI workshop
  • 1:30PM
    Hands-on work time
  • 2:30PM
    Data-driven prototyping workshop
  • 3:00PM
    Hands-on work time
  • 4:00PM
    Wrap it up
Expand...

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?

Summary

Framer is a tool for building animation and interaction prototypes with Coffeescript. This workshop is for designers who code, for front-end engineers who want to dive deeper into interaction design, and for anyone who works on web or mobile products who wants to supercharge their design workflow, iterate and experiment faster with prototypes.

Any Prerequisites?

  • To get the most of of the workshop, some Javascript experience is necessary. Coffeescript is what we'll be coding in, which is relatively easy to pick up if you have a Javascript background. If you have no prior experience with Javascript, it might be hard to keep pace with the workshop since we focus on Framer and won't spend much time on language and syntax.
  • Besides a bit of Javascript experience, you'll get the most out of this workshop if you're interested in or have some background in designing and building web or mobile experiences.
  • Before the workshop, please take a few minutes to download and install the free trial of Framer Studio and sign up for a free Firebase account
  • Important: A mac is required to run Framer Studio. You'll need a mac to participate in this workshop.

Event Details

What

One Full Day Workshop Session

Replay Videos (available immediately)

When

February 20, 2015 - 9:30am to 5:30pm Central US Time

Where

Option 1: Attend online on our full HD live stream

Option 2: Attend in-person at HQ in Minneapolis, MN