Framer X Essentials

1h 41mBeginner2019-03-13

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

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

Skills covered

Framer XFramerUser Interface PrototypingUser ExperienceLearning

Concepts

Introduction

Build creative interactions with Framer X
What you should know

Framer X Overview

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

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

Build Interactions with Framer X

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

Create Simple Components

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

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

Advanced Features in Framer X

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

Conclusion

Next steps