Go over how to declare/define functions and how to use them afterwards. Create a function and then use it to print a value when we click on a layer. Finish by going over how to add snippets of code with a complete library.
- In this video we'll cover how…to use functions within Framer.…We'll also discuss snippets, and we'll see them in action.…Let's get to it.…First thing I want you to do…is actually go into your favorite browser,…for me I use Chrome.…You want to go to this link,…github.com/robotdestroy/framer-snippets-library…Once you're there, you want to download the entire repo…like so, once it's in your download folder,…either you click here or you go into your folder…and you open it up.…
So you should see a folder full of folders.…What you want to do first, is just delete that one,…this is a document that comes with repos,…you don't need that.…Now we're going to open Framer…and for this particular example,…I'm using this one, you can use any of the other ones.…It doesn't really matter.…Now we're going to go into the Snippets folder,…so the way you reach the Snippets folder…is by clicking on the button that I introduced earlier,…the snippets here, and then going to Show Snippets Folder.…
This will open the Snippets folder,…and then you can just drag and drop all these folders.…
- Importing designs from Sketch and Photoshop
- Inserting and styling screens
- Adding animation with auto-code
- Working with general syntax
- Programming with variables and objects
- Using functions and code snippets
- Creating assets
- Making interactions
- Animating screens
- Adding a scrolling component
Skill Level Intermediate
Q: This course was updated on 08/28/2017. What changed?
A: A new video was added that covers recent changes to the interface.
Sketch: Mobile Design Workflowswith Diane Cronenwett1h 30m Intermediate
1. A Refresher on Great UX
2. The Framer UI
The menu9m 25s
3. The Non-Coding Framer Tools
4. Programming Basics and Usage with Framer
5. Finalizing Your Screen Assets
6. Add Interactions to Your Prototype
7. Add animations to Your Prototype
8. Final Touches
Next steps1m 22s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press 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.