Learning Framer X

1h 7mBeginner2018-10-10

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Get a quick start to using Framer X, the UX prototyping and front-end development tool. Learn how to lay out, prototype, iterate, and publish your designs using Framer tools and React component integration. Explore the differences between Framer Studio and Framer X, and build your layout with the easy-to-use drawing and design tools. Then learn how to make your design more engaging with click and scroll interactions. Instructor Emmanuel Henri—a Framer fan since its very first release—also shows how to incorporate React components into Framer for faster design and maximum reusability.

Learning objectives
What is Framer X?
Define your layout
Creating more layouts
Using frames and text in frames
Drawing with a path
Creating interactions
Working with React components

Skills covered

FramerJSFramerUser Interface PrototypingUser ExperienceLearning

Concepts

0. Introduction

01 - Learning Framer X
02 - What you should know

1. Introduction to Framer X

03 - What is Framer X
04 - Differences between Framer and Framer X
05 - Overview of the interface
06 - Overview of the store

2. Design in Framer X

07 - Define your layout
08 - Explore frame resizing
09 - Create more layouts
10 - Use frames with pictures
11 - Stacks introduction
12 - Use texts in frames
13 - Draw with a path
14 - Complete a logo with drawing tools

3. Prototype in Framer X

15 - Overview of interactions
16 - Create a click interaction
17 - Create a scroll interaction

4. Introduction to Components

18 - What is a component
19 - Introduction to React
20 - Your first React component
21 - In-depth look into the component
22 - Introduction to overrides
23 - Publishing your component

Conclusion

24 - Next steps