2015
Pluralsight / Frontend Masters
Jay Stakelon
4:44
English
Prototyping is 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. 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. Course materials are available at http://bit.ly/learnframer
Introducing Framer
48m 6s
Intro and Agenda 8m 40s
UI Prototyping 7m 3s
Framer Examples 6m 39s
Under the Hood 4m 45s
Framer Studio Tour 6m 54s
Exercise 1: Ship a Framer Prototype 1m 9s
CoffeeScript Primer 12m 51s
Framer Fundamentals
35m 48s
Layers 13m 2s
Layer Properties 7m 40s
Layer Events 5m 7s
Code Structure 5m 27s
Exercise 2: Interacting with Layers 4m 30s
Animation Basics
29m 53s
Animation Basics 8m 24s
Dragging and Scrolling 9m 3s
Video 5m 45s
Exercise 3: Material Response 6m 39s
Importing Overview
23m 19s
Importing Overview 3m 2s
Importing from Photoshop 5m 26s
Importing from Sketch 6m 17s
Exercise 4: Prototype an App 8m 33s
Animation Workshop
50m 47s
Animation Objects 9m 29s
Bezier Animation Curves 10m 18s
Setting Defaults and Layer States 10m 21s
Sequencing and Cascading 6m 22s
Exercise 5: Animation Workshop 5m 0s
Exercise 5: Solution 9m 14s
Responsive UI
54m 18s
Dynamism 6m 33s
Modulation 12m 37s
Resistance 8m 46s
Velocity 4m 49s
Thresholds 3m 29s
Exercise 6: Card Swipe UI 5m 21s
Exercise 6: Continued 12m 39s
Data-driven Prototypes
29m 10s
Layers and HTML 4m 43s
Pulling in JSON 6m 12s
Using Firebase 10m 18s
Exercise 7: 'Smart' Prototypes with Firebase 7m 55s
Appendix
13m 10s
Wrap-up 13m 10s
pluralsight.com/courses/ui-prototyping-framer-js, frontendmasters.com
Download File Size:1.19 GB
|
