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
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
Introduction
- Learning Framer X
- What you should know
Introduction to Framer X
- What is Framer X
- Differences between Framer and Framer X
- Overview of the interface
- Overview of the store
Design in Framer X
- Define your layout
- Explore frame resizing
- Create more layouts
- Use frames with pictures
- Stacks introduction
- Use texts in frames
- Draw with a path
- Complete a logo with drawing tools
Prototype in Framer X
- Overview of interactions
- Create a click interaction
- Create a scroll interaction
Introduction to Components
- What is a component
- Introduction to React
- Your first React component
- In-depth look into the component
- Introduction to overrides
- Publishing your component
Conclusion
- Next steps