A one-stop-shop for running Framer Classic workshops. Good for 3 hours, with wiggle-room for more/less.
See the wiki for general Framer tips and practices.
By the end of the workshop your students should hopefully have some understanding of the below. They shouldn't be expected to re-create what they've learnt immediately—confidence, familiarity, and being able to 'think' programmatically is great.
- Creating and editing layers
- Alignment and resizing (anchoring and pinning)
- Parents and children
- Fill
- Typography
- Making layers active in Code (targets)
- Writing comments
- Stating your intentions (through plain language)
- Snippets
- Adding states
- Changing layer properties through states
- Editing state animation
- Creating events
- Controlling states in events
- Creating layers in code
- Importing layers from Sketch
- Referencing Sketch layers
- FlowComponent
- Event history
- Modals
- Scrolling
- Smart headers and footers
- Layer ordering (stacking)
- Previewing on mobile
- Sharing to framer.cloud
If you have more than 3 hours, or students are flying through the above, try adding interaction to the other articles and buttons in the feed.
Get a feel for the room's familiarity with Framer, Sketch, and coding/digital design in general. Adapt the pace and depth of the sessions accordingly.
Framer is Mac only. Minimum system requirements unknown, though I've run it on pretty low-end college computers okay.
If a student doesn't have a Mac, has a lapsed trial, or any other problem, they can download the free Framer Library.
If you'd like students to demo Preview on mobile. Sometimes impossible on college username/password wifi setups. iOS and Android.
arts.framer: A replica of the NYTimes Arts section as a stand-alone native app. I show this at the start (and occasionally throughout) to give context of what's going to be built. We always start with a blank prototype.
Articles that I've referenced for use in arts.framer:
- Your Week in Culture: Chloë Sevigny, Sharon Jones, Michelangelo’s Drawings at the Met
- From Greenwich Village to the Nation, Leading the Push for Women’s Rights
- Court Blocks Berkshire Museum’s Sale of Rockwell Works and Other Art
How to keep progressing after this workshop:
- Join the Framer group and ask questions
- Join the Framer NYC group and keep an eye out for meetups
- Re-create your favourite interactions and prototypes
- Go through other video and text tutorials
I find that doing these things too early and cause confusion and scare people away:
- Loops
- Modules
- APIs