An introduction to Framer X

An introduction to Framer X
20.01.2019 (воскресенье), 11:00
1100 грн
Projector, ул. Воздвиженская 34а

Tes was developing iPhone apps. When trying out a few prototyping tools he stumbled upon Framer and decided to write a manual 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 Store;
A bit harder. Adding animations: you use Overrides, 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 Code Components 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.

We will:
— 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 Store;
— add simple animations to the prototype with Overrides (our first bits of code, but you can copy/paste most of it);
— make a Code Component like those that you can find on the Store

— A basic proficiency with Sketch, Figma or similar UI design tool;
— A Mac with:
1) Framer (you can use the 14-day trial);
2) Visual Studio Code (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.

Language: English.