Framer X Essentials

Get up and running with Framer X. Learn about all the essential features in this powerful UX prototyping and front-end development software.

Introduction

• Build creative interactions with Framer X
• What you should know

1. Framer X Overview

• What is Framer X?
• Install Framer X
• Install Visual Studio Code
• Overview of the user interface and sections

2. Design with Framer X

• Introduction to layout tools
• Your first component
• Introduction to stacks
• Properties in depth
• Introduction to the drawing tools
• Introduction to preview options

3. Build Interactions with Framer X

• Overview of the interactive tools
• Introduction to the transitions
• Introduction to the Scroll tool
• Introduction to the Page tool

4. Create Simple Components

• Introduction to a component
• Explore the store
• Add components from the store
• Create another component from design

5. Create Complex Components

• Your first component from code
• What are React and Typescript?
• Component code in depth
• Add more props to component
• Style your component in code

6. Advanced Features in Framer X

• Introduction to overrides
• Implement overrides
• Publish your component to the store
• Export your prototype

Conclusion

• Next steps