Framer X Essentials

Course details

Looking to get up and running with Framer X? If so, then this course is for you. Join instructor Emmanuel Henri as he steps through how to design and build creative interactions with this powerful UX prototyping and front-end development tool, as well as how to work with components in Framer X. Discover how to use the layout and drawing tools, build transitions, and add scrolling animation. Plus, see how to add components from code, leverage advanced features such as overrides, and export your prototype to share it with stakeholders.

Learning objectives
What is Framer X?
Navigating the user interface
Designing with Framer X
Working with the layout and drawing tools
Building interactions
Creating simple and complex components
Implementing overrides
Exporting your prototype

Concepts

0. Introduction

01 - Build creative interactions with Framer X
02 - What you should know

1. Framer X Overview

03 - What is Framer X
04 - Install Framer X
05 - Install Visual Studio Code
06 - Overview of the user interface and sections

2. Design with Framer X

07 - Introduction to layout tools
08 - Your first component
09 - Introduction to stacks
10 - Properties in depth
11 - Introduction to the drawing tools
12 - Introduction to preview options

3. Build Interactions with Framer X

13 - Overview of the interactive tools
14 - Introduction to the transitions
15 - Introduction to the Scroll tool
16 - Introduction to the Page tool

4. Create Simple Components

17 - Introduction to a component
18 - Explore the store
19 - Add components from the store
20 - Create another component from design

5. Create Complex Components

21 - Your first component from code
22 - What are React and Typescript
23 - Component code in depth
24 - Add more props to component
25 - Style your component in code

6. Advanced Features in Framer X

26 - Introduction to overrides
27 - Implement overrides
28 - Publish your component to the store
29 - Export your prototype

Conclusion

30 - Next steps

Framer X Essentials

Authors

Emmanuel Henri