Tes was developing iPhone apps. When trying out ahe stumbled upon and decided to write a for it. He's now working on a new book about Framer X.
Framer X is a completely new tool. It's easier to use than Framer Classic for most prototypes, but on the other hand it's now harder to create your own custom interactions.
— Easy (no code needed): scrolling, paging, click-through prototypes with screen-to-screen transitions and overlays + using existing components from the — A bit harder. Adding animations: you use , bits of code that you attach to elements in your design;
— Quite difficult. Creating your own interactive components that are based on React. We'll make one of these at the end of the workshop.
We start from scratch, but you do need to have some (drawing) experience with a similar screen design tool, like e.g., Sketch, Figma, Adobe XD.
— design a layout in Framer X. We'll look at how drawing is different compared to other tools (automatic hierarchy and constraints, drawing paths, using Stacks, creating components,..);
— make a simple prototype with screen-to-screen transitions, scrolling and paging;
— look at some interesting components from the ;
— add simple animations to the prototype with (our first bits of code, but you can copy/paste most of it);
— make a like those that you can find on the Store
— A basic proficiency with Sketch, Figma or similar UI design tool;
— A Mac with:
(you can use the 14-day trial);
(a free text editor).
Useful for UI / UX designers who want to have more possibilities when creating prototypes; react developers who want to add their own components to this design tool.