Author
Emmanuel Henri
Released
3/19/2018- Importing designs from Sketch
- Inserting and styling screens
- Adding animation
- Programming with variables and objects
- Programming with functions and code snippets
- Adding interactions
- Adding animation
- Finalizing a Framer prototype
Skill Level Intermediate
Duration
Views
- [Emmanuel] Welcome to this course on Framer, a prototyping tool used by startups and Fortune 500 companies to design and bring applications and websites to life. In this course we'll walk through the basics of this amazing software, and you'll have a great starting point from which you can explore any prototypes you may want to tackle down the road. You'll learn how to import assets from other software, how to animate, and add interactions, and finally you'll learn to code with a little CoffeeScript in the context of Framer.
Along the way, we'll build an Apple Watch prototype. It's an adventure story featuring cool characters and a dangerous creature called the Vreeg. So, without further ado, fire up Framer, and let's get started.
-
Introduction
-
Welcome46s
-
Course prerequisites1m 8s
-
Using the exercise files1m 18s
-
-
1. A Refresher on Great UX
-
UX courses and inspiration3m 48s
-
Our project UX4m 9s
-
-
2. The Framer UI
-
Overview of the interface6m 36s
-
The design section8m 59s
-
The code section7m 18s
-
Importing from Sketch6m 22s
-
-
3. The Non-Coding Framer Tools
-
4. Programming Basics and Usage with Framer
-
General syntax quick start5m 31s
-
Variables and objects7m 2s
-
Functions and code snippets3m 55s
-
-
5. Finalizing Our Screen Assets
-
Create assets for Hunora screens10m 23s
-
-
6. Add Interactions to Our Prototype
-
Introduction to interactions15m 4s
-
Solution to challenge6m 56s
-
-
7. Add Final Interactions to the Prototype
-
Conclusion
-
Next steps1m 11s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Welcome