Author
Released
3/13/2019- 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
Skill Level Intermediate
Duration
Views
- [Emmanuel] Have you recently heard about Framer X, and have been wanting to learn how it works? Are you looking to understand Framer X design and prototype tools, as well as the basics of Framer components, and how to create them? If you've answered yes to any of these questions, you've come to the right place. In this course, we'll explore not only how to get started with Framer X, but we'll also cover the basics of components, and how to work with them. Hi, I'm Manny Henri, and I've been using and teaching Framer products since they were released, and it's my pleasure to introduce you to Framer X. We'll start with an overview of Framer X and how to set it up, along with VS code. Then, we'll start designing and building a prototype while exploring Framer's main building blocks. Next, we'll go through some of the interaction tools so that we can make our design interactive. Also, we'll explore Framer's components. First, taking a look at simple components, and then going deeper into how to build complex components, leveraging React. And finally, we'll explore more advanced tools in Framer, such as overrides, and publishing your components. So, if you're ready to learn about Framer X, fire up the software, and let's get started.
Related Courses
-
Design Thinking: Prototyping
with frog58m 16s Intermediate -
Framer for UX Design
with Emmanuel Henri3h 4m Intermediate -
Prototyping AR User Experiences with Framer
with Emmanuel Henri51m 50s Intermediate -
Learning Framer X
with Emmanuel Henri1h 7m Beginner
-
Introduction
-
1. Framer X Overview
-
What is Framer X?1m 36s
-
Install Framer X1m 29s
-
Install Visual Studio Code3m 16s
-
-
2. Design with Framer X
-
Introduction to layout tools5m 25s
-
Your first component5m 50s
-
Introduction to stacks4m 36s
-
Properties in depth5m 40s
-
-
3. Build Interactions with Framer X
-
4. Create Simple Components
-
Introduction to a component1m 58s
-
Explore the store3m 23s
-
-
5. Create Complex Components
-
Component code in depth5m 17s
-
Add more props to component6m 25s
-
6. Advanced Features in Framer X
-
Implement overrides4m 8s
-
Export your prototype1m 34s
-
Conclusion
-
Next steps1m 21s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Build creative interactions with Framer X