First, install Atom, a code editor to take a quick look at the code behind our prototype. Then, follow by showing you what is possible outside of the framer environment by changing code directly into the prototype and adding a new font to finalize our prototype.
- [Instructor] In this video, we'll first install Atom…so we can take a look at the project code,…and finally we'll add a font from Google…directly into our prototype files.…Let's get to it.…So, first, you want to head up to atom.io,…and by the way, it doesn't matter which editor you pick.…I especially like Atom, but you can use Sublime…or any other text editor if you want,…so let's go ahead and download.…Once you do, let's click here,…or you can extract the file directly…from your Download folder.…
I like to do it that way.…Now that we have extracted our file,…let's go back to our folder.…We've got Atom, then drop Atom into your…Applications folder, like so, and then open Atom.…And then let's open our file.…So Open a Project,…and on the Desktop, find the Exercise Files…that you probably have, and then go to the main file,…not one from the other chapters, but this particular one.…
Open it, and let's close the Welcome menu.…Be distracting.…So now you see the file structure of a Framer project.…So if you click on the index file,…
- 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.